...

View Full Version : Header entire width



toonalmighty
04-11-2011, 02:58 AM
Hello,

I have a banner with text on it. The banner is x pixels high at the left of the page and y pixels high at the right of the page. I want to stretch this banner over the entire width of the browser, but I don't know how to do this so that the text on the banner keeps there proportions.

I have the following:



#Header{
position:absolute;
width:100%;
height:100px;
top:-15px;
}

But the banner loses all proportions. Any idea how to solve this?
Ideal would be if a piece at the middle of the banner could be stretched out, and leave the edges intact.

Im sorry if my question isn't clear or if it is ambiguous but English isn't my native language, so please ask for more information if this is the case.

Thank you very much.

fcvolunteer
04-11-2011, 04:52 AM
Posting your html might make it easier for us to see the problem.

toonalmighty
04-11-2011, 04:28 PM
Thank you for your reply

I got the following image:
http://img852.imageshack.us/i/headerqd.jpg/

This is my code:



<div id="container">
<div id="Header"><img src="images/header.gif" alt="Header"></div>
<div id="body"><img src="images/body.gif" width="1020" height="894" alt="Body"></div>
<div id="footer"><img src="images/footer" width="1020" height="261" alt="Footer"></div>
</div>

#Header{
position:absolute;
width:100%;
height:100px;
top:-15px;
}


But now the header got stretched, something I don't want.
If possible I want the logo part at the left of the screen, the menu on the right part of the screen, and the middle to be stretched the entire width.

teedoff
04-11-2011, 04:37 PM
Post ALL your html and css!

toonalmighty
04-11-2011, 05:03 PM
Well, this is everything I have at the moment.
I was wondering how to solve this problem, so I started a new project from there.



<html>
<head>
<title>template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="StyleSheet.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (template.psd) -->
<div id="container">
<div><img src="images/template_01.gif" width="100%" height="245"></div>
<div id="body"><img src="images/template_02.gif" width="1020" height="894" alt="Body"></div>
<div id="footer"><img src="images/template_03.gif" width="1020" height="261"></div>
</div>

<!-- End Save for Web Slices -->
</body>
</html>


CSS:

#Header{
position:absolute;
width:100%;
height:100px;
top:-15px;
}

.content{
background-color:#FFF;

color:#000;
padding-top:25px;
padding-bottom:25px;
padding-left:50px;
padding-right:50px;
text-transform:none;
font:Helvetica;
font-size:12px;
font-style:normal;
margin-left:auto;
margin-right:auto;

}

.titel{
font-size:21px;
font-style:oblique;
padding-bottom:15px;
color:#000;
}

.subtitel{
font-size:18px;
font-style:normal;
color:#000;
}

.background{
background-color:#f6f6f6;
margin-left:auto;
margin-right:auto;
}

.mainPage{
width: 1024;
margin-left:auto;
margin-right:auto;
}

sbhardwaj
04-11-2011, 05:14 PM
An easy way might be to change header text into an image and make width 100% (don't specify height and it should adjust proportionately (but then you will also have to keep height of the containing div as unspecified.)

If the img starts going beyond the page, try 99%.

teedoff
04-11-2011, 05:19 PM
<div><img src="images/template_01.gif" width="100%" height="245"></div>


Is this your header?

If so, it's contained within another element(div). So the 100% is only going to stretch as wide as the containing div is. So basically, to get a header to stretch the full width of the viewport, move it outside any containing div.


<body>
<div id="Header">Your Header</div>
<div id="container">Page content here.</div>
Also, you're stying a div with an id of Header, but I dont see any div in your markup with an id of Header.

You also style many other classes of divs, while your markup containes no such divs.

I would recommend learning some basic html (http://www.w3schools.com) and css so that you can get a standard div layout and page structure up and running.

btw: you should also use a valid doctype for every page.

wmtipton
04-11-2011, 10:54 PM
#Header{
position:fixed;
top:0px;
height:100px;
left:0px;
right:0px;
}
Ive used this before to make a stretchy header. The image will stretch too. Youd have to make it a background image to not stretch.


#Header {position:fixed;
position:absolute;
top:0px;
height:100px;
left:0px;
right:0px;
background: url(image.jpg) fixed center;
z-index:-1;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum