I have a menu in my page. Here is the code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8">
<style type="text/css">
#head {
background-image:url(http://manage.smarturl.it/_static/images/homeslice.png);
background-repeat:repeat-x;
text-align:center;
color:#FFF;
font:'BebasNeueRegular';
border:none;
}
#head {
padding:0px;
margin:0px;
}
.style1 {
font: 27px 'BebasNeueRegular', Arial, sans-serif;
color:#FFF;
list-style:none;
margin-top:-20px;
}
.style1 li {
float:left;
}
.style1 a {
text-decoration:none;
color:inherit;
display:block;
width:80px;
}
</style>
</head>
<body>
<div id="head">
<img src="logo8bit.png" width="491" height="188" /><br />
<ul class="style1"><li><a href="">LOGIN</a></li><li><a href="">SIGNUP</a></li><li><a href="">OTHER</a></li><li><a href="">MENU</a></li><li><a href="">STUFF</a></li></ul>
</div>
<br />
</body>
</html>
I cannot get the menu centrally aligned with margins, because whenever I try to, it messes up how the menu is displayed, and it doesn’t show up. Please give me any suggestions you have. thanks!
You can use css lik this.
You can increase the margin-left for .style1 and also remove all negative values as its not Gud practice and also I don’t think you need to give width manually for anchor tags inside li.