CSS Examples:
The page is dedicated to all those CSS solutions I have found over time that I never wanted to lose track of. Some really great stuff here, Enjoy! Below you will see a mixture of both links and code.- IE6 CSS Hack as well as IE7 CSS Hack
- Styling Links
- Double Class
- Multiple Colums
- Defining Font and Text
IE6 CSS Hack as well as IE7 CSS Hack
I prefer not to use css hacks BUT sometimes we need them so here goes...
#MyDiv {
margin : 10px 10px 10px 10px;
}
/* IE6 Only */
* html #MyDiv {
margin : 5px 5px 5px 5px;
}
/* IE7 Only */
*:first-child+html #MyDiv {
margin : 2px 2px 2px 2px;
}
(Credit to: mdibb.co.uk)
Different States of a link to be applied to a class:
a.linky, a:hover.linky, a:active.linky, a:visited.linky {color:FF0000; font-weight:bold;}
OR defining links for an entire page
a:link, a:visited, a:active, a:hover {color: #FF0000;}
OR defining links for a specific DIV ID
#LinkDiv a:link, #LinkDiv a:visited, #LinkDiv a:active, #LinkDiv a:hoover {color: #FF0000;}
Thanks Román! Check out Román Cortés page.
LINKY LINK
Double Class:
You can in fact apply two classes to the same element. Thought I would share since I tried going about this the wrong way. Thanks Josh.
Multiple Columns with CSS
Easy to implement and cross browser, cross platform compatible. Make sure that you include <div style="clear:both;"></div> after your columns so that subsequent information is displayed below your "table" and not to the right or left. (Thank you Maria!)
#main {width:600px;border:1px solid orange;}
#column1 {float: left;margin: 1em; background-color:red; width:150px; height:150px;}
#column2 {float: left;margin: 1em; background-color:blue; width:150px; height:150px;}
#column3 {float: left;margin: 1em; background-color:yellow; width:150px; height:150px;}
<div id="main">
<div id="column1"></div>
<div id="column2"></div>
<div id="column3"></div>
<div style="clear:both;"></div>
</div>
Font Styling
Welcome to the world of font styling using CSS. An interesting article can be found here.
body {
font-family: "Trebuchet MS", arial, sans-serif;
font-size: 11px;
OR
font:12px "Trebuchet MS", arial, sans-serif;
color: #5F3E31;
line-height: 14px;
margin: 0;
padding: 0;
text-align: center;
}
Default font property values:
element {
font-style: normal;
font-variant:normal;
font-weight: normal;
font-size: inherit;
line-height: normal;
font-family:inherit;
}
Fun with Lists
This is a list I was messing around with dealing with the list items floating left. The number of columns depends on the width settings.
ul.list {width: 420px; border:1px solid;}
ul.list li {
width: 190px;
float:left;
margin-right: 10px;
background: url(http://images.thenestbaby.com/registry/bullet.gif) no-repeat 4px left;
padding-left: 10px;
height:50px;
}
* html ul.list li
{width: 187px;}
.regText {
font-family: arial, verdana;
color: #5f3e31;
font-size: 10px;
font-weight: bold;
}
|