I have read about issues with a liquid layout like the banner image size e.g if the window size is very big and the image width is not as wide as the window size, there is some extra space.
I have made a header image with a width of 1400px and and a height of 150px. I want to know if it is good to have a header with a width like this. I made such a wide header after seeing some tutorials which said that it is good to have a wide image so that even if the monitor is very wide, there will be no space next to the header seen on the page. But I am not sure what is the best method. I want to know the opinion of my sitepoint friends. Is there an ideal size (width) for a header image?
I have given below, the code which I have used for my page with the header image of a width of 1400 px. The image spreads across the full width of my PC monitor.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Higher Education - UK</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="jpppr UK Guide Higher Studies" />
<meta name="keywords" content="UK guide higher studies ucas register apply clearing" />
<style type="text/css">
/* 3 col fluid layout CSS Document */
/* mac hide\\*/
html, body {
height:100%;
padding:0;
margin:0;
}
/* end hide*/
body {
background:#fff;
color: #000;
}
#outer {
margin:0 20%;
background:#fff;
border-left:1px solid #000000;
border-right:1px solid #000000;
color: #000000;
position:relative;
min-height:100%;
z-index:2;
}
* html #outer {
height:100%;
} /*IE treats height as min-height anyway*/
#inner {
width:100%;/*needed to fix ies bad handling of widths with percentages*/
}
#header {
background:blue url(images/skybackgroundheader.jpg) center no-repeat;
display:block;
border-top:1px solid #000;
border-bottom:1px solid #000;
color: #000000;
margin-left:-34%;
margin-right:-33.6%;
margin-bottom:-3px;
position:relative;
min-height:150px;
margin-bottom:-3px;
}
* html #header {
height:1px;
}
#left {
position:relative;/*ie needs this to show float */
width:32.5%;
float:left;
margin-left:-32.5%;/*must be same as width */
}
#right {
position:relative;/*ie needs this to show float */
width:32%;
float:right;
margin-right:-32%;/*must be same as width */
margin-left:1px;
}
#footer {
width:100%;
clear:both;
height:50px;
border-top:1px solid #000;
border-bottom:1px solid #000;
background:blue url(images/skybackgroundfooter.jpg);
color: #000000;
text-align:center;
margin-top:-52px;/* drag footer back into page*/
position:relative;
z-index:3;
}
* html #footer {/*only ie gets this style*/
\\height:52px;/* for ie5 */
he\\ight:50px;/* for ie6 */
}
#clearfooter {
clear:both;
height:52px;
}/*needed to make room for footer*/
h1, p {
margin:0 0 .5em;
padding:0 10px;
}
/* mac hide\\*/
* html #centrecontent {
height:1%;
}/* combat IE's 3 pixel jog */
/* end hide*/
/* safari and opera initial 100% height fix */
html >body #minHeight {
float:left;
width:0px;
height:100%;
margin-bottom:-52px;
}
</style>
</head>
<body>
<div id="minHeight"></div>
<div id="outer">
<div id="inner">
<div id="header">
<p> </p>
</div>
<div id="left">
<p>Left hand side content goes here</p>
</div>
<div id="right">
<p> </p>
</div>
<div id="centrecontent">
<!--centre content goes here -->
<
</div>
<div id="clearfooter"></div>
<!-- to clear footer -->
</div>
</div>
<!-- end outer div -->
<div id="footer">
<p>Site created by jppp - All rights reserved -
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
</p>
</div>
</body>
</html>