owosso Posted November 27, 2007 Share Posted November 27, 2007 I want my vertical navigation to follow the line of the curve. I have each link as it's own div and placed absolutely. I know a list would be better but can I make it look the same? If so, how?Here's the link:http://www.adunate.com/jwrIndex.html Link to comment Share on other sites More sharing options...
Ingolme Posted November 27, 2007 Share Posted November 27, 2007 An unordered list somewhat like this:(this is an example, you'll have to adapt the measurements to your site)<ul style="list-style-type: none; padding: 0; margin: 0;"><li style="margin-left: 120px">Element</li><li style="margin-left: 112px">Element</li><li style="margin-left: 104px">Element</li><li style="margin-left: 98px">Element</li><li style="margin-left: 90px">Element</li><li style="margin-left: 92px">Element</li><li style="margin-left: 96px">Element</li></ul> Link to comment Share on other sites More sharing options...
owosso Posted November 28, 2007 Author Share Posted November 28, 2007 An unordered list somewhat like this:(this is an example, you'll have to adapt the measurements to your site)<ul style="list-style-type: none; padding: 0; margin: 0;"><li style="margin-left: 120px">Element</li><li style="margin-left: 112px">Element</li><li style="margin-left: 104px">Element</li><li style="margin-left: 98px">Element</li><li style="margin-left: 90px">Element</li><li style="margin-left: 92px">Element</li><li style="margin-left: 96px">Element</li></ul>thanks so much!! Link to comment Share on other sites More sharing options...
owosso Posted November 29, 2007 Author Share Posted November 29, 2007 Updated version and question:I used your above coding, with the exception that I used margin-right because my text was right aligned (seemed easier to work with). Works well except my vertical alignment is not consistent from browser to browser. It's all over the board. In fact, to get it anywhere close online, I need to have it looking way off in Dreamweaver.Any way to have more control? Here's the new site link.Here's the CSS body { font-family: Verdana, Geneva, Arial, helvetica, sans-serif; margin: 0px; padding: 0px; background-color: #CCCCCC; font-size: 62.5% /* 16px × 62.5% = 10px */;}p { font-size: 1.2em; color: #000000; line-height: 1.6em; } p span { margin-left: 75px; } a:link, a:visited { font-size: 1.2em; color: #000000; text-decoration: none; } a:hover, a:active { font-size: 1.2em; color: #ac2a2b; text-decoration: none; } a:hover { } h1 { color:#AC2a2B; font-size: 1.8em; font-weight: bold; } h2 { color:#000000; font-size: 1.6em; font-weight: bold; line-height: 1.2em; } h3 { color:#4700AD; font-size:0.8em; } #header { width: 760px; background-color: #000000;} #logo { width: 350px; left: 55px; top: 25px; position: absolute;} #navHor { width: 760px; position: absolute; top: 135px; z-index: 5; background-color: #999999; border-bottom-width: 4px; border-top-style: solid; border-bottom-style: solid; border-top-color: #000000; border-bottom-color: #000000; left: 0px; height: auto; border-top-width: 1px; } #navLeft { width: 225px; float: left; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; height: 325px; padding-top: 60px;}ul#navLeft { width: 80px; position: absolute; z-index: 3; left: 45px; top: 0px; background-color: #FFFFFF; height: 200px;} ul#navLeft li { text-align: right; text-decoration: none; list-style: none;}ul#navLeft li a { text-decoration: none; display: block; }ul#navLeft li#youarehere nav a { background-color: DDDDc2; text-decoration: none; border-bottom-width: 4px; border-bottom-style: solid; border-bottom-color: #6F6659; } #youarehere navLeft a { background-color: DDDDc2; text-decoration: none; border-bottom-width: 4px; border-bottom-style: solid; border-bottom-color: #6F6659; }#statementRight { width: 475px; height: 50px; float: right; margin-right: auto; margin-bottom: 0px; margin-left: auto; position: relative; padding-top: 315px; padding-right: 45px; padding-left: 15px;} #address { width: 760px; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #000000; font-size: 1em; padding-bottom: 2px; background-color: #999999; position: absolute; top: 575px; margin-top: 5px; left: 0px;} #address span { margin-left: 25px; } Here's the html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><title>JWR, Inc., Johnson Creek, WI</title><style type="text/css"><!--#horizontalContainer { background-image: url(jwr/backgroundHome.jpg); background-repeat: no-repeat; background-position: center top; width: 760px; height: 600px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; position: relative; }#verticalContainer { width: 100%; height: 600px; position: absolute; margin-left: -50%; z-index: 1; margin-top: -300px; left: 50%; top: 50%; } body { background-color: #7E7E7E;}--></style><link href="jwrIndexT.css" rel="stylesheet" type="text/css" /></head><body><div id="verticalContainer"><div id="horizontalContainer"> <div id="navHor"> <p align="center"><a href="jwrindex.html">Home</a><span><a href="#.html">Contact</a></span><span><a href="#">Equipment Sales</a></span><span><a href="#">News</a></span><span><a href="#">Employment</a></span></p> </div> <div id="header"> <!--Flash product collage --><div align="right"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="300" height="133" title="JWR, Inc. product line"> <param name="movie" value="jwr/flashjwr.swf" /> <param name="quality" value="high" /> <embed src="jwr/flashjwr.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="300" height="133"></embed> </object></div></div><div id="logo"><img src="jwr/logo.png" alt="JWR, Inc. logo" /></div> <div id="navLeft"> <!--Start vertical navigation --> <ul style="list-style-type: none; padding: 10px; margin: 0;"> <li style="margin-right: 30px"><p align="right"><a href="#">About JWR</a></p></li><li style="margin-right: 50px"> <p align="right"><a href="#">Your Recycling<br /> Solutions</a></p></li><li style="margin-right: 60px"> <p align="right"><a href="#">Waste Solutions</a></p></li><li style="margin-right: 70px"> <p align="right"><a href="#">Product Specific Solutions</a></p></li><li style="margin-right: 72px"> <p align="right"><a href="#">Industry Specific Solutions</a></p></li><li style="margin-right: 70px"> <p align="right"><a href="#">Service & Installation</a></p></li><li style="margin-right: 65px"> <p align="right"><a href="#">Used Equipment</a></p></li><li style="margin-right: 58px"> <p align="right"><a href="#">Parts</a></p></li></ul> </div> <!--Close #navLeft End verticle navigation --> <div id="statementRight"><!--contains #statement --> <h2 align="center">Let us put our experience to work for you to identify a solution that maximizes recycling revenue, minimizes labor and reduces waste costs.</h2> <h1 align="center">Call us today! 888-699-2848</h1> </div> <div id="address"> <p align="center">322 N. Watertown Street, P.O. Box 356, Johnson Creek, WI 53038<span>888-699-2848</span><span>FAX: 920-699-2847</span></p> </div> <!--close #horizontalContainer --> <!--close #vertContainer --> </div></div></body></html> Link to comment Share on other sites More sharing options...
Ingolme Posted November 29, 2007 Share Posted November 29, 2007 You could try giving the <li> elements of the menu a static height, for example:#navLeft li {height: 20px;} Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.