| Home | Register | FAQ | Members List | Search | Today's Posts | Mark Forums Read |
12-04-2006, 08:52
|
#1 (permalink) |
|
Registered User
Join Date: Apr 2006
Posts: 2
|
aligning menues
hi guyz, iam trying to align my menues, using the an example. how do i align my menues to the to or even to the left. here is the code. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <title> stu nicholls | CSS PLaY | fitted doors NO images</title> <meta name="Author" content="Stu Nicholls" /> <meta name="Keywords" content="Cascading, Style, Sheets, CSS1, CSS2, CSS, XHTML1.1, w3c, doing it with style, recommendations, opacity, box model, mozilla, opera, netscape, internet explorer, v6, v7.23, techniques, layout, Five column, cutting edge, experimental, validation, validate, navigation, pop-up, pull-down, menus, tips, tricks, css mouseover, mouseovers, CSS experiments, CSS demonstrations" /> <meta name="Description" content="CSS ~ Cutting edge Cascading Style Sheets. Experiments in CSS" /> <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" /> <link rel="icon" href="../favicon.ico" type="image/ico" /> <link rel="stylesheet" media="all" type="text/css" href="../css/cssplay.css" /> <style type="text/css"> .menu {clear:both; margin-bottom:4em;} .menu dt {display:none;} .menu dd {margin:0; padding:0;} .menu .aa {width:5px; float:left; border-bottom:1px solid #000; background:#bcd;} .menu .bb {float:left; padding:2px 0 2px 0; border-bottom:1px solid #000; border-top:1px solid #000; background:#bcd; text-align:center;} .menu .sela {width:5px; float:left; background:#fff; font-size:1em;} .menu .selb {float:left; padding:2px 0 2px 0; border-top:1px solid #000; background:#fff; color:#f00; font-size:1em; text-align:center;} .menu .va {width:1px; float:left; border-top:5px solid #fff; background:#000; overflow:hidden;} .menu .vb {width:1px; float:left; height:1px; background:#ccc; border-top:2px solid #fff; border-bottom:2px solid #000; overflow:hidden;} .menu .vc {width:1px; float:left; height:1px; background:#ccc; border-top:1px solid #fff; border-bottom:1px solid #000; overflow:hidden;} .menu .vd {width:2px; float:left; height:1px; background:#000; border-top:1px solid #ccc; overflow:hidden;} * html .menu .vb {height:5px; he\ight:1px;} * html .menu .vc {height:3px; he\ight:1px;} * html .menu .vd {height:2px; he\ight:1px;} .menu a, .menu a:visited {color:#444; text-decoration:none; font-size:1em; cursor:pointer; background:#c88;} .menu a:hover {color:#c00; background:#def;} .menu a:hover .aa, .menu a:hover .bb {background:#def;} .pad {float:left; color:#fff;} .padtop {float:left; display:block; padding:0 5px;} </style> </head> <body> <div id="wrapper"> <dl> <dt>Artist menu</dt> <dd><a href="main.html"><span class="aa"><span class="va"> <br /> </span><span class="vb"></span><span class="vc"></span><span class="vd"></span></span><span class="bb">Main<br />Cezanne</span><span class="aa"><span class="vd"></span><span class="vc"></span><span class="vb"></span><span class="va"> <br /> </span></span></a></dd> <dd><a href="Contacts.html"><span class="aa"><span class="va"> <br /> </span><span class="vb"></span><span class="vc"></span><span class="vd"></span></span><span class="bb">Contacts<br />Contacts</span><span class="aa"><span class="vd"></span><span class="vc"></span><span class="vb"></span><span class="va"> <br /> </span></span></a></dd> <dd><span class="sela"><span class="va"> <br /> </span><span class="vb"></span><span class="vc"></span><span class="vd"></span></span><span class="selb">William<br /> Turner </span><span class="sela"><span class="vd"></span><span class="vc"></span><span class="vb"></span><span class="va"> <br /> </span></span></dd> <dd><a href="#"><span class="aa"><span class="va"> <br /> </span><span class="vb"></span><span class="vc"></span><span class="vd"></span></span><span class="bb">John<br />Constable</span><span class="aa"><span class="vd"></span><span class="vc"></span><span class="vb"></span><span class="va"> <br /> </span></span></a></dd> </dl> </div> <br /><br /><br /> <div class="menu"> <dl> <dt>Artist menu</dt> <dd><a href="main.html"><span class="aa"><span class="va"> <br /> </span><span class="vb"></span><span class="vc"></span><span class="vd"></span></span><span class="bb">Main<br />Cezanne</span><span class="aa"><span class="vd"></span><span class="vc"></span><span class="vb"></span><span class="va"> <br /> </span></span></a></dd> <dd><span class="pad"><span class="padtop">Main</span><br /> <a href="Contacts.html"><span class="aa"><span class="va"> </span><span class="vb"></span><span class="vc"></span><span class="vd"></span></span><span class="bb">Contacts</span><span class="aa"><span class="vd"></span><span class="vc"></span><span class="vb"></span><span class="va"> </span></span></a> </span></dd> <dd><span class="sela"><span class="va"> <br /> </span><span class="vb"></span><span class="vc"></span><span class="vd"></span></span><span class="selb">William<br /> Turner </span><span class="sela"><span class="vd"></span><span class="vc"></span><span class="vb"></span><span class="va"> <br /> </span></span></dd> <dd><a href="#"><span class="aa"><span class="va"> <br /> </span><span class="vb"></span><span class="vc"></span><span class="vd"></span></span><span class="bb">John<br />Constable</span><span class="aa"><span class="vd"></span><span class="vc"></span><span class="vb"></span><span class="va"> <br /> </span></span></a></dd> </dl> </div> <div id="head"> <div id="replacement"> <h1 id="title" title="CSS PLaY"><em></em>CSS PLaY</h1> <h1 id="slogan" title="Experiments with Cascading Style Sheets"><em></em>Experiments with Cascading Style Sheets</h1> </div> <h1>FITTED DOORS <em>NO</em> IMAGES</h1> </div> <!-- end of info --> <div class="col1"> <h2>INFORMATION</h2> <div class="col4"> <p>Another one based on <a class="uline" href="http://www.alistapart.com/articles/slidingdoors" title="sliding doors">sliding doors</a> this one uses NO images so it can be INFINITELY resized. It also allows the use of the whole tab for a hover effect. It uses a definition list to hold the menu and the curved corners are produced using styled spans. I have shown a 'selected' tab and the hover effect.</p> <p>Works in IE5.01, IE5.5, IE6, Opera 7.5, Mozilla, Firefox and NN7.1</p> </div> <div class="col1"> <p class="date">Update 1st June 2004</p> <p>The third menu added, just for Ryan, to show how you could mix single and double line tabs. It's a bit of a fudge just to please Opera. There is an easier way for IE and Firefox etc.</p> <p class="date">Update 10th April 2005</p> <p>Probably easier to use the 'Snazzy Menu'.</p> </div> </div> <div class="col3"> <h2>COPYRIGHT</h2> <p>There is NO copyright attached to this menu and as such it can be copied and used as you wish without any need to ask my permission.</p> <h2 class="line"><span>APPROVALS<br />VALIDATION AND COMPLIANCE</span></h2> <ul> <li><a href="http://validator.w3.org/check/referer" title="Valid XHTML 1.1!">xhtml 1.1</a></li> <li><a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.cssplay.co.uk/menus/doors-two.html" title="Valid CSS!">css 1/2/3</a></li> </ul> </div> <p id="foot">©2004/2005 Stu Nicholls ~ All rights reserved</p> </div> </body> </html> |
|
|
|
 |
