CSS Forum

**simster** · 07-20-2008, 08:00 AM

I am coding my websites layout and i cant perfect its first stage.

url to site http://simster.net76.net/

can someone fix my css code so it will work perfectly.

**Foundationflash** · 07-20-2008, 08:25 AM

Personally, I'd use one premade (to a certain extent) at http://blog.html.it/layoutgala/, but I have a look at you specific problem later.

**LadynRed** · 07-20-2008, 12:54 PM

First, fix your code by getting rid of the tables for layout.

You have an areamap that is NOT insde the <body> where it belongs.

**simster** · 07-20-2008, 04:19 PM

Im not using tables.

**wayfarer07** · 07-20-2008, 04:22 PM

Have you followed the link you gave? Lots of tables, and an areamap outside of the body. However, it appears that this is because your hosting company is reviewing your account and replaced your original code with something else. Is there another place you have it posted?

**simster** · 07-20-2008, 04:27 PM

im following my link to

http://simster.net76.net/

and I check my source code, and here it is

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout</title>
<style type="text/css">

html, body {
height: 99%;
}
#body { 
height: 99.9%;
width: 750px;
margin: 0px auto;
background-color:green;
overflow: hidden;
}

#header { 
height: 100px;
background-color:blue;
position:absolute;
top: 0px;
width: 750px;
}

#footer { 
height: 100px;
background-color:blue;
position:absolute;
bottom: -5px;
width: 750px;
}

#content { 
margin:0px;
margin-top: 90px;
margin-bottom: 200px;
height: 100%;
background-color:red;
}
</style>
</head>
<body>

<div id="body">
<div id="content">
content
</div>

<div id="header">
Header
</div>
<div id="footer">
Footer
</div>
</div>

</body>
</html>
<!-- www.000webhost.com Analytics Code -->
<script type="text/javascript">
var websiteID='simster.net76.net';
</script>
<script type="text/javascript" src="http://analytics.hosting24.com/s.php"></script>
<noscript>
<a href="http://www.hosting24.com/"><img src="http://analytics.hosting24.com/s.php?websiteID=simster.net76.net" alt="web hosting" /></a>
</noscript>
<!-- End Of Code -->

the only part of that code I didnt put in my page is the analytics code.

**wayfarer07** · 07-20-2008, 04:32 PM

That's not the code I'm getting. One of us is not getting propagated code. I'm receiving a message from your host saying that they've taken down your site temporarily to check it for malicious content. Maybe they do this for new accounts?

**wayfarer07** · 04:46 PM

Anyhow, I loaded the code you gave into a browser, and don't see anything out of place. Very simple, header, footer, content, although I would remove all that absolute positioning, since it simply serves no purpose and could cause trouble down the road.

To make a header, content, footer, all you need to do is place all three inside of a wrapper element, center the wrapper(if desired), then allow each of its children to naturally take its form. This way you don't need to set any widths on the children (#header, #content, and #footer), or center any of them, as they will automatically be as wide as all of the available space in the wrapper:

HTML Code:

<div id="wrapper">

<div id="header">
<!--some content-->
</div>
<div id="content">
<!--some more content-->
</div>
<div id="footer">
<!--and more content-->
 </div>

</div> <!--end of wrapper-->

**simster** · 07-21-2008, 02:05 AM

code is now

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout</title>
<style type="text/css">

html, body {
height: 100%;
padding:0px;
margin:0px;
}

#wrapper { 
height: 99.9%;
width: 750px;
margin: 0px auto;
background-color:green;
overflow: hidden;
}
#header { 
height: 100px;
background-color:blue;
top: 0px;
}

#footer { 
height: 100px;
background-color:blue;
position:absolute;
bottom: 0px;
width:inherit;
}

#content { 
margin:0px;
height: 100%;
background-color:red;
}




</style>
</head>
<body>

<div id="wrapper">

<div id="header">
Header
</div>
<div id="content">
Content
</div>
<div id="footer">
Footer
</div>

</div>

</body>
</html>
<!-- www.000webhost.com Analytics Code -->
<script type="text/javascript">
var websiteID='simster.net76.net';
</script>
<script type="text/javascript" src="http://analytics.hosting24.com/s.php"></script>
<noscript>
<a href="http://www.hosting24.com/"><img src="http://analytics.hosting24.com/s.php?websiteID=simster.net76.net" alt="web hosting" /></a>
</noscript>
<!-- End Of Code -->

how can i get the content div to have a scroll bar if there is too much content?

**MatrixIT** · 07-21-2008, 07:30 AM

Just a quick tip that might save time and space, you can actually group all of your margin values into one:

HTML Code:

margin:0 20px 3px 2px

For example. The first value of 0 is for the top margin, and then it just carries on clock-wise to right, bottom and left

**wayfarer07** · 07-21-2008, 03:51 PM

The normal way of getting content to scroll, is to set a height on it, then set the overflow to "auto", like this:
CSS

Code:

#content {
height: 400px;
overflow: auto;
}

**Foundationflash** · 07-21-2008, 05:45 PM

Quote:

Originally Posted by wayfarer07

That's not the code I'm getting. One of us is not getting propagated code. I'm receiving a message from your host saying that they've taken down your site temporarily to check it for malicious content. Maybe they do this for new accounts?

I'm getting the simple div design, no messages or whatever. Very simple, basic, but nothing wrong.