Review my Laout Please?

building_my_own_site · Joined: 19 Jan 2008 Posts: 7

Below is code for a layout I have tried to create using divs as much as possible as opposed to tables, and attempting to utilise css as much as possible.

As I am still pretty new to this I was wondering if somebody could comment on this - giving some constructive critisism and ensuring I do not start off with bad habits!

Many Thanks.

P.S. I have copied my html code, and also my css code below as I cannot see an option to attach, unfortunately, the tab spacing seems to have gone, but not the line breaks! To state the obvious - html code first!

Wink

I called the files "TestLayout.html" and "TestLayout.css" - an image 01.jpg is also required for this page - can be anythin I think!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="TestLayout.css" rel="stylesheet" type="text/css">
<title>Test Layout</title>
</head>
<body>
<div class="css01">
<div class="css02">
<a><img src="01.jpg"/></a>
</div>
<div class="css03">
<a><img src="02.jpg"/></a>
</div>
<div class="css04">
<h1>Test</h1>
<h2>Testing a Layout</h2>
</div>
</div>
<div class="css05">
<table width="100%">
<tr>
<td class="css06">
<a href="TestLayout.html">Home</a>
</td>
<td class="css06">
<a href="TestLayout.html">Option 1</a>
</td>
<td class="css06">
<a href="TestLayout.html">Option 2</a>
</td>
<td class="css06">
<a href="TestLayout.html">Option 3 has more text!</a>
</td>
<td class="css06">
<a href="TestLayout.html">Option 4</a>
</td>
<td class="css06">
<a href="TestLayout.html">Option 5</a>
</td>
<td class="css06">
<a href="TestLayout.html">Option 6</a>
</td>
</tr>
</table>
</div>
<div class="css05">
<div class="css07">
This will be a secondary options menu
</div>
<div class="css08">
This is for internal advertisements / links
</div>
<div class="css09">
Main Body For Web Site Here!
</div>
</div>
<div class="css10">
This is a simple footer.
</div>
</body>
</html>

.css01 {
background: #1D97C3;
padding: 0px 0px 0px 0px;
min-width: 800px;
}

.css02 {
background: #1D97C3;
height: 80px;
color: #ffffff;
float: left;
padding: 0px 0px 0px 0px;
width: 90px;
}
.css02 img{
height:80px;
}

.css03 {
background: #1D97C3;
height: 80px;
width: 90px;
color: #ffffff;
float: right;
padding: 0px 0px 0px 0px;
}

.css03 img{
height:80px;
}

.css04{
background: #1D97C3;
height: 100px;
color: #ffffff;
text-align: center;
/*NEED TO FIX TEXT TO AUTO-FIT SIZE*/
padding: 0px 0px 0px 0px;
margin-left: 100px;
margin-right: 100px;
min-width: 600px;
}

.css05 {
padding-top: 0px;
background: #ffffff;
color: #000000;
clear: both;
min-width: 800px;
max-width: 100%;
}

.css05 table{
table-layout: fixed;
}

.css06 {
background: #ff0000;
text-align: center;
float: left;
max-width: 13.5%;
min-width: 100px;
height: 40px;
border: 2px;
border-style: solid;
border-color: #ffffff;
}
.css06 a {
text-decoration: none;
vertical-align: centre;
color: #ffffff;
font-style: bold;
font-size: medium;
font-weight: 900;
}

.css07 {
float: left;
padding: 0px 10px 0px 0px;/*Top,Right,Bottom,Left*/
width: 90px;
}

.css08 {
float: right;
padding: 0px 0px 0px 10px;
width: 90px;
}

.css09 {
top: 10px;/*Positioning*/
margin-left: 100px;
margin-right: 100px;
}

.css10 {
padding-top: 10px;
text-align: center;
clear: both;/*Sets the sides of an element where other floating elements are not allowed {left,right,both,none}*/
min-width: 800px;
}

Corey Bryant · Posted: Sat Apr 26, 2008 1:37 pm

No, not to attach, but you should see a few buttons and one should say code.

You have