Css Tips And Tricks

[Webnauts]

CSS Resources, Tutorials, Tips and Tricks (please report broken links)







1. Rebuilding a Site With Standards http://www.meyerweb.com/eric/talks/2002/wdw-boston/meyer-rebuilding.html

2. W3C Web Style Sheets CSS tips & tricks http://www.w3.org/Style/Examples/007/

3. (link removed)

4. Tableless Layout with CSS HowTo (W3C) http://www.w3.org/2002/03/csslayout-howto.html.en

5. How to build a web site without tables http://www.mako4css.com/Tutorial.htm

6. CSS Quick Reference http://www.devguru.com/Technologies/css/quickref/css_index.html

7.(link removed)

8. How to hide CSS from buggy browsers http://w3development.de/css/hide_css_from_browsers/

9. (link removed)

10. External link icons the CSS way: http://www.kryogenix.org/days/2002/08/30/external

11. CSS Top Menu Combination - Does not work in Internet Explorer 6.0. It does work in Mozilla 1.4., Opera 6.0., and Safari 1.0. http://moronicbajebus.com/playground/cssplay/top-menu/

12. Hover Sidebar with CSS - It is known to work in Mozilla 1.3b or later (though in Mozilla 1.4a it was buggy but then was fixed) and it also works in Opera 7.0. But alas, it does not work in Internet Explorer 6.0 because Internet Explorer does not support :hover on anything but hyperlinks (<a>). http://moronicbajebus.com/playground/cssplay/hover-sidebar/

13. (Link removed)

14. Reformat the tables with CSS - It works in Mozilla 1.4+ and Opera 7.0. It does not work in Windows Internet Explorer 6. http://moronicbajebus.com/playground/cssplay/reformat-table/

15. Image replacement - no span with CSS - This works great in Windows Internet Explorer 6, Mozilla 1.4+, and Opera 6+; but in Windows Internet Explorer 5 nothing shows up. This can easily be solved, note of problem and solution courtesy... http://moronicbajebus.com/playground/cssplay/image-replacement/

16. Mark you jump - You need a browser that supports CSS3. This is where the time traveling comes in because as of today (2003/2/June) CSS3 is still in the draft stage; but you are in for some luck Mozilla 1.3 does support :target—those wacky Mozilla people. http://moronicbajebus.com/playground/cssplay/markyourjump/

17. Horizontal centerd Menu using CSS http://www.pmob.co.uk/pob/centred-float.htm

18. (link removed)

19. Box Model Hack http://www.tantek.com/CSS/Examples/boxmodelhack.html

20.(link removed)

21. CSS-driven tabs http://www.clagnut.com/writings/csstabs/

22. CSS: Mix and match Classes http://catcode.com/csstips/classes.html

23. CSS: Graphic List Bullets http://catcode.com/csstips/graphic_list.html

24. CSS: Centered Tables http://catcode.com/csstips/center_table.html

25. CSS and Netscape 4.xx Issues - The market share of browsers that do not support any CSS is now below 0.5%. Therefore web developers have more freedom to actually separate content (HTML) and presentation (CSS).
The biggest challenges that web developers face when implementing CSS is backwards compatibility and browser support. http://www.mako4css.com/Issues.htm

26.(link removed)
27. CSS Positioning Properties http://www.miswebdesign.com/resources/articles/css-positioning-properties.html

28. CSS Menus - Uberlink CSS Rollovers: http://www.projectseven.com/tutorials/css_menus/list_01/index.htm

29. CSS-TD CSS Table Design: http://www.projectseven.com/tutorials/css_t/index.htm

30. (link removed)

31. Dynamic @import CSS files using PHP: http://www.1976design.com/blog/archive/2004/02/03/php-dynamic-css/

32. max-width in Internet Explorer: http://www.svendtofte.com/code/max_width_in_ie/

33. The Basics of Positioning http://www.communitymx.com/content/article.cfm?cid=3B56F

34. Creating radically different list options http://css.maxdesign.com.au/listamatic/

35. (link removed)


-------

Tools and Utilities (please report broken links)

1. Build tableless (with CSS) pages with this free online tool: http://www.fu2k.org/alex/css/layouts/3Col_OrderedAbsolute.mhtml

2. (Link removed)

3. FREE Accessible Forms Creator Desktop Software (for building forms with CSS or tables): http://www.hisoftware.com/access/valueadd9.html

4. Style Master - CSS Web Page layout Editor for Windows and Macintosh: http://www.westciv.com/style_master/

5. (link removed)

[Webnauts]

Found at http://www.bravenet.com

Table Magic

Here is a way to make entire table cells change on mouseover and mouseout.

First, let's create some global definitions for our tables, so here is a style sheet that defines the text color and background color for each cell.

<style>
td
{
font-family: verdana,arial,sans-serif;
font-size:12pt;
font-weight:bold;
background-color: C9C9C9;
}
</style>

Now, within the table itself, we can define the mouse activity like this:

<TABLE bgcolor="#cc0000" cellpadding="1" cellspacing="1" border="0">
<TR>
<TD width="100" onmouseover="this.style.backgroundColor='#FFFF00';"
onmouseout="this.style.backgroundColor='#C9C9C9'">
<a href="http://www.bravenet.com"><FONT
COLOR="#000000">Bravenet.com</FONT></a>
</TD>
</TR>
<TR>
<TD width="100" onmouseover="this.style.backgroundColor='#FFFF00';"
onmouseout="this.style.backgroundColor='#C9C9C9'">
<a href="http://www.freeguestbooks.com"><FONT
COLOR="#000000">FreeGuestbooks.com</FONT></a>
</TD>
</TR>
</TABLE>

Note that we have coded the onmouseout value to the original background color (C9C9C9) that we scripted in the stylesheet. This of course could be different, but what this does is set a bgcolor value, change it on mouse hover, then return to our original color. Note also we set a background color for the table (CC0000), which, because we are defining the cell color, acts as a dark red border around our cell. As always, play around with these parameters to get the effect which best suits your site. You can also combine this with the Rollover styles shown in the first section of this newsletter for some really wacky and fun color changes!

[DougBTX]

Table Magic

Here's a CSS version:

td, table { border: 0; }

td {
	font-family: verdana,arial,sans-serif;
	font-size:12pt;
	font-weight:bold;
	background-color: #C9C9C9;
	padding: 0;
}

table {
	width: 200px;
	background-color: #cc0000;
}

td a {
	display: block;
	padding: 1px;
	color: black;
	background-color: #C9C9C9;
}

td a:hover {
	background-color: #FFFF00;
}

<table cellspacing="1">
<tr>
<td><a href="http://www.bravenet.com">Bravenet.com</a></td>
</tr>
<tr>
<td><a href="http://www.freeguestbooks.com">FreeGuestbooks.com</a></td>
</tr>
</table>

And a tableless one:

#menu {
	width: 200px;
	border: 1px solid #cc0000;
	border-bottom: 0;
	
	list-style: none;
	padding: 0;
	margin: 0;

	font-family: verdana,arial,sans-serif;
	font-size:12pt;
	font-weight:bold;
}

#menu li {
	padding: 0;
	margin: 0;
	border-bottom: 1px solid #cc0000;
}

#menu a {
	display: block;
	width: 100%;
	text-indent: 1px;
	padding: 1px 0; 
	color: black;
	background-color: #C9C9C9;
}

#menu a:hover {
	background-color: #FFFF00;
}

<ul id="menu">
  <li><a href="http://www.bravenet.com">Bravenet.com</a></li>
  <li><a href="http://www.freeguestbooks.com">FreeGuestbooks.com</a></li>
</ul>

Later,
Douglas

Edit:

BTW, if you were coding to standards, not browsers, then all you would need is this:

li:hover { background-color: #FFFF00; }

It only works in Mozilla/Opera though....

[Chris Hester]

Firstly, the "Hover Sidebar with CSS" link is not working. Secondly, Opera 7.2 has a new issue with hover - it no longer works on paragraphs and forms. See this page as an example:

http://www.meyerweb.com/eric/css/tes...ec05-11-03.htm

To see a full list of CSS2 that Opera 7.2 can handle view my article:

http://www.designdetector.com/articl...teFailures.php

[Jixxy]

Bookmarked for further review and refference. thanks a lot.

[Sojan80]

Wow! Now that's a handy list of resources! What a morning! This is definitely going into my favorites files!

Thanks!

Sojan

CSS Resources, Tutorials, Tips and Tricks (please report broken links)

1. Rebuilding a Site With Standards http://www.meyerweb.com/eric/talks/2002/wdw-boston/meyer-rebuilding.html

2. The University of Arizona - Cascading Style Sheets http://uaweb.arizona.edu/resources/tutorial/css/index.shtml - NEW!

3. W3C Web Style Sheets CSS tips & tricks http://www.w3.org/Style/Examples/007/

4. Tables or CSS? Choosing a layout http://www.saila.com/usage/layouts/cssvtables.shtml

5. Tableless Layout with CSS HowTo (W3C) http://www.w3.org/2002/03/csslayout-howto.html.en

6. How to build a web site without tables http://www.mako4css.com/Tutorial.htm

7. CSS Quick Reference http://www.devguru.com/Technologies/css/quickref/css_index.html

8. Real World Table Free Site Development http://www.womendesignersgroup.com/articlerachel.shtml

9. CSS Bugs and Workarounds http://css.nu/pointers/bugs.html

10. How to hide CSS from buggy browsers http://w3development.de/css/hide_css_from_browsers/

11. Hiding CSS form Netscape 4+ http://www.v2studio.com/k/css/n4hide/

12. External link icons the CSS way: http://www.kryogenix.org/days/173.html

13. CSS Top Menu Combination - Does not work in Internet Explorer 6.0. It does work in Mozilla 1.4., Opera 6.0., and Safari 1.0. http://moronicbajebus.com/playground/cssplay/top-menu/

14. Hover Sidebar with CSS - It is known to work in Mozilla 1.3b or later (though in Mozilla 1.4a it was buggy but then was fixed) and it also works in Opera 7.0. But alas, it does not work in Internet Explorer 6.0 because Internet Explorer does not support :hover on anything but hyperlinks (<a>). http://moronicbajebus.com/playground/cssplay/hover-sidebar/

15. Erlarger Button Menu with CSS - Overlapping the other elements: http://moronicbajebus.com/playground/cssplay/enlarger-button-menu/ This does not work in Internet Explorer.

16. Reformat the tables with CSS - It works in Mozilla 1.4+ and Opera 7.0. It does not work in Windows Internet Explorer 6. http://moronicbajebus.com/playground/cssplay/reformat-table/

17. Image replacement - no span with CSS - This works great in Windows Internet Explorer 6, Mozilla 1.4+, and Opera 6+; but in Windows Internet Explorer 5 nothing shows up. This can easily be solved, note of problem and solution courtesy... http://moronicbajebus.com/playground/cssplay/image-replacement/

18. Mark you jump - You need a browser that supports CSS3. This is where the time traveling comes in because as of today (2003/2/June) CSS3 is still in the draft stage; but you are in for some luck Mozilla 1.3 does support :target—those wacky Mozilla people. http://moronicbajebus.com/playground/cssplay/markyourjump/

19. Horizontal Menu using CSS http://moronicbajebus.com/playground/cssplay/hormenu/

20. Add banner positioning with CSS http://www.peterbailey.net/test/banner.htm

21. Box Model Hack http://www.tantek.com/CSS/Examples/boxmodelhack.html

22. (link removed)

23. Use CSS to Color Your Forms http://www.edevcafe.com/viewdoc.php?id=6

24. CSS-driven tabs http://www.clagnut.com/writings/csstabs/

25. CSS: Mix and match Classes http://catcode.com/csstips/classes.html

26. CSS: Graphic List Bullets http://catcode.com/csstips/graphic_list.html

27. CSS: Centered Tables http://catcode.com/csstips/center_table.html

28. CSS and Netscape 4.xx Issues - The market share of browsers that do not support any CSS is now below 0.5&#37;. Therefore web developers have more freedom to actually separate content (HTML) and presentation (CSS).
The biggest challenges that web developers face when implementing CSS is backwards compatibility and browser support. http://www.mako4css.com/Issues.htm

29. Mark external links on your site (and others!) http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=60&format=html#6

30. CSS Positioning Properties http://www.miswebdesign.com/resources/articles/css-positioning-properties.html

-------

Tools and Utilities (please report broken links)

1. Build tableless (with CSS) pages with this free online tool: http://www.fu2k.org/alex/css/layouts/3Col_OrderedAbsolute.mhtml

2. User Style Sheet Wizzard http://www.techdis.ac.uk/seven/wizards/user-style.html

3. FREE Accessible Forms Creator Desktop Software (for building forms with CSS or tables): http://www.hisoftware.com/access/valueadd9.html

4. Style Master - CSS Web Page layout Editor for Windows and Macintosh: http://www.westciv.com/style_master/

[hpnadig]

Found at http://www.bravenet.com.....

wow! I always did want to find out how they did that! thanks for the info

[Arkkimaagi]

I figured out a way to produce 100% high header-content-footer pages, and if the content is higher than viewable area, footer is still at the bottom:

http://www.sitepointforums.com/showp...92&postcount=8

[Zoef]

this is a great list of CSS tip's: mezzoblue's css crib sheet

Rik

[caseyswenson]

I noticed that on IE 6 on windows using the horizontal menu at: http://moronicbajebus.com/playground/cssplay/hormenu/ that when you mouse over them, it seems to refresh the area...if this is inside of other div's etc it seems to cause the whole page to flash like it is redrawing...is there anyway to get around this as I'm trying to not use div:hover so our IE friends can see it.

[[m]]

http://css.maxdesign.com.au/listamatic/
http://css.maxdesign.com.au/listamatic2/

http://css.maxdesign.com.au/listutorial/
http://css.maxdesign.com.au/floatutorial/
http://css.maxdesign.com.au/selectutorial/

[Scrivs]

http://cssvault.com

[polvero]

I am so surprised my favorite editor did not get in here:

Top Style Lite
The CSS editor that does exactly what you want.
Download Top Style Lite

[junjun]

CSS Shorthands - to optimize your CSS even further.
Scrollable area using CSS - because frames and iframes are lame

[mikestrand]

http://www.cssfill.com - Free CSS based layouts and templates.

[Ultimater]

Can't forget the good o' css validator: http://jigsaw.w3.org/css-validator/

[bjcffnet]

If you really want to mess around with IE (Only tested on v6), try something like this:

<html>
 <head>
  <title>Hmmmm . . .</title>
  <style type="text/css">
   body, html {
    /* Be nice to firefox, netscape, mozilla, opera, etc */
    background-color: white;
    color: black;
    /* IE is teh sux0rs */
    background-color="yellow";
    color="purple";
   }
   /* IE only */
   #ie {
    display: none;
    /* IE displays it, all good browsers don't */
    display="block";
   }
   #good {
    /* Display it, for good measure */
    display: block;
    /* IE . . . */
    display="none";
   }
  </style>
 </head>
 <body>
  <div id="ie">
   You're using IE! How dare you!
  </div>
  <div id="good">
   Hey, what's up!!! You're so cool, cuz you don't use IE
  </div>
 </body>
</html>

IE shows yellow with purple text, all other browsers (netscape, mozilla, opera, firefox, etc) show the good stuff. Oh, the possibilities . . .

And I know you could just use body>div, but showing how bad IE is is more fun

[all4nerds]

Heres another good resource:

CSS Filters
http://www.dithered.com/css_filters/css_only

filters? hacks !

http://www.quirksmode.org/css/csshacks.html

even the most famous hack the box model is man made ?, and is sending many in the wrong direction

[carlsson]

Another resource:CSS2 Tutorial

[codepoet]

Back to basics: CSS is not only about technical solutions, it is also about embracing a newer, more flexible approach to web design:

CSS is not hard to learn - if you recognise it for what it is

[Qbikaris]

CSS PLaY - http://www.cssplay.co.uk/

great site, with loads of demos, shows you how much you can actually do with css (create games for example)

[aaron.martone]

Ok this is a Tips and TRICKS thread, right?

Here's a fun trick to play on other web developers, if you get the chance. Open up their CSS file and add

b,strong { font-weight: normal; font-style: italic; }
i,em { font-weight: bold; font-style: normal; }
u { text-decoration: none; border-top: 1px solid blue; }

Tons of fun.

[vgarcia]

Ok this is a Tips and TRICKS thread, right?

Here's a fun trick to play on other web developers, if you get the chance. Open up their CSS file and add

b,strong { font-weight: normal; font-style: italic; }
i,em { font-weight: bold; font-style: normal; }
u { text-decoration: none; border-top: 1px solid blue; }

Tons of fun.

u {text-decoration: overline;}

we don't need no stinking borders

[beejereeno]

Thanks for the list of resources, webnauts.

I'm an old skool slicer / dicer designer and need to get started in developing more sites using CSS rather than tables and mostly graphics....so's I can catch up with the rest of my colleagues in this industry

I think I'm afraid to get started but I will dig through these.

Much appreciated

[Paul O'B]

Didn't find a good resource for emulated frames using CSS

Here's some :

http://www.pmob.co.uk/temp/fixedlayoutexample5.htm
http://www.pmob.co.uk/temp/fixedleft-header.htm
http://www.pmob.co.uk/temp/fixedlheader-footer-left.htm

http://www.webpelican.com/blog/examp...es-example.htm
http://tagsoup.com/-dev/null-/css/fixed/
http://www.cssplay.co.uk/layouts/fixed.html