0

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?

3
Contributors
8
Replies
43
Views
2 Years
Discussion Span
Last Post by davy_yg
0

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.

1

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.

-1

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;
}
Votes + Comments
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

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;

0

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.

0

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).

0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.