CSS Hints and Snippets thread!

[-:Buro-kun Tsubasa:-]

With permission from Dragonfree, post up good CSS snippets here! Seeing as I don't know CSS, So I can't say any coding, sorry.
Anyways, just post up CSS things here!
http://www.december.com/html/spec/color.html
This site have all the hex values in.

 

[Dragonfree]

Most people use Javascript to do things like affiliate bars with text links that make a button appear above the list when you hover over them, but the fact is that you can do this elegantly with pure CSS.

For each link, put either both text and an image or, if you want something other than an image to appear on hover, you can wrap it all in a span. Like this:

<a href="blah">Link text <img src="button" alt=""></a>

Find the containing element for the links you want this effect to apply to - we can just say it's a div called hoverlinks or something - and in your stylesheet, give it a top padding of exactly the height of your link buttons. If the containing element does not already have a position (such as absolute), also give it position:relative. The relevant CSS for the containing element could be something like this:

#hoverlinks {
position:relative;
padding-top:31px;
}

Now, the magic lies here: using the :hover pseudo-class, you can change much more than just the properties of the link text itself! You can, in fact, make the image disappear completely when normal, and reappear wherever you want it to when the link is hovered over...

#hoverlinks a img {
height:0;
width:0;
}

#hoverlinks a:hover img {
height:31px;
width:88px;
position:absolute;
top:0;
left:0;
}

Ta-da, magic done. You can also use display:none for the normal and display:inline for the hover, but that will cause the image not to be loaded in some browsers until you actually hover over it, so if you want the image to appear immediately as the user hovers over the link, stick with the height and width. You can, of course, use a similar method with a span.

Another hint: People also often use Javascript to allow the user to hover over a menu link or the horizontal space beside it, and that would change the background color of a whole box around the link and allow the user to click anywhere within that space in order to activate the link. Well, you can do that with pure CSS, too. Imagining we want to do this with the same menu, we can do it like this:

#hoverlinks a {
display:block;
}

Then you can put padding and whatever else you like on it - even borders if you feel like it. Just make sure that if you have any line breaks in the HTML between the links, you remove them, and if you have the links in list items, give the list items display:inline, like so:

#hoverlinks li {
display:inline;
}

Otherwise the code will mess up in Internet Explorer. With this, however, both effects should work perfectly in all modern browsers.

A live example of both of these effects can be found here. Just view the source to see the exact CSS used.

 

[ZeroMantis]

A lot of people have a ton of problems positioning with the DIV tag. Usually, they're main problem is getting a DIV table exactly at the center of the page. First:

<style type="text/css">
	.divclass{
	padding:0px;
	position:absolute;
	left:50%;
	top:125px;
	width:200px;
	height:200px;
	margin-left:-100px;
	background-color:#565656;
	}
</style>

This DIV will be exactly in the middle of the page, 125 pixels away from the top of the page. Usually, people think just putting "left:50%;" would work. Setting it to 50% positions the left side of the div to be at the 50% line. The "margin-left:-100px;" fixes this. You can do this with any size DIV, just remember:

margin-left:-([B]Half of the width[/B])px;

An example would be a DIV with a 600 pixel width. It's margin-left tag has to be -300 to position it at the center.

If you play around with the "z-index" tag(tells the browser what layer the div is), you can create a webpage entirely of DIV's and no tables, which is a very common trend nowadays.

 

[nabt]

Rollover Effects Without Javascript:

Let's say you have a table composed of images that act as links and you want to have that nifty roll-over effect where the image changes when the mouse hovers over the image, but you don't want to mess with javascript. I played around with opacity filters with CSS and I figured this should work. I've tested this both in IE and FF and work fine.

Its basically like creating two layers. When the image-link isn't being hovered, the second layer (image) shows on top of the first layer (the background). When you hover over the image, the second layer's opacity is set to "0" which makes it invisible, exposing the background image which would act as the hover image.

Here's what the HTML would be for a table with one image:

<table>
<tr>
<td class="cssrollover" background="yourbackground.gif">
<a href="http://yourlink.com/">
<img src="yourimage.gif">
</a>
</td>
</tr>
</table>

This is a basic table consisting of one row and one column, therefore there's one box. You can always add more boxes as long as each <td> tag is given the class of "cssrollover" so that it can be triggered.

I used different options to make sure the opacity change would show up on most browsers, though I've only tested this on IE and FF because I don't have access to other browsers. If anyone can clarify this, I would be grateful.

Before I do the CSS, let me explain how to use the filters properly. The things in bold you do not change.

filter:alpha(opacity=value);
This one's easy, the "value" is basically the opacity percentage. 0 would be invisible, while 100 would be showing it completely. That means if you used a value of 50, it would be half transparent.

-moz-opacity:value;
opacity:value;
-khtml-opacity:value;
These three work a little differently. The "value" works as a decimal. Once again, a value of 0 would make it invisble. But this time, a value of 1 will make it 100% visible. To make it half-visible, use the value 0.5. It's basically like taking the percentage, and then converting it into its equal decimal form. (ex: 23% would be 0.23)

The CSS would go something like:

.cssrollover a img {
	filter:alpha(opacity=100); 
	-moz-opacity:1; 
	opacity:1; 
	-khtml-opacity:1;
}
.cssrollover a:hover img {
	filter:alpha(opacity=0); 
	-moz-opacity:0; 
	opacity:0; 
	-khtml-opacity:0;
}

This code basically says:

If the image isn't being hovered on, it is 100% visible.
If the image is being hovered on, it is 0% visible.

So some of you might still be asking how this works as a rollover. Well, if "yourimage.gif" is invisible, it exposes "yourbackground.gif" which is the rollover-image.

Now now, I know you can easily replace this with a "display:none;" (Though you'd have to set width and heighth values in your table first) or "visibility:hidden", and you are more than able to. It should work exactly the same. The reason I used opacity filters is to show that you can also make the image half-visible if you want to add a graphical effect. If you'd rather go on the display or visibilty route (I prefer visibility because even if the image is invisible, it is still loaded into your browser, unlike the display tag), then use this:

.cssrollover a img {
	visibility:visible;
}
.cssrollover a:hover img {
	visibility:hidden;
}

A lot less work huh?

 

[kevind23]

Protip

Hi guys! I'm just popping in...I'm a web designer with a fairly good knowledge of CSS2, XHTML, and JavaScript. Here are some tips I've picked up over the years:

• Use CSS. It's that simple. CSS is the new standard in design, and with modern browsers supporting CSS2, you can accomplish almost anything you want as far as design goes, and the pseduo classes (warning: IE does not like these!) can generally accomplish most things that people use to have to use JavaScript for.
  
  
• Learn modern standards. One of the things that bugs me the most about newbies to the field of web design is that they are learning from outdated online resources--instead of learning XHTML, they are learning HTML4, and with that, comes tags that now can be completely replaced with CSS. XHTML and CSS are the way of the future--it's very simple. Your page should look like a big mess of <div>'s (and possibly <table>'s, although you should try to avoid these unless your design is complicated enough to need them). Give each of your <div>'s one id tag and potentially a class name, then put all your styling in an external CSS file. This makes your pages neater, it reduces the amount of time you have to spend styling them (you can group things with CSS; I'm not going to teach beginners how to use it, but you should be able to figure these things out on your own), and as an added bonus, web browsers cache external CSS files, so you have less code in your HTML and your CSS is cached--reducing your server load and speeding up page load times for your users.
  
  
• Don't use JavaScript unless you have to. CSS2 can take care of most beginner's JavaScript needs, and much more elegantly too. However, if you do need to script some things, I recommend using a library like jQuery.
  
  
• Don't use inline CSS, use CSS classes. Define your bolded text in your external CSS file as .bold { font-weight: bold; }, or something similar, then when you want something bolded, use class="bold".
  
  
• XHTML. It's the proper way to code. You can learn all about it here, including its differences from HTML4 and its benefits.
  
  
• Get comfortable with a server-side scripting language. While this is unrelated to web design in general, your websites simply won't be of much use if you're using only static HTML. Pick a server-side language that looks good for your needs and learn its inner-workings, especially using OOP (object-oriented-programming) standards. While I personally recommend ASP.net, it can only run on one type of server (Windows; they are usually more expensive, as well), and has a steep learning curve for those who are not familiar with OOP, or one of the .NET scripting languages (VB, C#, C++, and more). A better option for you might be PHP. While I personally hate it, PHP is widley-supported, is open-source, and allows for some OOP if you know how to work your way around it.
  
  
• Misc. Tips:
  
  
  

  • Center-aligning block elements. This is a major problem for a lot of beginning web designers, as CSS's text-align only aligns elements like <span> and <img>. If you want to align a block element (<p>, <div>, <table>, etc) simply put
    

    div { margin: 0 auto; }

    in your CSS. This is supported by IE7 and all standards-compliant browsers (the good ones; Firefox/Netscape/Rip-offs (Flock), Opera, Safari, etc). For IE6, you'll have to use a hack to get it to work.
  • Using IE-Friendly code. Internet Explorer is the worst browser ever invented. It's a complete abomination and a serious pain in the *** to anyone who follows modern standards when they are coding. Luckily, Microsoft gave us something that will let you put IE-specific code in your pages:
    

    <!--[if IE]>
    Special instructions for IE.
    <![endif]-->

    
    You can also use something like:
    

    <!--[if IE lte 6]>
    Special instructions for IE 6 and lower.
    <![endif]-->
    
    Note that:
    lte is <=
    lt is <
    gt is >
    gte is >=

    
    So, for that aforementioned IE-align hack, you would simply use
    

    <!--[if IE lte 6]><center><![endif]-->
    <div style="text-align:right;">Some text that won't be centered, but the div itself will</div>
    <!--[if IE lte 6]></center><![endif]-->

Possibly more later. Depends on my mood, and the community response to my tips.

 

[shadow shaymin]

Confused!

#hoverlinks {
position:relative;
padding-top:31px;
}

#hoverlinks a img {
height:0;
width:0;
}

#hoverlinks a:hover img {
height:31px;
width:88px;
position:absolute;
top:0;
left:0;
}

#hoverlinks a {
display:block;
}

#hoverlinks li {
display:inline;
}

I hope this isn't spamming.

I don't understand how to use any of these! I am fairly new to this, but still, how do I make them work???

 

[blueparukia]

IN your HTML file, between the <head> and </head> tags put:

<style type="text/css">
<!--CSS goes here -->
</style>

It is better to do external stylesheets, but I can't be bothered to explain that

BP

 

[Crepuscular]

I'll pick up where blueparukia left off, then, with external stylesheets, because they are better, for the simple reason you don't have to edit every page should you want to edit your style.

Create a file named anything.css

Then, put any of the CSS code within the file you just created.

Finally, in the <head> of all the pages you want this style displayed in, put

<link rel="stylesheet" type="text/css" href="anything.css" />

Make sure anything.css is in the same directory as the files you want to display the style in.

 

[Disgruntled Goat]

The best tip I would give is to always use the XHTML STRICT DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Put that at the beginning of every HTML file, and all browsers will display things the same (mostly anyway; IE has a few bugs).

kevind23 has some good tips. One thing I'd add to that is that you should always use the correct HTML tags. For example, I've seen people use stuff like:

<span class="heading">title</span>

but there are special tags for headings: h1, h2, h3 ...etc. Use these then you can style them how you like, eg with this CSS:

h1 {
font-size: 16pt;
color: lightblue;
text-align: center;
}

^that makes it 16pt font size, light blue in colour and centered. It's also bold by default.

And to add to what Crepuscular said, the best way to link to external files is to use absolute links, rather than relative links, eg:

<link rel="stylesheet" type="text/css" href="/anything.css" />

Only slightly different, but if you look closely you'll see there is a slash at the front of anything.css. This says to look in the root of the site, eg domain.com/anything.css. If you move the HTML file to a different folder you don't lose the link (but you will if you move the CSS file, of course). You can also have folders in there so you can do something like:

<img src="/images/pic.gif" />

which looks in the images folder for pic.gif

 

[blueparukia]

The best tip I would give is to always use the XHTML STRICT DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Meh, it is not always possible to use it for cetain situations, such as when CSS centering doesn't work, and you need to use <center> tags, or throw <br /> between a div, if you don't like padding for some reason. Generally I start with an xHTML Transitional DOCTYPE, and then validate it. If it validates, I'll make it Strict, and clean it up a bit so it validates as strict too.

However, if you are used to HTML 4, you can always use the HTML 4.01 strict doctype, which still has SHORTTAG yes, and you can use caps etc...
you can make well coded layouts without faux xHTML.

but there are special tags for headings: h1, h2, h3 ...etc. Use these then you can style them how you like with CSS

If you know how to optimize them for search engines thats great. For starters, using a <h2> at the top of your page without any <h1> often doesn't allow spiders to comb your site the best they can. Heading tags should always go in the correct order, and that coupled with a clean, valid page (preferably with a strict doctype), can help spiders index your page much better.

And to add to what Crepuscular said, the best way to link to external files is to use absolute links, rather than relative links, eg:

<link rel="stylesheet" type="text/css"  href="/anything.css" />

Everyone always forgets the bloody media tag. That should look like this:

<link rel="stylesheet" type="text/css"  href="/anything.css" media="screen,projection,handheld />

Means that will not be applied when printing a page or when CSS is off. It is better to use a different print stylesheet for that.

If for some strange reason, you want it to be the same, use media="all", though I don't recommend it.

And it is good practice to name your stylesheets after the media they are shown on, e.g screen.css, print.css.

Formatiing your CSS should never be

selector{property:value}

but

selector
{
property:value;
}

 

[Crepuscular]

Well, it doesn't have to be like that - it's a matter of what the developers find easier to work with and edit. Personally, I format like

selector {
	property:value
}

All of them function, though.

 

[blueparukia]

Yeah, your way is fine too. but for people who do it all on one line, makes it harder to maintain, much uglier etc.
CSS (and HTML for that matter) should be easy to read,

BP

 

[Disgruntled Goat]

Meh, it is not always possible to use it for cetain situations, such as when CSS centering doesn't work, and you need to use <center> tags, or throw <br /> between a div, if you don't like padding for some reason. Generally I start with an xHTML Transitional DOCTYPE, and then validate it. If it validates, I'll make it Strict, and clean it up a bit so it validates as strict too.

Well, your code doesn't have to be 100% valid for a page to display properly, since browsers always try to display something. [The only exception is if the server sends the page with an XML mime-type (too complicated for here, methinks, and virtually no servers do this), in which case, invalid code will just give an error message.]

But you're right, a strict HTML doctype would be better (the XHTML one was the first I came across in my documents which is why I posted that):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

Another tip: some one mentioned using positioning in CSS for layouts - this should never be nesessary, you can accomplish what you want by 'floating' columns ( float: left; ) and setting a width, margins and padding. You should also remember that the width is only the width of the content, not including borders, margins or padding.

 

[blueparukia]

You are right, pages don't have to be valid, but I am a complete semantics freak. If its not valid, it doesn't leave my Recycle Bin. Use the DocType you feel comfortable with.

As for CSS position:absolute/fixed. That is never necessary (with the exception of footers on a fluid layout and drop down menus). Floats are not always necessary needed too, depending on the purposes, you can use display:inline, or play around with margins.

Here is another tip:
Use fluid fonts - by using the em property.

body
{
font: 1.2em #CCC;
}

is an example. Of course, never use fluid fonts on a fixed background, as it will break on larger screens.

Cheers,

BP

 

[COOL_CORGI]

Dragonfree, I tried your method, and it works great! But I'm having a slight problem. While I want the menu links to have that effect, I don't want my other content to have it.
Look here and see: http://zyetendo.com/cssbeta.htm
Most of the code is your's, just edited the colors.

 

[Renneh]

Dragonfree, I tried your method, and it works great! But I'm having a slight problem. While I want the menu links to have that effect, I don't want my other content to have it.
Look here and see: http://zyetendo.com/cssbeta.htm
Most of the code is your's, just edited the colors.

You would need to give it a class, its because your CSS makes all links currently defined as having those properties.


So in your css, give the links (your main navigation) a class by doing this:

a.name:link{
}

And how you want all your other links to be, just do the the link code normally:

a:link{
}

So that in your html:

<a href="whateverlink.htm" class="name">hallo</a>

And only that link will have the different properties you gave to that class.


I'm so rubbish at explaining things so let me know if you didn't understand.

 

[Kataki]

I was wondering, is there a way to make things so that if, say, tag x is within tag y, the font style would be italic and text colour red. I remember seeing something like this a while ago, but I forgot how to do it. I believe it was something like this, but it doesn't work for me:

b > a:link {
font-style: italic;
color: red;
}

So if a link was inside bold tags, it would be italic and red. But if the link wasn't inside bold tags, it would be normal. I think there is a way to do this, as I stated before, but I forget.

 

[Sapphire Milotic]

Make it so that website visitors are unable to highlight text:

<script language="JavaScript1.2">

function disableselect(e){
return false
}

function reEnable(){
return true
}

//if IE4+
document.onselectstart=new Function ("return false")

//if NS6
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>

Displays the viewer's IP address:

<?php
$ip = isset($_SERVER['HTTP_X_FORWARDED_FOR']) ? $_SERVER['HTTP_X_FORWARDED_FOR'] : $_SERVER['REMOTE_ADDR'];
echo 'Your IP is: '.$ip; ?>

 

[Metroid345]

Yeah, your way is fine too. but for people who do it all on one line, makes it harder to maintain, much uglier etc.
CSS (and HTML for that matter) should be easy to read,

BP

Although multi-line CSS does make things easier to read most of the time (and it is what I use), one-line CSS is lighter and you do not have to scroll as much to see the rest of the CSS document. Just pointing that out. There is no "best way" of writing CSS. You should write CSS in the way you are most comfortable and familiar with. And most CSS editing programs can write/format in many ways.

 

[Disgruntled Goat]

Make it so that website visitors are unable to highlight text

Stupid, annoying and easily breakable. Jusst turn off Javascript, view source or even adblock the script.

What about your visitors who want to copy some of your text for legitimate purposes? If you don't want people "stealing" your content, don't put it on the web in the first place. Simple as that.