Welcome to WebmasterWorld Guest from 54.162.93.137

Forum Moderators: not2easy

Message Too Old, No Replies

Full width horizontal menu bar

     
9:47 pm on Jul 15, 2011 (gmt 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 Jul 16, 2011 (gmt 0)

10+ Year Member



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 Jul 16, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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

Featured Threads

Hot Threads This Week

Hot Threads This Month