Css Tips And Tricks


#1

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

   <font color='blue'>

   </font>
   [B]1. Rebuilding a Site With Standards [/B][<font color='blue'>http://www.meyerweb.com/eric/talks/2002/wdw-boston/meyer-rebuilding.html</font>](http://www.meyerweb.com/eric/talks/2002/wdw-boston/meyer-rebuilding.html)

   [B]2. W3C Web Style Sheets CSS tips & tricks [/B][<font color='blue'>http://www.w3.org/Style/Examples/007/</font>](http://www.w3.org/Style/Examples/007/)

   [B]3. (link removed)[/B]

   [B]4. Tableless Layout with CSS HowTo (W3C) [/B][<font color='blue'>http://www.w3.org/2002/03/csslayout-howto.html.en</font>](http://www.w3.org/2002/03/csslayout-howto.html.en) 

   [B]5. How to build a web site without tables [/B][<font color='blue'>http://www.mako4css.com/Tutorial.htm</font>](http://www.mako4css.com/Tutorial.htm)

   [B]6. CSS Quick Reference [/B][<font color='blue'>http://www.devguru.com/Technologies/css/quickref/css_index.html</font>](http://www.devguru.com/Technologies/css/quickref/css_index.html)

7.(link removed)

   [B]8. How to hide CSS from buggy browsers [/B][<font color='blue'>http://w3development.de/css/hide_css_from_browsers/</font>](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] [B]11. CSS Top Menu Combination - [/B]Does not work in Internet Explorer 6.0. It does work in [Mozilla 1.4., [URL="http://www.opera.com/"]Opera 6.0., and [URL="http://www.apple.com/safari/"]Safari 1.0. [URL="http://moronicbajebus.com/playground/cssplay/top-menu/"]http://moronicbajebus.com/playground/cssplay/top-menu/](http://www.mozilla.org/)

   [B]12. Hover Sidebar with CSS - [/B]It is known to work in [<font color='#0000ff'>Mozilla</font> 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/"]<font color='#0000ff'>Opera</font> 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 face='Courier New'><font color='#0000ff'>:hover</font></font> on anything but hyperlinks (<font face='Courier New'>&lt;a&gt;</font>). [URL="http://moronicbajebus.com/playground/cssplay/hover-sidebar/"]<font color='blue'>http://moronicbajebus.com/playground/cssplay/hover-sidebar/</font>](http://www.mozilla.org/)

   [B]13. (Link removed)[/B]

   [B]14. Reformat the tables with CSS - [/B]It works in [<font color='#0000ff'>Mozilla</font> 1.4+ and [URL="http://www.opera.com/"]<font color='#0000ff'>Opera</font> 7.0. It does not work in Windows Internet Explorer 6. [URL="http://moronicbajebus.com/playground/cssplay/reformat-table/"]<font color='blue'>http://moronicbajebus.com/playground/cssplay/reformat-table/</font>](http://www.mozilla.org/)

   [B]15. Image replacement - no span with CSS - [/B]This works great in Windows Internet Explorer 6, [<font color='#0000ff'>Mozilla</font> 1.4+, and [URL="http://www.opera.com/"]<font color='#0000ff'>Opera</font> 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/"]<font color='blue'>http://moronicbajebus.com/playground/cssplay/image-replacement/</font>](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 [<font color='#0000ff'>Mozilla</font> 1.3 does support :target&#8212;[I]those wacky Mozilla people[/I]. [URL="http://moronicbajebus.com/playground/cssplay/markyourjump/"]<font color='blue'>http://moronicbajebus.com/playground/cssplay/markyourjump/</font>](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][<font color='blue'>http://www.tantek.com/CSS/Examples/boxmodelhack.html</font>](http://www.tantek.com/CSS/Examples/boxmodelhack.html)

   [B]20.(link removed)[/B]

   [B]21. CSS-driven tabs[/B] [<font color='blue'>http://www.clagnut.com/writings/csstabs/</font>](http://www.clagnut.com/writings/csstabs/)

   [B]22. CSS: Mix and match Classes [/B][<font color='blue'>http://catcode.com/csstips/classes.html</font>](http://catcode.com/csstips/classes.html)

   [B]23. CSS: Graphic List Bullets [/B][<font color='blue'>http://catcode.com/csstips/graphic_list.html</font>](http://catcode.com/csstips/graphic_list.html)

   [B]24. CSS: Centered Tables [/B][<font color='blue'>http://catcode.com/csstips/center_table.html</font>](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. [<font color='blue'>http://www.mako4css.com/Issues.htm</font>](http://www.mako4css.com/Issues.htm)

   [B]26.(link removed)[/b]
   [B]27. CSS Positioning Properties [/B][<font color='blue'>http://www.miswebdesign.com/resources/articles/css-positioning-properties.html</font>](http://www.miswebdesign.com/resources/articles/css-positioning-properties.html)

   [B]28. CSS Menus - Uberlink CSS Rollovers: [/B][<font color='blue'>http://www.projectseven.com/tutorials/css_menus/list_01/index.htm</font>](http://www.projectseven.com/tutorials/css_menus/list_01/index.htm) 

   [B]29. CSS-TD CSS Table Design: [/B][<font color='blue'>http://www.projectseven.com/tutorials/css_t/index.htm</font>](http://www.projectseven.com/tutorials/css_t/index.htm) 

   <font color='#000000'>[B]<font color='black'>30. </font>[/B]</font>[B](link removed)[/B]

   [B]31. Dynamic @import CSS files using PHP: [/B][<font color='blue'>http://www.1976design.com/blog/archive/2004/02/03/php-dynamic-css/</font>](http://www.1976design.com/blog/archive/2004/02/03/php-dynamic-css/) 

   [B]32. [/B][B]max-width in Internet Explorer: [/B][<font color='blue'>http://www.svendtofte.com/code/max_width_in_ie/</font>](http://www.svendtofte.com/code/max_width_in_ie/)

   <font color='#ff0000'>[I][B]<font color='black'>33.</font> [/B][/I]</font><font color='#000000'>[B]The Basics of Positioning [/B][<font color='blue'>http://www.communitymx.com/content/article.cfm?cid=3B56F</font>](http://www.communitymx.com/content/article.cfm?cid=3B56F)</font><font color='#ff0000'>

   [B]<font color='black'>34.</font> [/B]</font>[B]Creating radically different list options [/B][U]<font color='blue'>http://css.maxdesign.com.au/listamatic/</font>[/U]<font color='blue'>
   </font>
   [B]<font color='#003366'><font color='black'>35. (link removed)</font></font>[/B]<font color='blue'>


   </font><font color='#003366'>-------</font>

   [I]<font size='3'>[B]<font color='blue'>Tools and Utilities</font> <font color='red'><font size='2'>(please report broken links)</font></font>[/B]</font>[/I]<font size='3'><font color='red'>
   </font>
   </font>[B]1. Build tableless (with CSS) pages with this free online tool: [/B][<font color='blue'>http://www.fu2k.org/alex/css/layouts/3Col_OrderedAbsolute.mhtml</font>](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][<font color='blue'>http://www.hisoftware.com/access/valueadd9.html</font>](http://www.hisoftware.com/access/valueadd9.html)

   [B]4. Style Master - CSS Web Page layout Editor[/B][B] for Windows and Macintosh:[/B] [<font color='blue'>http://www.westciv.com/style_master/</font>](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


#7

wow! I always did want to find out how they did that! thanks for the info 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