Simple Menu Problem

garabildi

02-14-2011, 05:32 PM

I'm fairly new to web design and I would appreciate some help with a little problem I am having with the menu.

The site width is 800px - 600 for a banner and 200 for the menu. The problem is that the menu wont position itself to the left of the banner. This means that the menu begins at the bottom of the banner rather than being in line with it. I've always been crap at floats and positioning and I imagine that is where the problem is. Any help would be greatly appreciated.

What I have:

---Banner---
--------------menu-
----Main Content---

What I want:

----Banner----menu-
----Main Content---

font-size: 62.5%;
font-family:Arial, "Helvetica Condensed", Helvetica;
background:url(../images/bg_1.jpg)}

#wrapper{
width:800px;
margin:0 auto;}

#banner{width:600px;}

#banner h1 a {width:240px;
height:135px;
display:block;
background:url(../images/banner.png) left top no-repeat;
text-indent:-5000px;
text-decoration:none;
outline:none;
margin:0;
padding:0;}

#banner h2{
font-size:1.1em;
color:#999;
margin:0;
line-height:0px;}

#nav{
width:200px;
margin-left:600px;}

#nav ul{
list-style-type:none;
margin:0;
padding:0;}

#nav li{
float:left;
list-style-type:none;
font-size:1.1em;
text-transform:uppercase;
padding:0 5px 7px}

#contentDiv{
width:800px;
clear:both;
padding-top:30px;
background:url(../images/line.png) left top no-repeat;
color:#f3eedb;
text-align:justify;
font-size:1.1em;}

<body id="home">
<div id="wrapper">
<div id="banner">
<h1><a href="index.html" title="HOME"> fsdfsdf </a></h1>
<h2>Blah Blah</h2>
<div id="nav">
<ul>
<li><a href="index.html" title="Click for Home">Home</a></li>
<li><a href="music.html" title="Click for Music">Music</a></li>
<li><a href="news.html" title="Click for News">News</a></li>
<li><a href="biography.html" title="Click for Biography">Biography</a></li>
<li><a href="press.html" title="Click for Press">Press</a></li>
<li><a href="links.html" title="Click for Links">Links</a></li>
<li><a href="contact.html" title="Click for Contact">Contact</a></li>
</ul>
</div>
</div>
<div id="contentDiv"></div>

cyrus709

02-14-2011, 05:51 PM

One way to handle this is to make the position absolute for your menu and place it X from the top. Works for me.

.nav{
width:200px;
margin-left:600px;
top:10px;
position:absolute;
}

Play around with the position from the top to get it right where you want it.

Excavator

02-14-2011, 06:06 PM

Hello garabildi,
Do you have a preference which way you position that menu? Either floating or absolute positioning will work.

Nothing wrong with cyrus709's suggestion ... but why use a margin with ap? Try positioning both top and left like this - .nav {
width: 200px;
position: absolute;
top: 10px;
left: 600px;
}

You will need to make #banner position: relative; for this to work correctly.

garabildi

02-14-2011, 06:55 PM

Thanks for the suggestion, guys.

While I was waiting for responses I played around with the CSS a bit and I think I have come up with something suitable.

#banner{
width:630px;
height:177px;
float:left;
}
#banner h1 a{width:240px;
height:135px;
display:block;
background:url(../images/banner_2.png) left top no-repeat;
text-indent:-5000px;
text-decoration:none;
outline:none;
margin:0;
padding:0;}

#banner h2{
font-size:1.1em;
color:#999;
margin:0;}

#nav{
float:left;
margin-top:147px;
width:170px;}

#nav ul{
list-style-type:none;
margin:0;
padding:0;}

#nav li{
float:left;
list-style-type:none;
font-size:1.1em;
text-transform:uppercase;}

.colA{padding:0 5px 0 5px;}
.colB{padding:0 7px 0 5px;}

<body id="home">
<div id="wrapper">
<div id="banner">
<h1><a href="index.html" title="HOME"> fsdfsdf </a></h1>
<h2>Blah Blah</h2>
<div id="nav">
<ul>
<li class="colA"><a href="index.html" title="Click for Hhome">Home</a></li>
<li class="colA"><a href="music.html" title="Click for Music">Music</a></li>
<li class="colA"><a href="news.html" title="Click for News">News</a></li>
<li class="colA"><a href="biography.html" title="Click for Biography">Bio</a></li>
<li class="colB"><a href="press.html" title="Click for Press">Press</a></li>
<li class="colB"><a href="links.html" title="Click for Links">Links</a></li>
<li class="colB"><a href="contact.html" title="Click for Contact">Contact</a></li>
</div>
</div>
<div id="contentDiv"></div>

Even though this seems to work fine in IE7, Opera 11 and FF3, perhaps the absolute/ relative positioning method is remains the better option?

Excavator

02-14-2011, 07:16 PM

That code is invalid without the </ul> to close the unordered list. I think the whole layout will likely break when you validate your list.

Try it like this instead - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#banner {
width:630px;
height:177px;
float: left;
background: #ccc;
}
#banner h1 a {
width:240px;
height:135px;
margin:0;
padding:0;
float: left;
display:block;
background: #f00 url(../images/banner_2.png) left top no-repeat;
text-indent:-5000px;
text-decoration:none;
outline:none;
}
#banner h2 {
font-size:1.1em;
color:#999;
margin:0;
background: #00f;
}
#nav {
/*
float:left;
margin-top:147px;
*/
width:170px;
margin: 20px 0 0 450px;
}
#nav ul {
list-style-type:none;
margin:0;
padding:0;
}
#nav li {
float:left;
list-style-type:none;
font-size:1.1em;
text-transform:uppercase;
}
.colA {padding:0 5px 0 5px;}
.colB {padding:0 7px 0 5px;}
</style>
<title>Untitled Document</title>
</head>
<body id="home">
<div id="banner">
<h1><a href="index.html" title="HOME"> fsdfsdf </a></h1>
<h2>Blah Blah</h2>
<div id="nav">
<ul>
<li class="colA"><a href="index.html" title="Click for Hhome">Home</a></li>
<li class="colA"><a href="music.html" title="Click for Music">Music</a></li>
<li class="colA"><a href="news.html" title="Click for News">News</a></li>
<li class="colA"><a href="biography.html" title="Click for Biography">Bio</a></li>
<li class="colB"><a href="press.html" title="Click for Press">Press</a></li>
<li class="colB"><a href="links.html" title="Click for Links">Links</a></li>
<li class="colB"><a href="contact.html" title="Click for Contact">Contact</a></li>
</ul>
</div>
</div>
</body>
</html>

garabildi

02-14-2011, 07:29 PM

Excavator

02-14-2011, 07:45 PM

Well spotted! I must have just copied it across incorrectly as I definitely have the close tag in the original. I tried the suggestion of

/*float:left;
margin-top:147px;/*

but that brings the menu under the banner and not to the right of the screen

-Banner------------
-Menu-------------
----Main Content---

There are more edits to that code than just those two lines. Either do a line by line comparison to yours or just copy/paste that example into a new .html and view it in your browser to see the differences.

garabildi

02-14-2011, 11:31 PM

Thanks, Excavator! Your advice would still require me to do a little bit of css re-gigging. Perhaps this is because I'm hampered by a poorly coded base.

Is there any reason why I should not use my own reworking of the code (which appears to work fine on a number of browsers) over the code you have provided (which still requires me to put some work into it)?