Hello. I am using html and css in firefox. I have made box for menu bar.So, Im trying to do horizontal menu bar and put it into that box. If Im setting the display:inline in css fail, it still displays menu vertically. Can someone tell , whats the problem?
@CHARSET "UTF-8";
* { padding: 0; margin: 0; }
body{
background-image:url('puit.jpg');
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin:0 auto;
width: 922px;
}
#pealis {
width: 900px;
color: #ccc;
padding: 10px;
height : 100px;
margin : 10px 0px 5px 0px;
background-image:url("header.jpg");
}
#menu {
width:900;
color: #333;
background: grey;
padding: 10px;
border: 1px solid #ccc;
margin: 0px 0px 5px 0px;
}
#menu ul{
list-style-type:none;
margin: 0;
padding: 0;
}
#menu ul li{
display:inline;
}
#sisu {
width: 900px;
color: #333;
border: 1px solid #ccc;
margin: 0px;
padding: 10px;
height: 350px;
background-color: white;
}
#footer {
width: 900px;
color: #333;
border: 1px solid #CCC;
margin: 0px 0px 10px 0px;
padding: 10px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="main.css"/>
<title>Kodulehekylg</title>
</head>
<body>
<div id="wrapper">
<div id="pealis">
</div>
<div id="menu">
<ul >
<li><h2><a href="#" >Avaleht </a></h2></li>
<li><h2><a href="#">Kontakt</a></h2></li>
<li><h2><a href="#">Ktte</a></h2></li>
<li><h2><a href="#">sfds</a></h2></li>
</ul>
</div>
<div id="sisu">
<h1><center> Hello!</center></h1>
</div>
<div id="footer">
</div>
</div>
</body>
</html>