Hi
On my site ( <!-- m --><a class="postlink" href="http://home.clara.net/derrett/test2/DivIndex.htm">http://home.clara.net/derrett/test2/DivIndex.htm</a><!-- m --> ) how can I get the menu to be in the center of the header div?
I have looked at what could be making it off center, but
I can't figure it out.
#header{
height: 143px;
background-image: url("1.jpg");
background-repeat:no-repeat;
}
.dvlyt{
width:628px;
margin:0px auto;
text-align: justify;
}
#navcontainer{
height: 29px;
top: 114px;
position: relative;
background-color: #f00;
z-index: 10;
text-align: center;
}
#navcontainer ul li{
float: left;
}
#navcontainer li a{
background: #fff;
width: 115px;
height: 27px;
border-top: 1px solid #f5d7b4;
border-left: 1px solid #f5d7b4;
border-bottom: 1px solid #f5d7b4;
border-right: none;
color: #f5d7b4;
text-decoration: none;
display: block;
text-align: center;
font: normal 10px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}
#navcontainer ul li a:hover{
color: #930;
background: #f5d7b4;
}
#navcontainer a:active{
background: #c60;
color: #fff;
}
#navcontainer li#active a{
background: #c60;
border: 1px solid #c60;
color: #fff;
}
Html:
<div class="dvlyt" id="header" >
<div id="navcontainer">
<ul id="navlist">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.htm">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"services.htm">Services</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"us.htm">Us </a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"work.htm">Work</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"contactus.htm">Contact Us</a></li>
</ul>
</div>
</div>
all help is greatly appreciatedAdd this to your styles (I’m not sure how it looks in IE, but it works in Firebird):
#navcontainer ul {
padding: 0;
margin: 0 auto;
width: 580px;
}
The trick here is to make sure the width of the <ul> is the exact width of the elements within it. All of your hyper links within the list are 115px in width and have a right border of 1px. You have five of them, that’s how I got 580px for the <ul> width.Thanks very much Paul Jr. I wouldn't have found that myself.You’re welcome.
I didn’t actually know about this until a week or two ago when I ran into the same problem with a site of my own.
On my site ( <!-- m --><a class="postlink" href="http://home.clara.net/derrett/test2/DivIndex.htm">http://home.clara.net/derrett/test2/DivIndex.htm</a><!-- m --> ) how can I get the menu to be in the center of the header div?
I have looked at what could be making it off center, but
I can't figure it out.
#header{
height: 143px;
background-image: url("1.jpg");
background-repeat:no-repeat;
}
.dvlyt{
width:628px;
margin:0px auto;
text-align: justify;
}
#navcontainer{
height: 29px;
top: 114px;
position: relative;
background-color: #f00;
z-index: 10;
text-align: center;
}
#navcontainer ul li{
float: left;
}
#navcontainer li a{
background: #fff;
width: 115px;
height: 27px;
border-top: 1px solid #f5d7b4;
border-left: 1px solid #f5d7b4;
border-bottom: 1px solid #f5d7b4;
border-right: none;
color: #f5d7b4;
text-decoration: none;
display: block;
text-align: center;
font: normal 10px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}
#navcontainer ul li a:hover{
color: #930;
background: #f5d7b4;
}
#navcontainer a:active{
background: #c60;
color: #fff;
}
#navcontainer li#active a{
background: #c60;
border: 1px solid #c60;
color: #fff;
}
Html:
<div class="dvlyt" id="header" >
<div id="navcontainer">
<ul id="navlist">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.htm">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"services.htm">Services</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"us.htm">Us </a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"work.htm">Work</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"contactus.htm">Contact Us</a></li>
</ul>
</div>
</div>
all help is greatly appreciatedAdd this to your styles (I’m not sure how it looks in IE, but it works in Firebird):
#navcontainer ul {
padding: 0;
margin: 0 auto;
width: 580px;
}
The trick here is to make sure the width of the <ul> is the exact width of the elements within it. All of your hyper links within the list are 115px in width and have a right border of 1px. You have five of them, that’s how I got 580px for the <ul> width.Thanks very much Paul Jr. I wouldn't have found that myself.You’re welcome.
I didn’t actually know about this until a week or two ago when I ran into the same problem with a site of my own.