SitePoint Sponsor

User Tag List

Page 1 of 5 12345 LastLast
Results 1 to 25 of 101
  1. #1
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Css Tips And Tricks

    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)
    Last edited by Paul O'B; Feb 24, 2012 at 06:25. Reason: another broken link removed

  2. #2
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Webnauts
    Table Magic
    Here's a CSS version:

    Code:
    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;
    }
    HTML Code:
    <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:

    Code:
    #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;
    }
    HTML Code:
    <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:

    Code:
    li:hover { background-color: #FFFF00; }
    It only works in Mozilla/Opera though....
    Last edited by DougBTX; Sep 13, 2003 at 06:29.
    Hello World

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2001
    Location
    UK
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    SitePoint Zealot
    Join Date
    May 2003
    Location
    Canada
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bookmarked for further review and refference. thanks a lot.

  6. #6
    SitePoint Addict Sojan80's Avatar
    Join Date
    May 2002
    Location
    Central WI, US
    Posts
    262
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow! Now that's a handy list of resources! What a morning! This is definitely going into my favorites files!

    Thanks!

    Sojan

    Quote Originally Posted by 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. 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/
    Last edited by Paul O'B; Sep 11, 2009 at 02:22.

  7. #7
    SitePoint Zealot hpnadig's Avatar
    Join Date
    Sep 2003
    Location
    Bangalore
    Posts
    174
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Webnauts

    wow! I always did want to find out how they did that! thanks for the info
    Home Page| Blog | Gallery
    sys op & contributor @ kn wikipedia

    Still stuck with a stinky browser? Go get FireFox

  8. #8
    SitePoint Zealot Arkkimaagi's Avatar
    Join Date
    Mar 2002
    Location
    Lappeenranta, Finland
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  9. #9
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is a great list of CSS tip's: mezzoblue's css crib sheet

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  10. #10
    SitePoint Member
    Join Date
    Dec 2003
    Location
    TX, USA
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #11

  12. #12
    SitePoint Zealot
    Join Date
    Dec 2003
    Location
    Tampa, FL
    Posts
    124
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Last edited by Scrivs; Feb 5, 2004 at 22:04.

  13. #13
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  14. #14
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CSS Shorthands - to optimize your CSS even further.
    Scrollable area using CSS - because frames and iframes are lame

  15. #15
    SitePoint Member
    Join Date
    Oct 2004
    Location
    UK
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.cssfill.com - Free CSS based layouts and templates.
    Allcreatives - For website publishers

  16. #16
    SitePoint Enthusiast Ultimater's Avatar
    Join Date
    Jun 2005
    Location
    Los Angeles
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can't forget the good o' css validator: http://jigsaw.w3.org/css-validator/
    Ultimater

    GuestBook: View Sign

  17. #17
    SitePoint Addict
    Join Date
    Aug 2004
    Location
    Chicago
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you really want to mess around with IE (Only tested on v6), try something like this:
    Code:
    <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
    Last edited by bjcffnet; Jul 1, 2005 at 18:23.
    Why's (Poignant) Guide to Ruby
    learn ruby with foxes, wizards, and chunky bacon

  18. #18
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by krustie
    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
    Last edited by all4nerds; Sep 24, 2005 at 19:58.

  19. #19
    SitePoint Zealot
    Join Date
    Nov 2005
    Location
    Sweden
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS2-tutorial

    Another resource:CSS2 Tutorial
    Last edited by carlsson; Jan 21, 2006 at 21:35.

  20. #20
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    UK, London
    Posts
    312
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Chris Heilmann
    Blog | Articles | Binaries

  21. #21
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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)

  22. #22
    SitePoint Wizard aaron.martone's Avatar
    Join Date
    Feb 2003
    Location
    Florida, USA
    Posts
    2,322
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  23. #23
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by 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.
    u {text-decoration: overline;}

    we don't need no stinking borders

  24. #24
    SitePoint Zealot beejereeno's Avatar
    Join Date
    Feb 2005
    Location
    Saint Paul, MN - USA
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    -Bobbi Jo
    -----------------------------------------------
    www.bwoodsdesign.com

    Your Website Solutions Start Here

  25. #25
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Last edited by Paul O'B; Apr 11, 2006 at 15:54.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •