# Solved: CSS border-bottom question



## aconite (Feb 1, 2006)

hi,

I want to extend the border-bottom, please see attachment, underneath the navigation, is it better to do this in css or as an image which I insert through css (eg background:url). Any help appreciated. This is what I have done so far

CSS:
body {
background-color: #ffffff;
font-family:"Futura Lt";
font-size: 62.5%;
color: #000000;
font-weight:normal;
}

#container {
background-color:#FFFFFF;
width:750px;
margin-right:auto;
margin-left:auto;
height:auto;
}

#nav {
font-family:"Futura Lt";
font-size:1.4em;
color:#000000;
float:right;
text-align:right;
height:20px;
}

#nav ul {
background-color:#ffffff;
text-align:right;
font-size:1.2em;
font-family:"Futura Lt";
border-bottom:solid #000000;
border-bottom-width:thin;
}

#nav li {
list-style-type:none;
padding:0.1em 0.4em; 
display:inline;
color:#000000;
}
HTML


Home
About Sandra
Your Life Is Your Business
Latest News & Events
Contact Us

thanks


----------



## tomdkat (May 6, 2006)

I don't see any problem with using the bottom border of the nav DIV.

Peace...


----------



## aconite (Feb 1, 2006)

I want the length of the border-bottom(under the navigation) to be about 800px


----------



## tomdkat (May 6, 2006)

Well, the "container" DIV has a width of 750px and the "nav" DIV, which is inside the "container" DIV should be the full width of the "container" DIV. So, if you assign the border you want to the "nav" DIV, it should span the width of the "container" DIV:

#nav {
font-family:"Futura Lt";
font-size:1.4em;
color:#000000;
float:right;
text-align:right;
height:20px;
*border-bottom:solid #000000;
border-bottom-width:thin;*
}

#nav ul {
background-color:#ffffff;
text-align:right;
font-size:1.2em;
font-family:"Futura Lt";
}

From your screenshot, it looks like this is already the behavior. If you put a 4-sided border around the "container" DIV, I think the border you have now would touch the sides of the "container" DIV border. This is a "quick & dirty" test. 

Peace...


----------

