CSS Forum

**boxiom** · 07:56 PM

I need my banner to fit PERFECTLY in my body container. The container element is set to be 760px wide so I made my banner 760px wide. But for some reason, my banner seems to enlarge the body container. (where all the content is).

I want my banner to touch the tip top of my body container (RIGHT where the green border is) and touch the sides perfectly. I want it to SNAP into space basically.

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: #033;
line-height: 50px;
padding: 0px;
}


b{
background-color: #CCC;
padding-top: 2px;
border-bottom: .5px white dotted;
}


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

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" />
<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>

[IMG]file:///C:/DOCUME%7E1/Chris/LOCALS%7E1/Temp/moz-screenshot-1.png[/IMG]

**bdg1115** · 11-04-2009, 10:26 PM

have you tried other browsers? Might be an IE thing.

**zelllibin** · 11-05-2009, 06:02 AM

try

img { border:0; margin:0; padding0; }

**Mad182** · 09:48 AM

It's caused by body { padding: 15px; } (see css box model)

And I advise you to use wrapper div around your content and leave body width unchanged.

**boxiom** · 11-05-2009, 12:36 PM

Thanks Mad, so take the padding off the body?

**Mad182** · 11-05-2009, 12:51 PM

Basically yes, but I think this would be a lot better: http://exs.lv/mad182/logosample/test.html

**boxiom** · 11-05-2009, 12:54 PM

Thanks! Looks much better, so the page will stretch with content?
Can you leave it up for a few more hours so I can grab the CSS when I get home?

**boxiom** · 11-05-2009, 04:32 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>