navbar line up

**boxiom** · 11-05-2009, 07:42 PM

Another question, I created a NAVBAR and I want it to stretch to both sides of the body. Its shy of touching the right border of the body as seen in the picture:

here is my css:

Code:

@charset "utf-8";
/* CSS Document */


html {
  background-color: #000;
} 

p{
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
text-indent: 10px;
color: #000000;
line-height: 18px;
padding: 3px;
}


h1{
font-family: Verdana, sans-serif;
border-bottom: 2px white dotted;
font-size: 35px;
color: #818f33;
line-height: 50px;
padding: 0px;
border-bottom: .5px black dotted;
}


b{
color: #dce450;
padding-top: 2px;
border-bottom: .5px black dotted;
}


body{
background-color: #fff;
 border: 3px solid #85A110;
  width: 760px;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;

}


/*** Nav bar styles ***/

ul.nav,
.nav ul{
/*Remove all spacings from the list items*/
    margin: 0;
    padding: 0;
    cursor: default;
    list-style-type: none;
    display: inline;
}

ul.nav{
    display: table;
}
ul.nav>li{
    display: table-cell;
    position: relative;
    padding: 2px 6px;
}

ul.nav li>ul{
/*Make the sub list items invisible*/
    display: none;
    position: absolute;
    max-width: 40ex;
    margin-left: -6px;
    margin-top: 2px;
}

ul.nav li:hover>ul{
/*When hovered, make them appear*/
    display : block;
}

.nav ul li a{
/*Make the hyperlinks as a block element, sort of a hover effect*/
    display: block;
    padding: 2px 10px;
}

/*** Menu colors (customizable) ***/

ul.nav,
.nav ul,
.nav ul li a{
    background-color: #fff;
    color: #818f33;
}


ul.nav li:hover,
.nav ul li a:hover{
    background-color: #000;
    color: #fff;
}

ul.nav li:active,
.nav ul li a:active{
    background-color: #036;
    color: #fff;
}

ul.nav,
.nav ul{
    border: 1px solid #818f33;
}

.nav a{
    text-decoration: none;
}

and html

Code:

<!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>Index Testing</title>

<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--



-->
</style>
</head>

<body>
<img src="file:///C|/Documents and Settings/Chris/Desktop/luongonetwork/codwf2/banner.jpg" width="760" height="250"    />


<ul class="nav">
<li><strong>Home</strong>
    <ul>
    <li></li>
    </ul>
</li>
<li><strong>Site Information</strong>
    <ul>
    <li>About Us</li>
    <li>Contact Us</li>
    <li>Submit Content</li>
    <li>Site Map</li>
    </ul>
</li>
<li><strong>Discuss</strong>
    <ul>
    <li>Forums</li>
    <li>Facebook</li>
    <li>Myspace</li>
    <li>Youtube</li>
    </ul>
</li>
<li><strong>COD:MW2</strong>
    <ul>
    <li>About The Game</li>
    <li>Availability</li>
    <li>Buy It</li>
    <li>Other COD Games</li>
    </ul>
<li><strong>Single Player</strong>
    <ul>
    <li>Story Overview</li>
    <li>Missions</li>
    <li>Mission Guide</li>
    <li>Characters</li>
    </ul>
<li><strong>Weapons</strong>
    <ul>
    <li>Weapon List</li>
    <li>Weapon Strategies</li>
    <li>Weapon Pictures</li>
    <li>Weapon Stats</li>
    </ul>
<li><strong>Maps</strong>
    <ul>
    <li>Map List</li>
    <li>Map Strategies</li>
    <li>Map Downloads</li>
    <li>Map Pictures</li>
    </ul>
<li><strong>Multiplayer</strong>
    <ul>
    <li>Multiplayer Information</li>
    <li>Perks</li>
    <li>Modes</li>
    <li>Killstreaks</li>
    <li>Attachments</li>
    <li>Levels</li>
    <li>Strategies</li>
     <li>Prestiging</li>
    </ul>
<li><strong>Achievements</strong>
    <ul>
    <li>Single Player Achievements</li>
    <li>Multiplayer Achievements</li>
    <li>Achievement Guide</li>
    
    </ul>
</li></ul>


<h1>    
Hey this is a title</h1>
<p>This is a <b>paragraph</b> of text that will explain a lot of **** for example the purpose of my website, as well as how to edit the css files in my website to create a unique looking feel. This is a paragraph of text that will explain a lot of **** for example the purpose of my website, as well as how to edit the css files in my website to create a unique looking feel. This is a paragraph of text that will explain a lot of **** for example the purpose of my website, as well as how to edit the css files in my website to create a unique looking feel. </p>
<h1>Hey this is a title 2</h1>
<p>This is a paragraph of <b>text</b> that will explain a lot of **** for example the purpose of my website, as well as how to edit the css files in my website to create a unique looking feel. This is a paragraph of text that will explain a lot of **** for example the purpose of my website, as well as how to edit the css files in my website to create a unique looking feel. This is a paragraph of text that will explain a lot of **** for example the purpose of my website, as well as how to edit the css files in my website to create a unique looking feel. </p>
<p>This is a paragraph of text that will explain a lot of **** for example the purpose of my website, as well as how to edit the css files in my website to create a unique looking feel. This is a paragraph of text that will explain a lot of **** for example the purpose of my website, as well as how to edit the css files in my website to create a unique looking feel. This is a paragraph of text that will explain a lot of **** for example the purpose of my website, as well as how to edit the css files in my website to create a unique looking feel. </p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>

**luis23045** · 11-05-2009, 11:50 PM

Code:

body{

background-color: #fff;

 border: 3px solid #85A110;

  width: 760px;

  margin-top: 20px;

  margin-left: auto;

  margin-right: auto;

}

Look here is your first option. if you don't mind 9 pixels less on your template this is a quick fix.

1. Reduce the width of the template by 9. Original width: 760px. New width: 751px;

It seems that the green bar where the menu sits is a whole picture and not code lines are coming out from your CSS. I cannot see anything clear on the CSS, I just did a quick scan.

Code:

/*** Nav bar styles ***/

I can tell that you need to check after this line. You will need to add some extra css code.

Good luck

**boxiom** · 11-06-2009, 12:23 PM

luis, Ill try to quick fix out and see how it works, thanks!

and also, the green border around the menu isnt an image, its just a border:

Code:

ul.nav,
.nav ul{
    border: 1px solid #818f33;
}