problem with div and ul (CSS)

E

eddioot

New Member
hi all,

i am a beginning webdesigner with maybe a stupid question :p
I am trying to create a horizontal menu bar but the text does not align the way i want it to.

I created a div in which i created an ul. Made the ul horizontal but now my text falls under the div...

Here is the code i used:

html:
<div id="menu">
<ul class="menu ul a">
<li><a href="html/geschiedenis.html">Geschiedenis</a></li>
<li><a href="html/contact.html">Contact</a></li>
<li><a href="html/voorraad.html">voorraad</a></li>
</ul>
</div>

CSS:
div#menu{
top:10%;
height: 5%;
left: 10%;
width: 80%;
background:#FFF;
position:absolute;
font-family: Verdana, Geneva, sans-serif;
font-size: medium;
font-weight: bold;
color: #060;
text-align:center;
}
#menu ul li {
list-style-type: none;
}
#menu ul {
list-style-type: none;
}
#menu ul li {
display: inline;
word-spacing: normal;
}
#menu .menu.ul.a li a {
text-decoration: none;
color: #060;
font-family: Verdana, Geneva, sans-serif;
position: relative;
top: 0%;
width: auto;
height: auto;
right: 0%;
word-spacing: 5em;
vertical-align: top;
}


Can someone see what I am doing wrong here??

Oww and don't make fun of the rest of the lay-out and colors, just trying to fix the functionality first :p
 

Attachments

  • printscreen.jpg
    printscreen.jpg
    15.2 KB · Views: 38
E

eddioot

New Member
hi John.

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="banner">
</div>
<div id="logo">
<img src="images/logo.gif" width="100%" height="100%" />
</div>

<div id="hoofdinhoud"></div>

<div id="menu">
<ul class="menu ul a">
<li><a href="html/geschiedenis.html">Geschiedenis</a></li>
<li><a href="html/contact.html">Contact</a></li>
<li><a href="html/voorraad.html">voorraad</a></li>
</ul>
</div>
<div id="sitenaam">
<img src="images/website.gif" height="100%" />
</div>
</body>
</html>




CSS:

@charset "utf-8";
/* CSS Document */

body{
background:#000
}

div#banner{
left: 0;
top: 0;
width: 70%;
height: 35%;
background:#000;
position:absolute;
}
div#logo{
left: 70%;
top: 0;
width: 30%;
height: 35%;
position: absolute;
background:#000;
}
div#hoofdinhoud{
left: 10%;
top: 20%;
width: 80%;
height: 75%;
position: absolute;
background: #060;
}
div#menu{
top:10%;
height: 5%;
left: 10%;
width: 80%;
background:#FFF;
position:absolute;
font-family: Verdana, Geneva, sans-serif;
font-size: medium;
font-weight: bold;
color: #060;
text-align:center;
}
#menu ul li {
list-style-type: none;
}
#menu ul {
list-style-type: none;
}
#menu ul li {
display: inline;
word-spacing: normal;
}
#menu .menu.ul.a li a {
text-decoration: none;
color: #060;
font-family: Verdana, Geneva, sans-serif;
position: relative;
top: 0%;
width: auto;
height: auto;
right: 0%;
word-spacing: 5em;
vertical-align: top;
}

div#sitenaam{
top:0;
left: 10%;
height: 10%;
width: 60%;
position: absolute;
}


I see that Chrome does it a little better dan Internet Explorer.
If i do full screen the text is almost in the center of the white bar.

If i use a smaller resolution, the text keeps falling beneath the white bar.
I use % to place everything so i would think the resolution would not make a difference...
 
PixelPusher

PixelPusher

Super Moderator
Staff member
eddioot,

you dont need to wrap a list (ul) in a div to position it. By default, a UL has the same block level properties as a div. Off the top of my head, your horizontal menu code would roughly look like this:

HTML: 
<ul class="menu">
   <li><a href="">Link 1</a></li>
   <li><a href="">Link 1</a></li>
   <li><a href="">Link 1</a></li>
   <li><a href="">Link 1</a></li>
</ul>

Code: 
ul.menu {
padding:0;
margin:0;
overflow:hidden;
}
ul.menu li {
float:left;
list-style:none;
padding:0;
margin:0;
}
ul.menu li a {
display:block;
height:35px;
line-height:33px;
background-color:#f2f2f2;
font-family: Verdana, Geneva, sans-serif;
font-size: medium;
font-weight: bold;
color: #060;
text-align:center;
text-decoration:none;
}
ul.menu li a:hover {
color: #F00;
background-color:#f9f9f9;
}

To position the menu (list) you can just add the positioning properties to the main ul.menu class.

Hope this helps.
 
You must log in or register to reply here.
Top