Navigation/paragraph not stretching to fit width of page

catkustes · 10-11-2012, 06:02 AM

Hey there!

How might I get the bottom background to extend the width of the page? It’s color ##BBFFFF

As well as top stagnant navigation to extend the width of the page

thanks!

LMK if you have any suggestions, here's my code...

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Sincerely Curious</title>
<head>
<style type="text/css">

body {background-color:white;}
p {color:#635149;}
p{font-family:"arial", Times, serif;}

div.ex
{
width:1200px;
padding:1px;
border:1px;
margin:0px;
background:#BBFFFF;
}

#navigation {
position: fixed;
top: 0;
width: 100%;
color: #ffffff;
height: 35px;
text-align: left;
padding-top: 15px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: #635149;
color: rgba(1, 1, 1, 0.8);
}
#navigation a {
font-size: 14px;
font-family: "baskerville";
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}

#navigation a:hover {
color: grey;
}
</style>
</head>
<header>
<header role="banner">
<br>
<br>
<br>
<div id="navigation">
<a href="default.asp">Facebook</a><a href="news.asp">Linked In</a></li><a href="contact.asp">Twitter</a><a href="about.asp">About</a>
</ul>
<br>
<br>
<br>
</header>
<body>
<center>
<br>
<br>
<br>
<br>
<br>
<br>
<center><img src="http://farm9.staticflickr.com/8315/8072531684_561cd9347f_m.jpg"</c>
<br>
<br>
<br>
<br>
<br>
<br>
<hr>
<div class="ex">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<p>
This should be an opening paragraph to my insatiable and unfortunately intangible love affair with curiosity.
<br>It should be sensible and not mention ninjas or my love of cute fluffy thang thangs.</br></p>

<p>
This should talk about my work. How I am a freak and actually like to work.
<br>How it’s really the only thing that matters to me because seriously, life sucks. Merp. This is just a joke, holla!</br>
</p>
<p>
In closing I should tell people that I can work limited freelance projects or give them high fives for cheap tricks.
<br>Hey, why not! It’s what the cool kids do! </br></div>
</p>
</body>

</footer>
</body>
</html>

SB65 · 10-11-2012, 09:11 AM

Remove the set width on .ex - since the div is a block element it will extend to take up the full width of the page without an explicit width.

Your top navigation doesn't uite take up the full width, dependent on the browser used, because of the default margin/padding that browsers apply to the body element. Reset this in your css by including this statement at the top of your css:

Code:

*{margin:0;padding:0}

This will reset the margin and padding for all elements, and you can then apply your own as required. This avoids difficulties caused by different browsers using different default values for margin and padding.

I see you're using the deprecated <center> tag. Investigate using css and text-align:center instead.