| |
Webnauts
Googler
Joined: 21 May 2004
Location: Germany
2876.20 GC$
Items
|
 Posted: Thu Apr 14, 2005 3:01 pm Post subject: CSS Tips and Tricks |
 |
|
|
CSS Resources, Tutorials, Tips and Tricks (please report broken links)
 CSS Tutorials (all-in-one) http://www.thefixor.com/code_css.php#tutor
Tutorials, Demos, and Hacks http://nemesis1.f2o.org/links
Florida State University Webmaster - Curriculum Cascading Style Sheets (CSS 2.1) Reference
http://learningforlife.fsu.edu/webmaster/references/css/index.cfm
Rebuilding a Site With Standards http://www.meyerweb.com/eric/talks/2002/wdw-boston/meyer-rebuilding.html
W3C Web Style Sheets CSS tips & tricks http://www.w3.org/Style/Examples/007/
Tables or CSS? Choosing a layout http://www.saila.com/usage/layouts/cssvtables.shtml
Tableless Layout with CSS HowTo (W3C) http://www.w3.org/2002/03/csslayout-howto.html.en
How to build a web site without tables http://www.mako4css.com/Tutorial.htm
CSS Quick Reference http://www.devguru.com/Technologies/css/quickref/css_index.html
Real World Table Free Site Development http://www.womendesignersgroup.com/articlerachel.shtml
CSS Bugs and Workarounds http://css.nu/pointers/bugs.html
How to hide CSS from buggy browsers http://w3development.de/css/hide_css_from_browsers/
Hiding CSS form Netscape 4+ http://www.v2studio.com/k/css/n4hide/
External link icons the CSS way: http://www.kryogenix.org/days/173.html
Definition lists for float-right image and description http://www.maxdesign.com.au/presentation/definition/dl-float-right.htm
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/
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/
Erlarger Button Menu with CSS - Overlapping the other elements: http://moronicbajebus.com/playground/cssplay/enlarger-button-menu/ This does not work in Internet Explorer.
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/
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/
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/
Horizontal Menu using CSS http://moronicbajebus.com/playground/cssplay/hormenu/
Add banner positioning with CSS http://www.peterbailey.net/test/banner.htm
Box Model Hack http://www.tantek.com/CSS/Examples/boxmodelhack.html
Designing for two Style Sheets - This method is suitable for use when you have a site that is laid out using CSS positioning as opposed to tables, and where the content is likely to get displayed badly in older browsers.
By carefully planning your layout you can create an alternate stylesheet that will display correctly in older browsers and still be able to do an advanced CSS layout for the rest. http://www.edgeofmyseat.com/showarticle.do?AID=5
Use CSS to Color Your Forms http://www.edevcafe.com/viewdoc.php?id=6
CSS-driven tabs http://www.clagnut.com/writings/csstabs/
CSS: Mix and match Classes http://catcode.com/csstips/classes.html
CSS: Graphic List Bullets http://catcode.com/csstips/graphic_list.html
CSS: Centered Tables http://catcode.com/csstips/center_table.html
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
Mark external links on your site (and others!) http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=60&format=html#6
CSS Positioning Properties http://www.miswebdesign.com/resources/articles/css-positioning-properties.html
CSS Menus - Uberlink CSS Rollovers: http://www.projectseven.com/tutorials/css_menus/list_01/index.htm
CSS-TD CSS Table Design: http://www.projectseven.com/tutorials/css_t/index.htm
CSS Iframe Mimics http://www.beforethedog.com/tutoriali/tut1.htm
Navigation Menu without Images: http://www.bravenet.com/resources/tipsandtricks/showtip.php?view=160
Dynamic @import CSS files using PHP: http://www.1976design.com/blog/archive/2004/02/03/php-dynamic-css/
max-width in Internet Explorer: http://www.svendtofte.com/code/max_width_in_ie/
The Basics of Positioning http://www.communitymx.com/content/article.cfm?cid=3B56F
Creating radically different list options http://css.maxdesign.com.au/listamatic/
CSS Rollover Tutorial
http://info.vilesilencer.com/main.php?rock=css_tute1.php
-------
Tools and Utilities
Build tableless (with CSS) pages with this free online tool: http://www.fu2k.org/alex/css/layouts/3Col_OrderedAbsolute.mhtml
User Style Sheet Wizzard http://www.techdis.ac.uk/seven/wizards/user-style.html
FREE Accessible Forms Creator Desktop Software (for building forms with CSS or tables): http://www.hisoftware.com/access/valueadd9.html
Style Master - CSS Web Page layout Editor for Windows and Macintosh: http://www.westciv.com/style_master/
Layout-Matic - Generates CSS for formatting lists in a variety of forms: http://www.inknoise.com/experimental/layoutomatic.php
_________________
Optimizing for Search Engines, with Humans in Mind.
SEO Workers Professional Consulting | SEO Workers Analysis Tool
Last edited by Webnauts on Thu Aug 11, 2005 6:10 am; edited 2 times in total |
|
| Back to top |
|
|
Webnauts
Googler
Joined: 21 May 2004
Location: Germany
2876.20 GC$
Items
|
| Posted: Thu Apr 14, 2005 3:04 pm Post subject: |
|
|
|
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!
Found at: http://www.bravenet.com
_________________
Optimizing for Search Engines, with Humans in Mind.
SEO Workers Professional Consulting | SEO Workers Analysis Tool |
|
| Back to top |
|
|
tbrenner
Senior Googler
Joined: 09 Mar 2005
Location: South Georgia
3410.05 GC$
Items
|
| Posted: Sun Jun 05, 2005 11:53 pm Post subject: |
|
|
|
| Thanks a lot! I've already saved 2 hours. |
|
| Back to top |
|
|
Wordsfloat
Noogle
Joined: 25 Jul 2005
28.05 GC$
Items
|
|
| Back to top |
|
|
Webnauts
Googler
Joined: 21 May 2004
Location: Germany
2876.20 GC$
Items
|
|
| Back to top |
|
|
hedx
Noogle
Joined: 05 Jul 2005
265.15 GC$
Items
|
|
| Back to top |
|
|
JOKERz
Riot of The Blood
Joined: 19 Aug 2005
Location: Grave
7905.25 GC$
Items
|
| Posted: Fri Aug 19, 2005 6:11 am Post subject: |
|
|
|
wow!!
Finally found what i need!!
Thanx m8!
_________________
JOKERz sig:
 |
|
| Back to top |
|
|
Sponsored Links
|
| Posted: 5 Dec 2008 11:38 am Post subject: Advertisements |
|
|
|
|
|
|
| Back to top |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
Host your free forums with Invision Plus.net forum web hosting with your own subdomain.
alexisBlue v1.2 // Theme Created By: Andrew Charron // Icons in Part By: Travis Carden |
|
|
|
|
really helps a lot.
