...

View Full Version : CSS Design Help??



DarkLightA
03-03-2009, 09:27 PM
I attempted use CSS to layout a basic site.

Unfortunately, it didn't quite work out. It works for IE, but not for Chrome and Opera. (Haven't tried FF)

Can someone tell me where I went wrong? This is what I want it to look like (and it looks like in IE):
http://img4.imageshack.us/my.php?image=websiteie.jpg (URL: http://img4.imageshack.us/my.php?image=websiteie.jpg)

But in Chrome and Opera, it's like this:
http://img401.imageshack.us/my.php?image=websiteoc.jpg (URL: http://img401.imageshack.us/my.php?image=websiteoc.jpg

As you can see, the spaces between #colleft, #colmain and #colright get closed, and the footer gets shoved up.

The HTML code for the site is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/strict.dtd">

<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="stylesheet2.css" />
</head>

<body>
<div id="entpage"> <!-- entire page -->

<div id="header">
<h1>My Website</h1>
</div> <!-- header -->


<div id="vmiddle"> <!-- middle. menu, body, right column. -->
<div id="colleft">
<div class="spaceout">
<h2><strong>Menu</strong></h2>
<ul>
<li>About Me</li>
<li>Things</li>
<li>Blog</li>
<li>>Other</li>
</ul>
</div> <!-- spaceout -->
</div> <!-- menu, column left -->

<div id="colmain">
<div class="spaceout">
<h1>Welcome to my website!</h1>
<p>This page is still under construction. Hopefully it will soon be finished :)<br />
Until then you'll just have to wait.</p>

</div> <!-- spaceout -->
</div> <!-- body paragraphs, info -->

<div id="colright">
<div class="spaceout">
<p>This is just for stuff, like ads and other</p>
</div>
</div> <!-- right column -->
</div> <!-- vmiddle -->

<!-- This is the part that gets 'shoved up' into the rest of the page --><div id="footer">
<div class="spaceout">
<p>&copy; Me 2009. This page is entirely coded by me using XHTML and CSS.</p>
</div> <!-- spaceout -->
</div> <!-- footer -->
</div> <!-- entpage -->
</body>
</html>


and the CSS code is:



/******* Start Layout *******/

body {
font-size: 62.5%;
background: #000000;
font-family: Arial, Helvetica, sans-serif;
}

#entpage {
background: transparent;
margin: 3em 3% 2em 3%;
}

#header {
margin: 0 0 2em 0;
background-color: #006400;
width: 100%;
}

#header h1 {
padding: 2em 0 2em 30%;
color: #AA0000;
background-color: #006400;
}

#vmiddle {
margin: 0 0 1em 0;
background-color: transparent;
height: auto;
width: 100%;
}

#colleft {
float: left;
width: 17%;
height: auto;
background-color: #006400;
}

#colmain {
float: left;
width: 60%;
height: auto;
margin: 0 2.5%;
background-color: #006400;
}

#colright {
float: right;
width: 17%;
height: auto;
background-color: #006400;
}

#footer {
background-color: #006400;
height: auto;
width: 100%;
}

.spaceout {
margin: 2em 2em;
}

/******* End Layout *********/

/******* Start Text *********/

p {
font-size: 1.6em;
}

h1 {
font-size: 2.8em;
}

h2 {
font-size: 2.4em;
}

li {
font-size: 1.6em;
}
/******* End Text ***********/


Thanks in advance.
DarkLightA

Excavator
03-03-2009, 11:29 PM
Hello DarkLightA,
That looks pretty good really. I cleaned up some unnecessary styles in your CSS and clear the floats in #vmiddle. Read about clearing floats here (http://www.quirksmode.org/css/clearing.html).

I also added charachter encoding and the universal reset.

<!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></title>
<style type="text/css">
body {
background: #000000;
font: 62.5% Arial, Helvetica, sans-serif;
}
* {
margin: 0;
padding: 0;
border: none;
}
#entpage {
background: transparent;
margin: 3em 3% 2em 3%;
}
#header {
margin: 0 0 2em 0;
background: #006400;
}
#header h1 {
padding: 2em 0 2em 30%;
color: #AA0000;
background: #006400;
}
#vmiddle {
margin: 0 0 1em 0;
background: transparent;
overflow: auto; /*to clear the floats*/
}
#colleft {
float: left;
width: 17%;
background: #006400;
}
#colmain {
float: left;
width: 60%;
margin: 0 2.5%;
background: #006400;
}
#colright {
float: right;
width: 17%;
background: #006400;
}
#footer {
background: #006400;
clear: both;
width: 100%;
}
.spaceout {
margin: 2em 2em;
}
/******* Start Text *********/
p {
font-size: 1.6em;
}
h1 {
font-size: 2.8em;
}
h2 {
font-size: 2.4em;
}
li {
font-size: 1.6em;
}
</style>
</head>
<body>
<div id="entpage"> <!-- entire page -->
<div id="header">
<h1>My Website</h1>
</div> <!-- header -->
<div id="vmiddle"> <!-- middle. menu, body, right column. -->
<div id="colleft">
<div class="spaceout">
<h2><strong>Menu</strong></h2>
<ul>
<li>About Me</li>
<li>Things</li>
<li>Blog</li>
<li>>Other</li>
</ul>
</div> <!-- spaceout -->
</div> <!-- menu, column left -->
<div id="colmain">
<div class="spaceout">
<h1>Welcome to my website!</h1>
<p>This page is still under construction. Hopefully it will soon be finished :)<br />
Until then you'll just have to wait.</p>
</div> <!-- spaceout -->
</div> <!-- body paragraphs, info -->
<div id="colright">
<div class="spaceout">
<p>This is just for stuff, like ads and other</p>
</div>
</div> <!-- right column -->
</div> <!-- vmiddle -->
<!-- This is the part that gets 'shoved up' into the rest of the page --><div id="footer">
<div class="spaceout">
<p>&copy; Me 2009. This page is entirely coded by me using XHTML and CSS.</p>
</div> <!-- spaceout -->
</div> <!-- footer -->
</div> <!-- entpage -->
</body>
</html>

DarkLightA
03-04-2009, 04:24 PM
Thanks a lot!

I find it really annoying how if you mess up on one single character, the entire thing messes up :(

Anyway, I'll just have to get better :)

Thanks again for helping me,
DarkLightA



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum