problem with div and ul (CSS)

eddioot · 02-12-2010, 03:52 PM

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

johnscott · 02-12-2010, 05:04 PM

Can you post the entire html code?

Are you having problems spacing in a particular browser or all browswers?

eddioot · 02-13-2010, 05:39 PM

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...

jonweb2009 · 02-13-2010, 06:10 PM

Dowload some sample css horizontal menu from

www.rainbow-templates.com and use in your project.

PixelPusher · 02-18-2010, 03:32 PM

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 Code:

<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.

02-12-2010, 03:52 PM	#1
eddioot New Member Join Date: Feb 2010 Posts: 8	problem with div and ul (CSS) 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 Attached Images

02-12-2010, 05:04 PM	#2
johnscott New Member Join Date: Jan 2010 Location: Edmonton, AB Posts: 21	Can you post the entire html code? Are you having problems spacing in a particular browser or all browswers? __________________ Regards, John Scott Edmonton Web Design And Development

02-13-2010, 06:10 PM	#4
jonweb2009 Bronze Member Join Date: Dec 2009 Posts: 60	Dowload some sample css horizontal menu from www.rainbow-templates.com and use in your project. __________________ HTML PHOTOSHOP ASP.NET, JAVASCRIPT WEB DESIGN TUTORIALS. www.tutorialriver.com

02-18-2010, 03:32 PM	#5
PixelPusher Super Moderator Join Date: Oct 2008 Location: Arizona, USA Posts: 1,053	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 Code: <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. __________________ John Darling Graphic / Web Designer SmarterTools Inc. (877) 357-6278 www.smartertools.com

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

02-13-2010, 05:39 PM	#3
eddioot New Member Join Date: Feb 2010 Posts: 8	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...