Help with a modified Solid Block Menu. [Archive]

View Full Version : Help with a modified Solid Block Menu.

RGStrat

01-17-2009, 05:08 PM

Hi, I am using a highly modified form of the Solid Block Menu. I am trying to center the blocks in the menu, but nothing I have seen on here has worked. I am using IE 6.

Here is the CSS:
body
{
margin: 0px;
padding: 0px;
text-align:center;
}

ul.toplink{
margin: 0 auto;
text-align:center;
padding: 0;
font: bold 13px Arial;
width: 100%;
background: black url(images/navi_back.png) center center repeat-x;
height:57px;
list-style-type:none;
}

ul.toplink li{
display: inline;
width: 117px;
height: 57px;
list-style-type:none;
text-align:left;
}

.toplink li a{
margin:0px auto;
float: left;
color: #999999;
padding: 20px 0px;
text-decoration: none;
background: black url(images/navi_1.png);
background-repeat: no-repeat;
width: 117px;
text-align:center;
}

.toplink li a:visited{
color: #999999;
}

.toplink li a:hover, .toplink li .current{
color: white;
}

p.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/
padding-top: 1em;
}

#last{
background:none;
}

Here is the 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>
<title>Robot Casserole 1736</title>
<link href="base.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<ul class="toplink" align="center">
<li><a href="#">Home</a></li>
<li><a href="#" class="current">About Us</a></li>
<li><a href="#">FIRST</a></li>
<li ><a href="#">Resources</a></li>
<li><a href="#">Forum</a></li>
<li><a id="last" href="#">Contact Us</a></li>
</ul>
</body>
</html>

I would greatly appreciate the help, thanks.

Nile

01-17-2009, 11:47 PM

Try the following.

ul.toplink li{
display: inline;
width: 117px;
height: 57px;
list-style-type:none;
text-align:center;
margin: 0 auto;
}

monicasaha

01-23-2009, 07:01 AM

body
{
margin: 0px;
padding: 0px;
text-align:center;
}
div.main{
background: black url(images/navi_back.png) 0 0 repeat-x;
height:57px;
overflow:hidden;
}

ul.toplink{
margin: 0 auto;
text-align:center;
padding:0;
font:bold 13px/57px Arial;
list-style-type:none;
width:705px;
}

ul.toplink li{
display: inline;
list-style-type:none;
}

.toplink li a{
color: #999999;
text-decoration: none;
background:black url(images/navi_1.png) 0 0 no-repeat;
display:block;
width: 117px;
float:left;
}

.toplink li a:visited{
color: #999999;
}

.toplink li a:hover, .toplink li .current{
color: white;
}

p.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/
padding-top: 1em;
}

#last{
background:none;
}

<div class="main">
<ul class="toplink">
<li><a href="#">Home</a></li>
<li><a href="#" class="current">About Us</a></li>
<li><a href="#">FIRST</a></li>
<li ><a href="#">Resources</a></li>
<li><a href="#">Forum</a></li>
<li><a id="last" href="#">Contact Us</a></li>
</ul>
</div>

u can try this code

monicasaha

01-23-2009, 09:18 AM

if u dont wanna try to make the with fixed of the ultag.. u can also try this code

body
{
margin: 0px;
padding: 0px;
text-align:center;
}
div.main{
background: black url(images/navi_back.png) 0 0 repeat-x;
height:57px;
overflow:hidden;
width:100%;
}

ul.toplink{
margin: 0 auto;
text-align:center;
padding:0;
font:bold 13px/57px Arial;
list-style-type:none;
width:100%;
}

ul.toplink li{
display: inline;
list-style-type:none;
}

.toplink li a{
color: #999999;
text-decoration: none;
background:black url(images/navi_1.png) 0 0 no-repeat;
padding:0 20px;

}

.toplink li a:visited{
color: #999999;
}

.toplink li a:hover, .toplink li .current{
color: white;
}

p.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/
padding-top: 1em;
}

#last{
background:none;
}

best of luck