...

View Full Version : css coding problem



zoo_vault
11-15-2008, 06: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!

abduraooft
11-15-2008, 08:19 AM
Can we have a link? the above code(without images) is not enough to replicate the issue at your end.

zoo_vault
11-15-2008, 09:08 PM
sure, ill throw the images in it and upload it when i get home. thanks

zoo_vault
11-16-2008, 05:54 AM
my new hosting hasn't came through yet, so I just uploaded it to you.send.it, hope thats ok.


http://www.yousendit.com/download/Y2ovUWVuT2JvQnZIRGc9PQ

twodayslate
11-16-2008, 05:56 AM
my new hosting hasn't came through yet, so I just uploaded it to you.send.it, hope thats ok.


http://www.yousendit.com/download/Y2ovUWVuT2JvQnZIRGc9PQ
not too many people are going to download that...

zoo_vault
11-16-2008, 05:58 AM
where could i temporarily upload it until my hosting goes through?



edit: free hosting ftw! haha

here's the link

http://zoovault.110mb.com/

abduraooft
11-16-2008, 01:09 PM
I'd recommend you to put everything inside a wrapper div, say

<div id="wrapper">
...........
</div> and then set the required width(I think a 646px would be enough) for that. Now there is no need to apply a width for the other stretched elements. There by you will get a better control over the layout.

zoo_vault
11-16-2008, 10:20 PM
it works!

i set the width to 900 and the margins to auto, and it works great. i dont understand it completely, but it does the job haha.

Thanks alot! :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum