Css Tips And Tricks

HTML & CSS
1

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

   [COLOR=blue]
   
   [/COLOR]
   [B]1. Rebuilding a Site With Standards [/B][[COLOR=blue]http://www.meyerweb.com/eric/talks/2002/wdw-boston/meyer-rebuilding.html[/COLOR]](http://www.meyerweb.com/eric/talks/2002/wdw-boston/meyer-rebuilding.html)
    
   [B]2. W3C Web Style Sheets CSS tips & tricks [/B][[COLOR=blue]http://www.w3.org/Style/Examples/007/[/COLOR]](http://www.w3.org/Style/Examples/007/)
    
   [B]3. (link removed)[/B]
    
   [B]4. Tableless Layout with CSS HowTo (W3C) [/B][[COLOR=blue]http://www.w3.org/2002/03/csslayout-howto.html.en[/COLOR]](http://www.w3.org/2002/03/csslayout-howto.html.en) 
    
   [B]5. How to build a web site without tables [/B][[COLOR=blue]http://www.mako4css.com/Tutorial.htm[/COLOR]](http://www.mako4css.com/Tutorial.htm)
    
   [B]6. CSS Quick Reference [/B][[COLOR=blue]http://www.devguru.com/Technologies/css/quickref/css_index.html[/COLOR]](http://www.devguru.com/Technologies/css/quickref/css_index.html)

7.(link removed)

   [B]8. How to hide CSS from buggy browsers [/B][[COLOR=blue]http://w3development.de/css/hide_css_from_browsers/[/COLOR]](http://w3development.de/css/hide_css_from_browsers/) 
    
   [B]9. (link removed)[/B]
    
   [B]10. External link icons the CSS way: [/B][B]http://www.kryogenix.org/days/2002/08/30/external

[/B] 11. CSS Top Menu Combination - Does not work in Internet Explorer 6.0. It does work in [COLOR=#0000ff]Mozilla[/COLOR] 1.4., [URL=“http://www.opera.com/”][COLOR=#0000ff]Opera[/COLOR] 6.0., and [URL=“http://www.apple.com/safari/”][COLOR=#0000ff]Safari[/COLOR] 1.0. [URL=“http://moronicbajebus.com/playground/cssplay/top-menu/”][COLOR=blue]http://moronicbajebus.com/playground/cssplay/top-menu/[/COLOR]

   [B]12. Hover Sidebar with CSS - [/B]It is known to work in [[COLOR=#0000ff]Mozilla[/COLOR] 1.3b or later (though in Mozilla 1.4a it was buggy but then was fixed) and it also works in [URL="http://www.opera.com/"][COLOR=#0000ff]Opera[/COLOR] 7.0. But alas, it does not work in Internet Explorer 6.0 because Internet Explorer does not support [URL="http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes"][FONT=Courier New][COLOR=#0000ff]:hover[/COLOR][/FONT] on anything but hyperlinks ([FONT=Courier New]<a>[/FONT]). [URL="http://moronicbajebus.com/playground/cssplay/hover-sidebar/"][COLOR=blue]http://moronicbajebus.com/playground/cssplay/hover-sidebar/[/COLOR]](http://www.mozilla.org/)
    
   [B]13. (Link removed)[/B]
    
   [B]14. Reformat the tables with CSS - [/B]It works in [[COLOR=#0000ff]Mozilla[/COLOR] 1.4+ and [URL="http://www.opera.com/"][COLOR=#0000ff]Opera[/COLOR] 7.0. It does not work in Windows Internet Explorer 6. [URL="http://moronicbajebus.com/playground/cssplay/reformat-table/"][COLOR=blue]http://moronicbajebus.com/playground/cssplay/reformat-table/[/COLOR]](http://www.mozilla.org/)
    
   [B]15. Image replacement - no span with CSS - [/B]This works great in Windows Internet Explorer 6, [[COLOR=#0000ff]Mozilla[/COLOR] 1.4+, and [URL="http://www.opera.com/"][COLOR=#0000ff]Opera[/COLOR] 6+; but in Windows Internet Explorer 5 nothing shows up. This can easily be solved, note of problem and solution courtesy... [URL="http://moronicbajebus.com/playground/cssplay/image-replacement/"][COLOR=blue]http://moronicbajebus.com/playground/cssplay/image-replacement/[/COLOR]](http://www.mozilla.org/)
    
   [B]16. Mark you jump - [/B]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 [[COLOR=#0000ff]Mozilla[/COLOR] 1.3 does support :target—[I]those wacky Mozilla people[/I]. [URL="http://moronicbajebus.com/playground/cssplay/markyourjump/"][COLOR=blue]http://moronicbajebus.com/playground/cssplay/markyourjump/[/COLOR]](http://www.mozilla.org/)
    
   [B]17. Horizontal centerd Menu using CSS [/B]http://www.pmob.co.uk/pob/centred-float.htm
    
   [B]18. (link removed)[/B]
    
   [B]19. Box Model Hack [/B][[COLOR=blue]http://www.tantek.com/CSS/Examples/boxmodelhack.html[/COLOR]](http://www.tantek.com/CSS/Examples/boxmodelhack.html)
    
   [B]20.(link removed)[/B]
    
   [B]21. CSS-driven tabs[/B] [[COLOR=blue]http://www.clagnut.com/writings/csstabs/[/COLOR]](http://www.clagnut.com/writings/csstabs/)
    
   [B]22. CSS: Mix and match Classes [/B][[COLOR=blue]http://catcode.com/csstips/classes.html[/COLOR]](http://catcode.com/csstips/classes.html)
    
   [B]23. CSS: Graphic List Bullets [/B][[COLOR=blue]http://catcode.com/csstips/graphic_list.html[/COLOR]](http://catcode.com/csstips/graphic_list.html)
    
   [B]24. CSS: Centered Tables [/B][[COLOR=blue]http://catcode.com/csstips/center_table.html[/COLOR]](http://catcode.com/csstips/center_table.html)
    
   [B]25. CSS and Netscape 4.xx Issues - [/B]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. [[COLOR=blue]http://www.mako4css.com/Issues.htm[/COLOR]](http://www.mako4css.com/Issues.htm)
    
   [B]26.(link removed)[/b]
   [B]27. CSS Positioning Properties [/B][[COLOR=blue]http://www.miswebdesign.com/resources/articles/css-positioning-properties.html[/COLOR]](http://www.miswebdesign.com/resources/articles/css-positioning-properties.html)
    
   [B]28. CSS Menus - Uberlink CSS Rollovers: [/B][[COLOR=blue]http://www.projectseven.com/tutorials/css_menus/list_01/index.htm[/COLOR]](http://www.projectseven.com/tutorials/css_menus/list_01/index.htm) 
    
   [B]29. CSS-TD CSS Table Design: [/B][[COLOR=blue]http://www.projectseven.com/tutorials/css_t/index.htm[/COLOR]](http://www.projectseven.com/tutorials/css_t/index.htm) 
    
   [COLOR=#000000][B][COLOR=black]30. [/COLOR][/B][/COLOR][B](link removed)[/B]
    
   [B]31. Dynamic @import CSS files using PHP: [/B][[COLOR=blue]http://www.1976design.com/blog/archive/2004/02/03/php-dynamic-css/[/COLOR]](http://www.1976design.com/blog/archive/2004/02/03/php-dynamic-css/) 
    
   [B]32. [/B][B]max-width in Internet Explorer: [/B][[COLOR=blue]http://www.svendtofte.com/code/max_width_in_ie/[/COLOR]](http://www.svendtofte.com/code/max_width_in_ie/)
  
   [COLOR=#ff0000][I][B][COLOR=black]33.[/COLOR] [/B][/I][/COLOR][COLOR=#000000][B]The Basics of Positioning [/B][[COLOR=blue]http://www.communitymx.com/content/article.cfm?cid=3B56F[/COLOR]](http://www.communitymx.com/content/article.cfm?cid=3B56F)[/COLOR][COLOR=#ff0000]
   
   [B][COLOR=black]34.[/COLOR] [/B][/COLOR][B]Creating radically different list options [/B][U][COLOR=blue]http://css.maxdesign.com.au/listamatic/[/COLOR][/U][COLOR=blue]
   [/COLOR]
   [B][COLOR=#003366][COLOR=black]35. (link removed)[/COLOR][/COLOR][/B][COLOR=blue]
   
   
   [/COLOR][COLOR=#003366]-------[/COLOR]
    
   [I][SIZE=3][B][COLOR=blue]Tools and Utilities[/COLOR] [COLOR=red][SIZE=2](please report broken links)[/SIZE][/COLOR][/B][/SIZE][/I][SIZE=3][COLOR=red]
   [/COLOR]
   [/SIZE][B]1. Build tableless (with CSS) pages with this free online tool: [/B][[COLOR=blue]http://www.fu2k.org/alex/css/layouts/3Col_OrderedAbsolute.mhtml[/COLOR]](http://www.fu2k.org/alex/css/layouts/3Col_OrderedAbsolute.mhtml)
    
   [B]2. (Link removed) [/B]
    
   [B]3. FREE Accessible Forms Creator Desktop Software (for building forms with CSS or tables): [/B][[COLOR=blue]http://www.hisoftware.com/access/valueadd9.html[/COLOR]](http://www.hisoftware.com/access/valueadd9.html)
    
   [B]4. Style Master - CSS Web Page layout Editor[/B][B] for Windows and Macintosh:[/B] [[COLOR=blue]http://www.westciv.com/style_master/[/COLOR]](http://www.westciv.com/style_master/)
   
   [B]5. (link removed)[/B]
2

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!

3

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…[/edit]

4

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/tests/css2/sec05-11-03.htm

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

http://www.designdetector.com/articles/CSS2TestSuiteFailures.php

5

Bookmarked for further review and refference. thanks a lot.

6

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

Thanks!

Sojan

1 Like
7

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

8

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/showpost.php?p=1010592&postcount=8

9

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

Rik

10

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.

11

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/

12

http://cssvault.com

13

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 :smiley:

14

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

15

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

16

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

17

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 :aparty:

18

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

19

Another resource:CSS2 Tutorial

20

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