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?
Jump to Postsretch
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
@mediaqueries.
Jump to PostI 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 (
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;
}
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.
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
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.