Welcome to WebmasterWorld Guest from 54.196.244.45

Forum Moderators: not2easy

Message Too Old, No Replies

Full width horizontal menu bar

     
9:47 pm on Jul 15, 2011 (gmt 0)

New User

joined:July 15, 2011
posts: 1
votes: 0


Hi Everyone,
Not great with CSS and hoping someone can help.

I'm attempting to make the green bar in the top menu navigation be full width, but have the links still be inside of the container div.

* {
margin: 0;
padding: 0;
}

html, body {
width: 100%;
}

body {
background-attachment: fixed;
background-color: #FFFFFF;
background-image: url("wood.jpg");
font-family: Arial,Helvetica,sans-serif;
font-size: 0.8em;
}

body {
display: block;
margin: 8px;
}

#Container {
background-image: url("headerImage.png");
}

#Container {
background-position: 50% 0;
background-repeat: no-repeat;
}
#Container {
margin: 0 auto;
width: 958px;
}

#TopMenu {
background: url("top.png") repeat-x scroll 0 0 transparent;
height: 42px;
}

#TopMenu {
height: 30px;
padding: 5px 0 0 0;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xml:lang=en lang=en xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Free Shipping</title>
<meta http-equiv=Content-Type content="text/html; charset=UTF-8"/>
</head>
<body>
<div id=Container>
<div id="TopMenu">
<ul style="display:">
<li>Menu Item</li>
</ul>
</div>
</div>
</body>
</html>


I would like to have the green bar extend the full width of the window. Any suggestions?

Thanks!

[edited by: alt131 at 10:18 pm (utc) on Jul 15, 2011]
[edit reason] Thread Tidy [/edit]

9:34 am on July 16, 2011 (gmt 0)

Junior Member

10+ Year Member

joined:May 28, 2003
posts: 198
votes: 4


If you want the menu to extend outside of the container then the easiest way is to move it outside of the container to start with.

You can have an outer wrapper for the menu that is 100% width and then nest the menu with the same width to match your container.

Hard to tell if this is what you mean as there is no mention of green in the code above :)


<!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" />
<title>Free Shipping</title>
<style type="text/css">
* {/* better to use a small reset rather than this */
margin: 0;
padding: 0;
}
body {
background:#fff url("wood.jpg") fixed;
font-family: Arial, Helvetica, sans-serif;
font-size: 80%;
line-height:1.3;
padding:8px;
}
#Container, #TopMenu ul {
margin: 0 auto;
width: 958px;
}
#TopMenu {
background:green url("top.png") repeat-x 0 0;
height: 42px;
line-height:42px;/* center text vertically in height*/
}
#TopMenu ul {
background:blue url("headerImage.png")no-repeat 50% 0;
list-style:none;
height: 42px;
padding:0;/* list have default padding and default margins depending on browsers so remove them both*/
}
#Topmenu li{float:left;}
</style>
</head>
<body>
<div id="TopMenu">
<ul>
<li>Menu Item</li>
</ul>
</div>
<div id="Container">
<p>stuff here</p>
</div>
</body>
</html>
1:48 pm on July 16, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0


Hi envirosurfer, and welcome to WebmasterWorld.

Hard to tell if this is what you mean as there is no mention of green in the code above
Good point Paul. In fairness to envirosurfer, the direct reference got lost when I brought the code back. Your solution fixes that by setting green as the background-color to #TopMenu - thanks :)