Hi All.
I am doing a horizontal nav bar. The problem I have is that the links are too
long, and the client will not change them.
The site width is 900px. How can I get the background colour to be the same
height on all the links.
Say the "About Us" link only takes up one line of background colour, but the
"Community Based Youth Initiatives" link takes two
lines of colour. I tried the <br /> but it looks stupid.
Code below;
Thanks
Darren
<div id="mainNav">
<ul>
<li id="aboutUs"><a href="index.htm" class="first">About Us</a></li>
<li id="localEmploymentServiceNetwork"><a
href="localEmploymentServiceNetwork.htm">Local Employment Service
Network</a></li>
<li id="servicesToTheUnemployed"><a
href="servicesToTheUnemployed.htm">Services to the Unemployed</a></li>
<li id="communityDevelopment"><a
href="communityDevelopment.htm">Community Development</a></li>
<li id"communityBasedYouthInitiatives"><a
href="communityBasedYouthInitiatives.htm">Community Based Youth
Initiatives</a></li>
</ul>
</div>
@charset "UTF-8";
/*----- basic styling----*/
* {
margin: 0px;
padding: 0px;
}
body {
background-color:#006699;
text-align:center;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:85%;
}
#wrapper {
position:relative;
width:900px;
margin:0 auto;
text-align:left;
background:#FFFFFF url(../images/logo/sideBarBG.gif) repeat-y;
}
/*----- position container elements -----*/
#header {
position:relative;
background: #ffffff url(../images/logo/mainLogo.jpg) no-repeat top left;
height: 120px;
}
#header h1 {
margin-left: -9000px;
}
/*--- main navigation bar --*/
#mainNav {
float:left;
width: 900px;
}
#mainNav ul {
margin:0;
padding:0;
list-style:none;
float: left;
}
#mainNav li {
float: left;
}
#mainNav li a:link,#mainNav li a:visited {
display:block;
background:#000066;
padding: .2em .5em;
text: bold 1em/1.2 Georgia, "Times New Roman", Times, serif;
text-decoration:none;
color:#FFFFFF;
margin-right: .5em;
}
#mainNav li a:hover,#mainNav li a:active {
color: #006699;
background:#FFFFFF;
}
#content {
float:right;
width:600px;
}
#sidebar {
float:left;
width: 250px;
}
#footer {
color:#FFFFFF;
font: .8em Verdana, Arial, Helvetica, sans-serif;
background:#000000;
margin-top: 5em;
}
#clear {
clear:both;
}
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
