homepage Welcome to WebmasterWorld Guest from 54.166.173.147
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Full width horizontal menu bar
envirosurfer




msg:4340189
 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]

 

Paul_o_b




msg:4340277
 9:34 am on Jul 16, 2011 (gmt 0)

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>

alt131




msg:4340314
 1:48 pm on Jul 16, 2011 (gmt 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 :)
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved