alexgallz
03 Feb 2010, 01:43 PM
hi guys
so here's my problem... im making this website right and this time it has to be 100% perfect. and so here is my problem:
ive got a different background images on both body and header. the header is my main problem. it consists of 2 divisions: one is set to fill in the screen(width:100%) and to define the background image. the other one is a static division which will simply contain the actual header(banner menu etc.) which is with a fixed width value(width:990px)
everything seems perfect untill i resize the window. then the following happens:
http://img46.imageshack.us/img46/4982/fkdissh1t.th.jpg (http://img46.imageshack.us/img46/4982/fkdissh1t.jpg)
the background image that i assigned to the header does not fill the window. how do i fix this thing? oh and here is the code:
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="content">
<div id="header">
<div id="header-inner">
<div id="upper-header">
<div id="clock">
<span><img src="images/clock.gif" alt="clock" /><?php echo date("D M j G:i:s T Y"); ?></span>
</div>
</div>
<!--<img src="images/lcs.png" alt="ls" />-->
</div>
</div>
<div id="center">
<div id="body">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
css:
/*---------------------------------------MAIN RULES---------------------*/
body {
margin:0;
padding:0;
background:url(images/background.jpg);
}
#content {
width:100%;
height:1000px;
}
#center {
width:990px;
margin:auto;
}
/*--------------------------HEADER-------------------------------------------*/
#header {
width:100%;
height:303px;
background:url(images/headerbg.jpg);
background-repeat:repeat-x;
}
#header-inner {
width:990px;
margin:auto;
}
#upper-header {
width:100%;
height:52px;
}
#clock {
width:270px;
margin-left:5px;
margin-top:2px;
float:left;
}
thanks guys
so here's my problem... im making this website right and this time it has to be 100% perfect. and so here is my problem:
ive got a different background images on both body and header. the header is my main problem. it consists of 2 divisions: one is set to fill in the screen(width:100%) and to define the background image. the other one is a static division which will simply contain the actual header(banner menu etc.) which is with a fixed width value(width:990px)
everything seems perfect untill i resize the window. then the following happens:
http://img46.imageshack.us/img46/4982/fkdissh1t.th.jpg (http://img46.imageshack.us/img46/4982/fkdissh1t.jpg)
the background image that i assigned to the header does not fill the window. how do i fix this thing? oh and here is the code:
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="content">
<div id="header">
<div id="header-inner">
<div id="upper-header">
<div id="clock">
<span><img src="images/clock.gif" alt="clock" /><?php echo date("D M j G:i:s T Y"); ?></span>
</div>
</div>
<!--<img src="images/lcs.png" alt="ls" />-->
</div>
</div>
<div id="center">
<div id="body">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
css:
/*---------------------------------------MAIN RULES---------------------*/
body {
margin:0;
padding:0;
background:url(images/background.jpg);
}
#content {
width:100%;
height:1000px;
}
#center {
width:990px;
margin:auto;
}
/*--------------------------HEADER-------------------------------------------*/
#header {
width:100%;
height:303px;
background:url(images/headerbg.jpg);
background-repeat:repeat-x;
}
#header-inner {
width:990px;
margin:auto;
}
#upper-header {
width:100%;
height:52px;
}
#clock {
width:270px;
margin-left:5px;
margin-top:2px;
float:left;
}
thanks guys