All Discussions - CSS-Tricks Forums

Border Image (invert border)

ChristopherBurton — Sat, 26 May 2012 17:34:14 -0400

Is there a way to create something like this using border-image or another method without having to apply a background color?

Masonry not working >.

Odd_E — Thu, 24 May 2012 00:28:16 -0400

After finally getting it work in JSFiddle and locally, masonry isn't working on tumblr.

http://omnia-sum.tumblr.com/

If anyone else has had this problem, I'd really like to figure it, because it's really annoying. Is it because it's not an ordered or unordered list? I don't know, but it's bugging me. The worst part it is, it works locally so it taunts me like that.

Anway, help is appreciated.

CSS ':before' pseudo problem, help please

passingTime — Thu, 24 May 2012 07:24:39 -0400

It looks fine on all modern browsers excluding IE. Was trying to use the :before pseudo to make an image border.

The markup is simply:

The CSS:


#box{width: 300px; height: 200px; background: #000; position: relative;}

#box:before {content: ''; background: red url(imgs/border.png); position: absolute; z-index: -1;
width: 100%; height: 100%; padding: 6px; top: -6px; left: -6px;}

Am i doing something wrong?

Firefox Search Bar Tweaks

Yaron10 — Sat, 26 May 2012 14:05:18 -0400

I’ve added the following code to userChrome.css:

.searchbar-textbox[focused] { min-width: 200px !important; }
#PopupAutoComplete { min-width: 300px !important; }

I have 4 questions:

1) All forms’ autocomplete saved data popups (Subjects, E-mails, etc) have now got the attribute ‘min-width: 300px’. How can I limit that width to the Search Bar popup?

2) Pressing '.searchbar-engine-button' doesn’t open ‘.searchbar-textbox ‘ in ‘min-width: 200px’. How do I change that?

3) Is it possible to set ‘#PopupAutoComplete { min-width:’ according to the current longest ‘Search Seggustion’?
(As it works on 'google.com').

4) How do I set ‘#urlbar { visibility: collapse !important; }’ when ‘.searchbar-textbox[focused]’?

Thank you.

Device-Specific Media Query Works, but not while testing.

SpringMountain — Sat, 26 May 2012 13:30:30 -0400

Greetings,

I am using 320 and up's boilerplate for responsive CSS, and the ipad media query :

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

works on iPads as intended, but I can't get any device testing apps or web development software to recognize it.

On the software side, I've tried a few applications with their own built in previews (CSS Edit/Espresso, Coda/Coda2), but no web design software to my knowledge will preview your work in device specific sizes. You can preview from any app/text editor in a browser and change the window and see your media queries do their work and everything works great, but you can't pull up a 1024x768 window with your mouse. Safari's Develop>User Agent>iPad doesn't seem to work either.

I tried Adobe Device Central. I thought I had it loaded right but could not get it to 1. recognize the query in question or 2. rotate the device and have the portrait-specific query take effect.

I've tried a litany of websites and they all recognize my queries, just not the ipad/device specific ones, even the ones saying it will show a horizontally-oriented ipad preview.

The website works perfectly (aside from the parts I haven't finished!) in all of these apps and all browsers. Or at least as perfect as I need it to. If I don't use the iPad query, it works OK, and if I decide to not use it, I could manage the layout so it looks better on the ipad. Pardon my stubbornness, but I want to nail the design for all major devices out there. Pixel perfect for all iPads and Galaxy Tablets, not too crazy of a goal. I'm almost there but this back and forth of uploading/refreshing of my device is bringing my workflow to a standstill.

So what gives? I'd rather ditch device specific queries if I can't test them without holding the device, there are just too many devices out there for this to not drive me bonkers. Is there some super website out there I don't know about this that will deliver me accurate test results? Is there an application that will do this properly? I still have a feeling I'm the one doing something wrong here. You can see it for yourself right here.

Here's a few of the web services I've tried that all work in their own way but none show what I'm seeing on the iPad :

http://resizemybrowser.com/
http://responsivepx.com/
http://mattkersley.com/responsive/
http://quirktools.com/screenfly/
http://tools.hyperspatial.com/web/devices/

On a related note, but one that does not solve all my fundamental issue, 2 days ago Panic came out with DietCoda, an app for the iPad that lets you make some quick changes to your sites via your iPad (yuck!), but more importantly, it allows you to preview your changes from the work you are doing on your laptop/desktop directly to your ipad, using it as a 2nd monitor of sorts, and (hopefully!) recognizing (and not recognizing) your 1024 horizontal oriented device specific directions. I haven't tried it yet but I thought it was worth mentioning.

Fade in images onload

brent_james — Wed, 23 May 2012 17:36:30 -0400

I researched a couple different sites and have tried a few scripts, but is there a simple script I can add to a page to have the #content images fade in while they load?

instead of seeing the images jump around while they load?

Display caption after image enlarged on mouseover?

MBM — Fri, 25 May 2012 20:57:25 -0400

I've modified css that enlarges a thumbnail on mouseover. I've used figcaption to caption the thumbnails but how do I caption the image after it has been enlarged?

http://46.252.196.94/Misc/css3/index.html

The css :

body{
	background:url(../images/Wooden_Flooring_HD.png) #000 center top no-repeat;
	font-family: 'Ubuntu Condensed', sans-serif;
}
    
#gallery {
margin-left: 20px;
margin-right: auto;
}
  
		  
#gallery ul{
/* This position the ul content in the middle of the gallery*/
margin-left:-30px; 
}


#gallery ul li {
/* In order to create the proper effect with hover we should use display inline-table
    This will display the big picture right next to its thumbnail
*/
list-style:none; display:inline-table;
border: 1px solid #ffffff;
background-color:#ffffff;
padding: 6px 6px 6px 6px;
margin-left:20px;
margin-top:100px;
}
 
 
/* This is the pic to display when the hover action occur over the li that contains the thumbnail  */
#gallery ul li .pic{
/* Animation with transition in Safari and Chrome */
-webkit-transition: all 0.6s ease-in-out;
/* Animation with transition in Firefox (No supported Yet) */
-moz-transition-timing-function: 0.6s ease-in-out;
/* Animation with transition in Opera (No supported Yet)*/
-o-transition: all 0.6s ease-in-out;
/* The the opacity to 0 to create the fadeOut effect*/
opacity:0;
visibility:hidden; 
position:fixed;
margin-top:10px; 
margin-left:-200px; 
border:1px solid black;
/* box shadow effect in Safari and Chrome*/
-webkit-box-shadow:#272229 2px 2px 10px;
/* box shadow effect in Firefox*/
-moz-box-shadow:#272229 2px 2px 10px;
/* box shadow effect in IE*/
filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=5);
 /* box shadow effect in Browsers that support it, Opera 10.5 pre-alpha release*/
box-shadow:#272229 2px 2px 10px;
}

#gallery ul li .mini:hover{
cursor:pointer;
}
    
/* This create the desired effect of showing the imagen when we mouseover the thumbnail*/
#gallery ul li:hover .pic {
/* width and height is how much the picture is going to growth with the effect */
width:70%; 
height:70%;
opacity:1; 
visibility:visible;
position:absolute;
border: 1px solid #ffffff;
background-color:#ffffff;
padding: 6px 6px 6px 6px;
top: 160px;
left: 400px; /*position where enlarged image should offset horizontally */
}

figcaption { 
text-align: center; 
display: block; 
font-size: 22px;
}

The HTML :


CSS3 Image Gallery











Spartacus The Television Series





soccer-europe.com





concept clothing wear

WordPress: Show ALL Post Titles from a specific Category

Ehcho — Sat, 26 May 2012 11:31:37 -0400

Hello,

I'd like to be able to show all the posts from a single category on one page. I'd like to format the returned data so it shows the page title (with permalink) and the date the article was written.

I'm using:

query_posts( array ( 'category_name' => 'The Category Name', 'posts_per_page' => -1 ) );

provided by WordPress.org.

Unfortunatly, this shows the article name, with permalink and the whole article content. I want to hide the article content.

Thank you,
Morgan.

Text-align: Centre Problem

lester — Fri, 25 May 2012 22:17:21 -0400

HTML:

" target="_blank" rel="nofollow">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
" target="_blank" rel="nofollow">http://www.w3.org/1999/xhtml">


Please Login Here!







	
	
		Testing
	

	
	
		©Victoria School Infocomm Club 2012

CSS:
#footer{
margin-top: 100px;
height: 166px;
width: 100%;
background: url('../img/footerBackground.png') repeat-x;
text-align: center;
/*Align to bottom*/
position: fixed;
left: 0;
bottom: 0;
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

}

#footer h6{
font-family: Helvetica;
font-size: 10px;
color: #e2f8ff;
position: fixed;
bottom: 10px;

}

Problem: The h6 text doesn't align to the centre, it just stay aligned to the left.

Simple Content Search with javascript

dynamyc — Fri, 25 May 2012 19:04:06 -0400

First of all this is how the script works: jsfiddle

So, I want to make the plugin to search through images (thumbnails) by a attribute like "title" for example or something else. Here is my markup: jsfiddle

I can't make the script to search through that images, I know something is wrong, maybe I didn't put the correct path for

'searchList' : 'jThumbnailScroller',

'searchItem' : 'a'

The code below will activate the plugin:

$(document).ready(function(){
    $('.searchFilter').simpleContentSearch({
        'active' : 'searchBoxActive',
        'normal' : 'searchBoxNormal',
        'searchList' : 'jThumbnailScroller',
        'searchItem' : 'a'
    });
});

The 'searchList' setting specifies the content that will be searched. In this case it is searchable tr. Finally, the 'searchItem' setting allows to dive in and specify an individual element to search. In this case, I use 'td'.

Hope you understand what I'm trying to achieve.

"Older Articles" Button

Ehcho — Fri, 25 May 2012 16:32:38 -0400

Hello,

I was wondering if anyone knew how to get an "Older Articles" link for WordPress? Examples of what I mean can be seen by visiting these two websites: http://www.tuaw.com/ (Scroll right the the bottom "Older Articles") and http://www.cultofmac.com/ (Scroll right to the bottom "Older Posts").

Thank you.

CSS box layout

akhilrajau — Sat, 26 May 2012 07:25:58 -0400

I need to create a layout includes Header with fixed height, Content with flexible height and footer with fixed height. The main point is my footer needs to be positioned at the bottom of the page always. so it feels that content area have fulle space in any resolution. I can create wih fixed positioning but i dont know that is the correct way for cross browser support. My code is the following

Video Publishing Question

anoopbal — Sat, 19 May 2012 17:40:12 -0400

I am trying to come up with a product which probably has 8-10 videos which are around 10-15 minutes long (screen casts). Should I host these videos on my server or move it Amazon S3 or something? I use Hostgator.

Please advise.

Positioning table

brent_james — Sat, 19 May 2012 18:14:09 -0400

I was curious if there would be a way to place/position a table (250x250) in the middle of the page so that the photos wrap or flow around the box? Kind of like text wrap, but for a photo blog instead.

Blockquote Issue - Want a full width blockquote in Content Section

mandava — Sat, 26 May 2012 04:43:31 -0400

Here is my issue:

I want a full-width blockquote in my content section, but the present blockquote is not touching the both sides of content-section (content section already got some padding).

I tried giving -ve margin to blockquote and its not working Can you please do check this link and solve my issue ?

http://www.blueblog.in/bjs/2012/05/07/new-post-to-test-thumbnails-in-genesis/

Blockqoute is in the middle of the content and I don't want to disturb the default padding value of content section...

Thanks
Bharat

Issue with a nested navigation

atolborg — Sat, 26 May 2012 06:21:16 -0400

Argh.. Im having problems with creating a nested menu.

I have already posted about it on stackoverflow, so instead of describing the problem again, I'll just link.

http://stackoverflow.com/questions/10765351/multi-level-navigation

Footer Issue.

Roggers — Fri, 25 May 2012 17:28:10 -0400

Ok so I seem to have this issue, that I can't fix. If you look at my footer :
http://i917.photobucket.com/albums/ad14/EpicAlexOwned/footer.jpg
you'll see the footer does not expand it's width to 100% although the css value of width has been set to 100%.
The HTML seems to be valid, so I don't think that's an issue. Not sure what to do?
my css:

#footer {
position: relative;
bottom: 0;
background: #434141;
text-align: center;
width:100%;
color: #e7ddd0;
margin-top: -150px;
height: 150px;
clear: both;
padding: 15px;

Thanks

ISSUE SOLVED: I realised, i set the width of a social icon to large, and so it expanded the page width.
Thanks anyway

I need help consolidating my code and revising it. New to Jquery!

_John_ — Mon, 21 May 2012 14:29:19 -0400

I have this:

var length = $('h1').html().length;

alert("h1 " + length);
    
var _count = 0;

$('h1').filter(function() 
{
    return $(this).text().length > _count;
}).wrapInner(function() //need to target each char not all inside h1
{
    return ''; // id or class doesnt matter
}); //this.nodeValue should be the text but function isnt standalone

The html output


    IM COLORFUL

What i WANT to happen:

Source: http://jsfiddle.net/john_motyl/aWC2w/1/

Problems with adding CSS to a jQuery .after() element

JosiahB — Fri, 25 May 2012 22:29:56 -0400

Here is the html ... I tried to apply the css inline ...

.....









.....

Here is the js code ...

.....
else
{
$("#contact-form").hide('slow');
$(".success-message1") .after('Your message was successfully sent!');
$(".success-message2") .after('You should receive a response with in one to two business days.');
}
.....

Here is the CSS ...


.success-message1:{
top: -7px;
position: absolute;
left: 52px;
font-size: 1.1em;
}

.success-message2:{
font-size: 0.8em;
position: absolute;
top: 56px;
right: 10px;
left: 47px;

None of these options worked ... Here is a link to my website ... http://lynchburgpatriots.webatu.com/Contact.html

Any help would be appreciated!!!

Thanks!

Multiple AJAX Requests on WordPress Site

afferennen — Mon, 30 Jan 2012 12:49:01 -0500

Here I come for help O wise and über experienced peeps.

I have designed a theme that, from the home page, fades out and fades in (via AJAX) a page in wordpress. However, I also have a plugin I just bought called Thumbnail Gallery, which loads the images in jQuery via AJAX. How do I makes them both work, since I can't use an iframe for the plugin I bought?

Here is the JS code for calling the wordpress pages:

$(function() {

    var newHash      = "",
        $mainContent = $("#main-content"),
        $pageWrap    = $("#container"),
        $el;

	
    $("nav#top-nav ul li a, nav#main-left-nav ul li a, nav#main-right-nav ul li a").click(function() {
        window.location.hash = $(this).attr("href");
        return false;
    });

    $(window).bind('hashchange', function(){

        newHash = window.location.hash.substring(1);

        if (newHash) {
            $mainContent
                .find("#content")
                .fadeOut(500, function() {
                    $mainContent.hide().load(newHash + " #content", function() {
                        $mainContent.fadeIn(500, function() {
                        	$('header').animate({'top':'0px'},500);
                        });
                        
                        $("nav a").removeClass("current");
                        $("nav a[href='"+newHash+"']").addClass("current");
                    });
                });
        };

    });

    $(window).trigger('hashchange');

});

Thoughts?

CSS div alignment

stylish16 — Fri, 25 May 2012 12:07:18 -0400

Hello members,

I am new to CSS & at starting level.

I am developing web page in which i want 3 div's, 2 one below each other horizontally & third one vertically along with them.

Starting position from top of 1st horizontal and last that is 3rd one (vertical) is same.

I want CSS Code for that.

Please Help.

CSS Tricks IRC for live chat & mutual support?

andy_unleash — Fri, 25 May 2012 19:24:27 -0400

Anyone else think this might be super awesome? I have no idea how to set one up though.

Div Failing to Center

Coleman — Fri, 25 May 2012 20:01:24 -0400

I coded my website a few days ago and realized that my #wrapper div wasn't centered. I've been attempting to tackle this but fail to correct my problem.

Website: http://colemantharp.me

Any help is greatly appreciated :)

What happen with MARGIN

lester — Fri, 25 May 2012 11:22:05 -0400

HTML

" target="_blank" rel="nofollow">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
" target="_blank" rel="nofollow">http://www.w3.org/1999/xhtml">


Please Login Here!







	
	
		Testing

CSS

#wrapper{
width: auto;
min-width: 1024px;
height: auto;
min-height: 768px;
}

#loginContainer{
width: auto;
min-width: 1024px;
height: 425px;
border-top: 2px dashed #c2d2d7;
border-bottom: 2px dashed #c2d2d7;
margin-top: 50px;
}

Problem:

The wrapper moved down by 50px.

Can't keep an image from spilling out of div

ScottyChoc — Fri, 25 May 2012 14:24:07 -0400

Can't seem to figure out how to make the div include the whole height of the image. Here is a screenshot, this should be able to explain my issue: http://loveless.org/media/Picture2.png


	Meet our Staff


	
		
			Dennis Loveless, DVM
		

		
			As owner of the D-Railed Ranch...

ul.profiles li {
border: #ccc solid 1px;
margin: 8px 0;
padding: 8px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
ul.profiles img {
margin-right: 8px;
}

ul.profiles li h2 {
font-weight: bold;
margin-bottom: 8px;
}
.left {
float: left;
}

Order of elements in "head" section of html document

GMB — Fri, 25 May 2012 11:44:10 -0400

I am wondering if there is a fixed/correct order for elements appearing in the "head" section of an html document. I'm working on a project and often have style and script elements and am not sure if they should appear in that order and before or after the title of the document. The following is typical of this project:



	
	

  
	Title Here

Is this all right? Should the title precede the style and script? Any help would be appreciated.

Thanks in advance.

Images load faster in gallery

aniket — Fri, 25 May 2012 07:27:24 -0400

from my gallery,Images are taking to much time to load,i want to make it faster just like google image search or like stock images sites.

Jquery Smooth Scroll to a name and id

uddinnyc94 — Thu, 24 May 2012 15:51:18 -0400

okay so here is what i have so far


	 $('a[href^="#"]').click(function() {
		$('html,body').animate({ scrollTop: $(this.hash).offset().top}, 200);
		return false;
		e.preventDefault();
	});

now this code works like a charm but here is the problem it only works like so


	  Click to smooth Scrool 

	  This is where the above link would smooth scroll to

however keeping the code sweet and short i would like for this to work as well


	  Click to smooth Scrool 

	  This is where the above link would smooth scroll to 



	  Click to smooth Scrool 

	  This is where the above link second would smooth scroll to

how can i alter this code to just smooth scroll to all id's and names of anchor because the legit way to bookmark in html is using a name however i have so many pages that i bookmarked with both a name and a id i do not want to change the html structure from name to id or from id to name i just want to smooth scroll to both a id and a name anchor links. here is the code i have so far which currently only works with a id and not a name.


	 $('a[href^="#"]').click(function() {
		$('html,body').animate({ scrollTop: $(this.hash).offset().top}, 200);
		return false;
		e.preventDefault();
	});

Advanced CSS

polson1000 — Fri, 25 May 2012 09:02:32 -0400

Hello every body how you are all well and ready for the weekend. I am aware that with css3 that you can make ribbons. Which is great as I don't have to spend as much time in the images editors. I have just been working on a ribbon graphic this week at http://www.easyepc.org/epc-london/epc-london.html. I was wondering has anyone got a suggestion or hack to re-create ribbons on the London graphic?

wordpress nav help

johnjf — Fri, 25 May 2012 08:35:11 -0400

I'm having trouble with my main navigation drop down links. When I hover over a link, say fads I can't click on the ones below, they dissapear to fast before I can click on it. Why is this happening and how can I fix it? is it happening to others?

here's the link site link