Hello,

I am trying to scretch right and left my header and footer but as far as now it only scretch right.

#navigation {margin: -5px 0 0 10px; min-width: 100%; height: 120px; background-color:#655700; border-radius: 0; position: fixed; z-index:2;}

#footer {background: url(images/footer.jpg) repeat-x; background-color:#d08e38; height: 135px; min-width: 100%; position: absolute; margin: 100px 0 0 0;}

What else should I change to make it sretch both left and right?

Here is my page by the way: Web Page

I also try to compare it with: This Page.

I wonder why this page looks good in all browser screen size and mind doesn't.

sretch

What do you mean by this?

why this page looks good in all browser screen size

Because they are using responsive design. This relies on a grid system and a page that adapts when the browser is re-sized. Start by playing with CSS @media queries.

Yes. You need to have a css format, such as this.
its long, so copy and paste. Use the hash tagged words for what you want to use.

body {
font-family: verdana, arial, sans-serif;
background-color: F0E68C;
color: black;
}
h1 {text-decoration: underline;}
#navbar {
font-family: verdana, arial, sans-serif;
font-size: .9em;
}
#navbar ul {
list-style: none;
width:100%;
margin: 0;
padding: 0;
padding-top: 4px;
}

#navbar li { display: inline;}
#navbar li a:link, #navbar li a:visited{
text-decoration: none;
float:center;
width:15em;
padding:0.1em .5em 0.05em; 2em;
color: white;
background-color: #0000b7;
border-top: .15em solid silver;
border-left: .15em solid silver;
}

#navbar li a:hover {
float:center;
width:15em;
padding:0.1em .5em 0.05em; 2em;
color: white;
background-color: #000078;
border-top: .15em solid #000082;
border-bottom: .15em solid black;
border-right: .15em black;
}

#floatImageLeft {
float:left;
border:1px solid black;
margin:0px 15px 15px 0px;
padding: 15px;
text-align:center;
}
#floatImageCenter{
float:left;
border:1px solid black;
margin:0px 15px 15px 0px;
padding: 15px;
text-align:center;
}

#floatImageRight {
float:right;
border:1px solid black;
margin:0px 0px 15px 15px;
padding: 15px;
text-align:center;
}
commented: He hasn't asked for nav bar styles? He's sorting out positioning & screen sizes. Try to help him with HIS QUESTION, generally is a good idea. -1

if that worked, good, if not post again.

you can edit some of the commands such as
2.font-family: verdana, arial, sans-serif;
3.background-color: F0E68C;
42.#floatImageLeft(
43.float:left;
44.border:1px solid black;
45.margin:0px 15px 15px 0px;
46.padding: 15px;
47.text-align:center;

I do not understand what you are trying to do.

I copy your style.css to a new page and create this index.php

index.php

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>



<div id="navbar">Navigation</div>

</body>

</html>

All I see is a blank yellow page with a "Navigation" text on the left corner of the page.

I do not understand what you are trying to do.

I don't either.

Anyway, if you want to achieve the responsive technique on mobile devices, as I say you have to look at media queries (here and here).

okay, that's if you want a different items for different web browser size.

As of now, what I want is to see the header brown background color stretch left and right and the footer brown background color stretch left and right as well.

This is the code that I have so far:

style.css

#navigation {margin: -5px 0 0 10px; min-width: 100%; height: 120px; background-color:#655700; border-radius: 0; position: fixed; z-index:2;}

#footer {background: url(images/footer.jpg) repeat-x; background-color:#d08e38; height: 135px; min-width: 100%; position: absolute; margin: 100px 0 0 0;

Please help me to modify it to make it works.

This is my web: website

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.