Forum Moderators: not2easy
I'm coming with a kindly request of support: I am newbie in css and I don't know how to modify the following CSS to center the menu block.
Here's the code:
#menu {
float:left;
position:relative;
left:50%;
text-align:left;
width: 100%;
top: -39px;
}
#menu ul {
list-style:none;
position:relative;
left:-50%;
padding: 0;
text-align: center;
}
#menu ul {
list-style: square;
margin-left: auto;
}
#menu li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
padding-left: 10px;
font-family: Tahoma, Arial, Verdana;
}
#menu li a{
display: block;
padding: 5px;
text-decoration: none;
color: #FFF;
background: #c84d4d;
font-weight: bold;
}
#menu li a:hover{
background-color: #b20404;
color: #FFF;
padding: 5px;
}
Do you have any suggestions? I searched over the internet and forums and I tried a lot of variants without success. Could you suggest me what should I change?
Thank you in advance.
Regards,
Cornel
and a warm welcome to these forums. ;)
Does this amendment of your code help the cause...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css"><title></title>
<style type="text/css">
* {
padding:0;
margin:0;
}html,body {
margin:10px 0;
}#menu {
position:relative;
float:left;
width:100%;
overflow:hidden;
}#menu ul {
position:relative;
float:left;
left:50%;
list-style-type:none;
}#menu ul li {
position:relative;
float:left;
display:block;
right:50%;
padding-left:10px;
}#menu ul #np {
padding-left:0;
}#menu li a {
display:block;
padding:5px;
background-color:#c84d4d;
font-family:tahoma,arial,verdana,sans-serif;
font-weight:bold;
color:#fff;
text-decoration:none;
text-align:center;
}#menu li a:hover {
background-color:#b20404;
}
</style></head>
<body><div id="menu">
<ul>
<li id="np"><a href="#">link one</a></li>
<li><a href="#">link one</a></li>
<li><a href="#">link one</a></li>
<li><a href="#">link twenty one</a></li>
<li><a href="#">link one hundred and four</a></li>
</ul>
</div></body>
</html>
birdbrain
