Difference between revisions of "09 - More Advanced CSS Examples"
From mi-linux
Jump to navigationJump to searchm (More Advanced CSS Examples moved to 09 - More Advanced CSS Examples: Better site structure) |
|
(No difference)
| |
Revision as of 10:51, 20 October 2006
Example 1 - Lists, Boxes, Colours and Stuff
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<STYLE type="text/css">
ul {list-style:none;}
li {padding: 1em; display:inline;margin-left: 1em; margin-top: 1em;}
.redback {background-color: red; color:green;}
.yellowback {background-color: yellow; color:blue;}
.pinkback {background-color: pink; color:white;}
.greenback {background-color: green; color:red;}
.purpleback {background-color: purple; color:yellow;}
.orangeback {background-color: orange; color:blue;}
.blueback {background-color: blue; color:yellow;}
</STYLE>
</HEAD>
<BODY>
<UL>
<LI class="redback">item 01</LI>
<LI class="yellowback">item 02</LI>
<LI class="pinkback">item 03</LI>
<LI class="greenback">item 04</LI>
<LI class="purpleback">item 05</LI>
<LI class="orangeback">item 06</LI>
<LI class="blueback">item 07</LI>
</UL>
</BODY>
</HTML>
Example 2: Simple CSS layout
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<STYLE type="text/css">
div {border:1px solid}
#top {float:top; padding:1%}
#left {float:left; text-align:left; padding:1%}
#right {float:right; text-align:right; padding:1%}
#middle {text-align:center; padding:1%}
#bottom {float:bottom; padding:1%}
</STYLE>
</HEAD>
<BODY>
<DIV id="top">this is top</DIV>
<DIV>
<DIV id="left">this is left</DIV>
<DIV id="right">this is right</DIV>
<DIV id="middle">this is middle</DIV>
</DIV>
<DIV id="bottom">this is bottom</DIV>
</BODY>
</HTML>
