Menu
Hello Guys
Please can someone help me. I have started laying out my site with divs instead of tables (im late I know). I have read countless tutorials and cant get this right:
My site has a flash banner as the header bar, Right below that is a navigation bar. The thing is I cant get my text in the nav bar centered vertically. I also need the hover state of the link to highlight the background. I can do this but the highlight isnt flush with the bar (see image). Please can someone also see If I am on the right track with my code.
Thanks guys, its just quite difficult to understand.
Here is the code:
[CODE][COLOR=”RoyalBlue”]<body>
<div id=”page”>
<div id=”pagewrapper”>
<div id=”header”>
<div id=”headerwrapper”>
<div id=”logo”>
<script type=”text/javascript”>
AC_FL_RunContent( ‘codebase’,’http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0′,’width’,’960′,’height’,’123′,’title’,’banner’,’src’,’assets/flash/CLbaner’,’quality’,’high’,’pluginspage’,’http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash’,’movie’,’assets/flash/CLbaner’ ); //end AC code
</script>
<noscript>
<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0″ width=”960″ height=”123″ title=”banner”>
<param name=”movie” value=”assets/flash/CLbaner.swf” />
<param name=”quality” value=”high” />
<embed src=”assets/flash/CLbaner.swf” quality=”high” pluginspage=”http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash” type=”application/x-shockwave-flash” width=”960″ height=”123″></embed>
</object>
</noscript>
</div>
<div id=”primarynav”>
<div id=”primarynavwrapper”>
<ul class=”horizintalnav”>
<li><a href=”#”><span>home</span></a> <a href=”#”><span>be creative</span></a> <a href=”#”><span>portfolio</span></a> <a href=”#”><span>services</span></a> <a href=”#”><span>news</span></a> <a href=”#”><span>useful info</span></a> <a href=”#”><span>contact us</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>[/COLOR]
here is my CSS:
[CODE]
[COLOR=”Sienna”]@charset “UTF-8”;
body,td,th {
color: #FFFFFF;
}
body {
background-color: #000000;
}
#page {
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #000000;
color: #FFFFFF;
}
#pagewrapper {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #000000;
margin: 0px;
padding: 0px;
color: #FFFFFF;
}
#header {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
width: 960px;
margin-right: auto;
margin-left: auto;
padding: 0px;
}
#headerwrapper {
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
#logo {
height: 123px;
width: 960px;
position: relative;
}
#primarynav {
background-color: #999999;
height: 60px;
overflow: hidden;
}
#primarynavwrapper {
background-color: #999999;
}
.horizintalnav {
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-top: 20px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
text-align: right;
}
#context {
width: 250px;
float: left;
height: 60px;
background-color: #CCCCCC;
}
#contextwrapper {
background-color: #CCCCCC;
color: #000000;
height: 60px;
text-align: center;
vertical-align: middle;
}
li {
list-style-type: none;
margin: 0px;
padding: 0px;
}
span {
padding: 12px;
}
a {
color: #FFFFFF;
text-decoration: none;
padding-top: 17px;
padding-bottom: 17px;
}
a:hover {
background-color: #CCCCCC;
}
[/COLOR]
[upl-file uuid=5735aea6-c2ad-4255-9497-d28f34ac16e1 size=45kB]help.jpg