zoo_vault
11-15-2008, 05:58 AM
I am trying to code a new layout and am having some problems with it. When the window is maximized the layout looks great, but when I resize the window smaller, and it gets smaller than the 'logo' div, the layout gets out of whack. The content div and menu start moving, but the background header image stays the same. I've tried all kinds of stuff to try and fix it, but I just cant get it right for some reason. If anyone can help me out, it would be MUCH appreciated.
Here's the html code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<Link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="logo">
</div>
<div id="page" >
<div id="menu">
<ul>
<li><a href="Link.html" title="Link">Link</a></li>
<li><a href="Link.html" title="Link">Link</a></li>
<li><a href="Link.html" title="Link">Link</a></li>
<li><a href="Link.html" title="Link">Link</a></li>
</ul>
</div>
<div id="content"><h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc diam. Nullam at sem. Vivamus faucibus pede vitae ligula. Curabitur accumsan blandit lacus. Morbi tortor magna, tincidunt ac, vulputate at, rhoncus eu, risus. Pellentesque dignissim diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed lectus. Etiam erat.
<br />
<br />
Nullam vehicula ante sit amet pede. Vestibulum sapien orci, dictum id, imperdiet sed, bibendum vitae, eros. Vestibulum molestie. Integer varius justo mattis magna. Curabitur ullamcorper, nulla id interdum tempor, massa velit eleifend nisl, eget iaculis ligula turpis vitae felis. Donec sagittis rutrum augue. Fusce eu felis pellentesque diam tincidunt auctor. In rutrum aliquet nulla. Nunc mattis. Morbi dictum tincidunt felis.
</h1><br />
<br />
<br />
<!-- end #page -->
</div>
<div class="style9" id="footer"><br />
</div>
</body>
</html>
and the css code:
* {
margin: 0;
padding: 0;
}
body {
margin: 0 0;
background: #ffffff url(images/img01.gif) repeat-x;
font: normal 13px Arial, verdana, sans-serif;
color: #000000;
}
h1, h2, h3 {
color: #ffffff;
}
h1 {
margin: 0;
padding: 0;
font: 12px "verdana", Times, serif;
color: #292929;
letter-spacing: .25px;
line-height: 2.4em;
}
h2 {
font: 10px "verdana", Times, serif;
font-size: 100%;
color: #4f5977;
letter-spacing: 0px;
}
h3 {
margin-bottom: 1em;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 77%;
font-weight: bold;
}
ol {
list-style-position: inside;
}
ul {
list-style: none;
}
ul li {
padding-left: 20px;
background: url(images/img09.gif) no-repeat left center;
}
a {
text-decoration: none;
color: #2d57b3;
}
a:hover {
text-decoration: none;
color: #000000;
}
/* Logo */
#logo {
width: 900px;
height: 545px;
margin: 0 auto;
padding: 0;
background: url(images/header.jpg) no-repeat;
}
#logo a {
text-decoration: none;
color: #000000;
}
/* Page */
#page {
width: 676px;
margin: 0 auto;
background: url(images/textbg.jpg) repeat-y;
}
/* Content */
#content {
width: 646px;
margin: -160px 0 0 0 ;
padding: 15px;
background: url(images/textbg.jpg) no-repeat;
}
#content .content {
padding: 0px 0px 0px 0;
}
#welcome {
float: left;
margin: 12px 0 0px 30px;
width: 392px;
height: 27px;
text-align: center;
background: url(images/welcome.gif) no-repeat 0 0
}
/*- Menu --------------------------- */
#menu {
font: 14px "verdana", Times, serif;
list-style-type: none;
float: right;
width: 142px;
border-style: none;
border-color: #34415a;
margin: -255px 44px 0px 0px;
}
#menu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu li a:link, #menu li a:visited {
color: #34415a;
display: block;
background: url(images/menu1.gif);
padding: 8px 0 0 10px;
}
#menu li a:hover {
color: #dce0e6;
background: url(images/menu1.gif) 0 -32px;
padding: 8px 0 0 10px;
}
#menu li a:active {
color: #53668f;
background: url(images/menu1.gif) 0 -64px;
padding: 8px 0 0 10px;
}
/*- End Menu --------------------------- */
/* Footer */
#footer {
width: 676px;
height: 105px;
margin: 0 auto;
background: url(images/footer.gif) no-repeat;
}
#footer p {
font: 10px "verdana", Times, serif;
font-size: 100%;
color: #4f5977;
letter-spacing: 0px;
margin: -25px 4px;
font-size: 85%;
}
#footer .legal {
float: right;
margin: 45px 4px;
color: #444444;
}
#footer a {
color: #444444;
}
#footer a:hover {
color: #4f5977;
}
Thanks!
Here's the html code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<Link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="logo">
</div>
<div id="page" >
<div id="menu">
<ul>
<li><a href="Link.html" title="Link">Link</a></li>
<li><a href="Link.html" title="Link">Link</a></li>
<li><a href="Link.html" title="Link">Link</a></li>
<li><a href="Link.html" title="Link">Link</a></li>
</ul>
</div>
<div id="content"><h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc diam. Nullam at sem. Vivamus faucibus pede vitae ligula. Curabitur accumsan blandit lacus. Morbi tortor magna, tincidunt ac, vulputate at, rhoncus eu, risus. Pellentesque dignissim diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed lectus. Etiam erat.
<br />
<br />
Nullam vehicula ante sit amet pede. Vestibulum sapien orci, dictum id, imperdiet sed, bibendum vitae, eros. Vestibulum molestie. Integer varius justo mattis magna. Curabitur ullamcorper, nulla id interdum tempor, massa velit eleifend nisl, eget iaculis ligula turpis vitae felis. Donec sagittis rutrum augue. Fusce eu felis pellentesque diam tincidunt auctor. In rutrum aliquet nulla. Nunc mattis. Morbi dictum tincidunt felis.
</h1><br />
<br />
<br />
<!-- end #page -->
</div>
<div class="style9" id="footer"><br />
</div>
</body>
</html>
and the css code:
* {
margin: 0;
padding: 0;
}
body {
margin: 0 0;
background: #ffffff url(images/img01.gif) repeat-x;
font: normal 13px Arial, verdana, sans-serif;
color: #000000;
}
h1, h2, h3 {
color: #ffffff;
}
h1 {
margin: 0;
padding: 0;
font: 12px "verdana", Times, serif;
color: #292929;
letter-spacing: .25px;
line-height: 2.4em;
}
h2 {
font: 10px "verdana", Times, serif;
font-size: 100%;
color: #4f5977;
letter-spacing: 0px;
}
h3 {
margin-bottom: 1em;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 77%;
font-weight: bold;
}
ol {
list-style-position: inside;
}
ul {
list-style: none;
}
ul li {
padding-left: 20px;
background: url(images/img09.gif) no-repeat left center;
}
a {
text-decoration: none;
color: #2d57b3;
}
a:hover {
text-decoration: none;
color: #000000;
}
/* Logo */
#logo {
width: 900px;
height: 545px;
margin: 0 auto;
padding: 0;
background: url(images/header.jpg) no-repeat;
}
#logo a {
text-decoration: none;
color: #000000;
}
/* Page */
#page {
width: 676px;
margin: 0 auto;
background: url(images/textbg.jpg) repeat-y;
}
/* Content */
#content {
width: 646px;
margin: -160px 0 0 0 ;
padding: 15px;
background: url(images/textbg.jpg) no-repeat;
}
#content .content {
padding: 0px 0px 0px 0;
}
#welcome {
float: left;
margin: 12px 0 0px 30px;
width: 392px;
height: 27px;
text-align: center;
background: url(images/welcome.gif) no-repeat 0 0
}
/*- Menu --------------------------- */
#menu {
font: 14px "verdana", Times, serif;
list-style-type: none;
float: right;
width: 142px;
border-style: none;
border-color: #34415a;
margin: -255px 44px 0px 0px;
}
#menu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu li a:link, #menu li a:visited {
color: #34415a;
display: block;
background: url(images/menu1.gif);
padding: 8px 0 0 10px;
}
#menu li a:hover {
color: #dce0e6;
background: url(images/menu1.gif) 0 -32px;
padding: 8px 0 0 10px;
}
#menu li a:active {
color: #53668f;
background: url(images/menu1.gif) 0 -64px;
padding: 8px 0 0 10px;
}
/*- End Menu --------------------------- */
/* Footer */
#footer {
width: 676px;
height: 105px;
margin: 0 auto;
background: url(images/footer.gif) no-repeat;
}
#footer p {
font: 10px "verdana", Times, serif;
font-size: 100%;
color: #4f5977;
letter-spacing: 0px;
margin: -25px 4px;
font-size: 85%;
}
#footer .legal {
float: right;
margin: 45px 4px;
color: #444444;
}
#footer a {
color: #444444;
}
#footer a:hover {
color: #4f5977;
}
Thanks!