Posted February 14, 201113 yr Good evening one and all on this miserable February evening. I am having a go at making a web site. I'm using Dreamweaver CS3. I wanted a fancy looking menu system and found this http://cssmenumaker.com/builder/menu_info.php?menu=066 I went through the configuring off the menu and downloaded the source. I changed the source a little bit so the gaps between links wasn't so big nor was the box on mouse over. My problem now is that when I mouseover a link the text eitherside seems to move a few px. If anyone could help me I'd be so appreciative I'm willing to offer a packet off cheese and onion Golden Wonders My 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=utf-8" /> <title>Caithness Kuk Sool Won</title> <link href="tdp-style.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- body { background-color: #003366; } </style> </head> <body onload="P7_initTP(3,0);P7_initTBM(1,2,1,1,200,3);PLTVC_onload()"> <div id="container"> <div id="header"> <div align="left">Logo will go here</div> </div> <div id="menu"> <!--[if IE]> <style media="all" type="text/css">@import "/ie.css";</style> <![endif]--> <div class="nav"> <div class="table"> <ul class="select"><li><a href="" target="_self"><b>One</b></a> </li> </ul> <ul class="select"><li><a href="" target="_self"><b>Two</b></a> </li> </ul> <ul class="select"><li><a href="" target="_self"><b>Three</b></a> </li> </ul> <ul class="select"><li><a href="" target="_self"><b>Four</b></a> <div class="select_sub"> <ul class="sub"> <li><a href="ourplans.html" target="_self">Four Point One</a></li> <li><a href="ourservices.html" target="_self">Four Point Two</a></li> </ul> </div> </li> </ul> <ul class="select"><li><a href="" target="_self"><b>Five</b></a> <div class="select_sub"> <ul class="sub"> <li><a href="quality.html" target="_self">Five Dot One</a></li> <li><a href="findadentist.html" target="_self">Five Dot Two</a></li> <li><a href="faqspatient.html" target="_self">Five Dot Three</a></li> </ul> </div> </li> </ul> <ul class="select"><li><a href="" target="_self"><b>Six</b></a> </li> </ul> <ul class="select"><li><a href="" target="_self"><b>Seven</b></a> </li> </ul> <ul class="select"><li><a href="" target="_self"><b>Eight</b></a> </li> </ul> <ul class="select"><li><a href="" target="_self"><b>Nine</b></a> </li> </ul> <ul class="select"><li><a href="" target="_self"><b>Ten</b></a> </li> </ul> </div> </div> </div> <div id="content">Content for id "content" Goes Here</div> <div id="footer"> <div align="center">Footer</div> </div> </div> </body> </html> And the CSS I'm using <style type="text/css"> <!-- /* General page formatting - BEGIN */ body{ font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #dddddd; margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */ padding: 0; text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */ color: #dddddd; background-color: #003366; } a:link { color: 000000; text-decoration: none; } a:visited { text-decoration: none; color: 000000; } a:hover { text-decoration: underline; color: 000000; } a:active { text-decoration: none; color: 000000; } /* General page formatting - END */ /************************************************************ *********/ /************************************************************ *********/ /************************************************************ *********/ /* Container and DIV formatting - BEGIN */ #container { width: 1000px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */ background: #003366; margin: -10px auto; /* the auto margins (in conjunction with a width) center the page */ border: 0px solid #000000; text-align: left; /* this overrides the text-align: center on the body element. */ } #header { margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */ border: 0px solid #000000; padding: 0px 0px ; text-align: left; /* this overrides the text-align: center on the body element. */ } #menu { background: #ffffff; margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */ border: 0px solid #000000; padding: 0px 0px; text-align: left; /* this overrides the text-align: center on the body element. */ } #content { background: #ffffff; margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */ border: 0px solid #000000; padding: 35px 20px; text-align: left; /* this overrides the text-align: center on the body element. */ } #footer { font-family: Arial, Helvetica, sans-serif; font-size: small; text-align:center; color: #c0c0c0; background: #ffffff; margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */ border: 0px solid #000000; padding: 10px 20px; text-align: left; /* this overrides the text-align: center on the body element. */ } /* Container and DIV formatting - END */ /************************************************************ *********/ /************************************************************ *********/ /************************************************************ *********/ /* Navigation Menu - BEGIN */ .nav { height:35px; background: url(images/bg.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; font-size:11px; width:100%; z-index:100; margin:0; padding:0; } .nav .table { display:table; margin:0 auto; } .nav .select, .nav .current { margin:0; padding:0; list-style:none; display:table-cell; white-space:nowrap; } .nav li { margin:0; padding:0; height:auto; float:left; } .nav .select a { display:block; height:35px; float:left; font-weight:bold; background: url(images/bg.gif); padding:0 10px 0 10px; text-decoration:none; line-height:35px; white-space:nowrap; color:#2b3238; } .nav .select a:hover, .nav .select li:hover a { background: url(images/hover.gif); padding:0 0 0 15px; cursor:pointer; color:#2b3238; } .nav .select a b{ font-weight:bold; } .nav .select a:hover b, .nav .select li:hover a b { display:block; float:left; padding:0 15px 0 0px; background:url(images/hover.gif) right top; cursor:pointer; } .nav .select_sub { display:none; } /* IE6 only */ .nav table { border-collapse:collapse; margin:-1px; font-size:1em; width:0; height:0; } .nav .sub { display:table; margin:0 auto; padding:0; list-style:none; } .nav .sub_active .current_sub a, .nav .sub_active a:hover { background:transparent; color:#2b3238; } .nav .select :hover .select_sub, .nav .current .show { display:block; position:absolute; width:100%; top:35px; background:url(images/back.gif); padding:0; z-index:100; left:0; text-align:center; } .nav .current .show { z-index:10; } .nav .select :hover .sub li a, .nav .current .show .sub li a { display:block; float:left; background:transparent; padding:0 10px 0 10px; margin:0; white-space:nowrap; border:0; color:#2b3238; } .nav .current .sub li.sub_show a { color:#2b3238; cursor:default; } .nav .select .sub li a { font-weight:normal; } .nav .select :hover .sub li a:hover, .nav .current .sub li a:hover { visibility:visible; color:#73a0d2; } /* Navigation Menu - END */ --> </style>
February 14, 201113 yr Author HAHAHA Never mind I figured it out! Only took me an hour and a half! Mods feel free to delete!
Create an account or sign in to comment