views:

498

answers:

3

Hello,

I have a basic page layout, and wanted to arrange information in columns.

I have managed to do this, but I feel I have done this n a very poor way.

I have made a layer and style called leftlayer, which floats to the left. Then 2 layers with a style called leftlayer2 which also floats to the left, to preserve the order I wanted for the information. Then a layer called rightlayer, which floats to the right.

Should I instead use a table, or put everything in seperate layers? What is the best approach?

My code:

<html>
<head>
<title>Test page</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<div id="Layer0">
<div id="Layer1" class="Layer1">
<h3 align="left">A menu</h3>
<div align="left">
<ul class="BLUE">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
</ul>
</div>
</div>
<div id="Layer2">
<h1>Artcile heading</h1>
<div id="leftlayer" class="leftlayer">
<p><strong>Random info 1: </strong>blah
</p>
<p><strong>Random info 2: </strong>blah blah
</p>
<p><strong>Random info 3: </strong>anything
</p>
<p><strong>Random info 4: </strong>more text
16:46:29 </p>
<p><strong>Random info 5: </strong>and so on
</p>
<p><strong>Random info 6: </strong>such as
</p>
<p><strong>Random info 7: </strong>sport
</p>
</div>
<div class="leftlayer2">
<p><strong>Random info 1: </strong>blah
</p>
<p><strong>Random info 2: </strong>blah blah
</p>
<p><strong>Random info 3: </strong>anything
</p>
<p><strong>Random info 4: </strong>more text
16:46:29 </p>
<p><strong>Random info 5: </strong>and so on
</p>
<p><strong>Random info 6: </strong>such as
</p>
<p><strong>Random info 7: </strong>sport
</p>
</div>
<div class="leftlayer2">
<p><strong>Random info 1: </strong>blah
</p>
<p><strong>Random info 2: </strong>blah blah
</p>
<p><strong>Random info 3: </strong>anything
</p>
<p><strong>Random info 4: </strong>more text
16:46:29 </p>
<p><strong>Random info 5: </strong>and so on
</p>
<p><strong>Random info 6: </strong>such as
</p>
<p><strong>Random info 7: </strong>sport
</p>
<form name="testForm">
<p><input name="radiobutton" value="test1" type="radio">Test</p>
<p><input name="radiobutton" value="test2" type="radio">test</p>
<p><input name="radiobutton" value="test3" type="radio">Test</p>
<p><input name="radiobutton" value="test4" type="radio">test</p>
<input name="Submit" value="Update" type="submit">
</form>
</div>
<div id="rightlayer">
<a href="#">
<img src="img.jpg" height="300" width="199">
</a>
<p>
<a href="#">Click for full description </a>
</p>
<p><a href="#">DELETE</a>
</p>
</div>
<div id="Layer3">
<h1>A list of records</h1>
<table border="0" width="85%">
<tbody>
<tr>
<td width="15%"><strong>Column 1</strong></td>
<td width="10%"><strong>Column 2</strong></td>
<td width="65%"><strong>Column 3</strong></td>
<td width="10%"><strong>Column 4</strong></td>
</tr>
<tr id="article_250405322811">
<td><a href="#">Some info</a></td>
<td><a href="#">more info</a></td>
<td><a href="#">Even more info</a></td>
<td>No more info</td>
</tr>
</tbody>
</table>
</div>
<div id="tablefooter" class="tablefooter">
<div id="tablefooterleft" class="tablefooterleft"><a href="#">&lt;&lt;-First</a>
<a href="#" onclick="updateByPage('Layer3', 'Hardy', '1')">&lt;-Previous</a>
-----------------------------------------------------------------
<a href="#" onclick="updateByPage('Layer3', 'Hardy', '2')">Next -&gt; </a>
<a href="#" onclick="updateByPage('Layer3', 'Hardy', '7')"> Last-&gt;&gt;</a>
</div>
</div>
</div>
</div>
</body>
</html>

The css:

#Layer0 {
  width: 100%;
  height: 100%;
}

body{
margin:10px 10px 0px 10px;
padding:0px;
color:#999999;
font-family:"Trebuchet MS",arial,sans-serif;
font-size:70.5%;

}

#Layer2 {
background:#fff;
color:#000;
voice-family: "\"}\"";
voice-family: inherit;
padding:20px;

}

#Layer2 p {color:#888;}

#Layer2 a, a:link { color:#006633; text-decoration: none;}

#Layer2 a:hover, a:active{ color:#FF6666; text-decoration: none;}

html>body #Layer2 {
}

p,h1,pre {
margin:0px 10px 10px 10px;
font:Arial, Helvetica, sans-serif;
font-size:12px;
line-height: 1.6em;
text-align:justify;
text-decoration:none;
}

h1 {
font-size:2.5em;
text-align: center;
color:#ccc;
padding-top:15px;

}

h3 {
font-size:14px;
color:#999;

}

.leftlayer {
  float: left;
  left: 20%;
  width: 20%;
  height: 100%;
  margin-right: 10%;
}
.leftlayer strong {
  text-align: left;
}
.leftlayer2 {
  float: left;
  width: 20%;
  height: 100%;
  margin-left: 2%;
}
#rightlayer {
  float: left;
}
#Layer3 {
  float: bottom;
}
+3  A: 

No, you shouldn't use a table! < div > tags are the right way to do layouts!

Read about CSS column layouts on the internet:

Against frequent suggestions I don't recommend CSS grids either.

Plus:

  • you're missing your body tag
  • you should indent your code, it's hard to read like that
tharkun
+2  A: 

Stick to <div> approach for layout stuff, but display regular tabular data (like records from a table) using the <table> tag (that's exactly why this tag was introduced in the first place).

To master the div-based layout tricks you need to better understand CSS positioning model.

SeasonedCoder
A: 

The best way to present information in multiple columns, in my opinion, is using a grids framework, like Blueprint CSS.

(Tables are a no-no. Go with div's + CSS)

Blueprint (and other similar frameworks) are

  • very easy to use
  • allow you to very easily create/adjust any number of columns you want
  • work across all browsers (including IE6)
  • allow you to do very complex grid layouts as well with ease (creating a simple 2 or 3-columnar is still very easy)

The way I see it, hand-coded layouts -- though they work fine -- don't scale well and often require significant redesign when you're trying to add additional layout elements. Layouts with grid frameworks are rather easy to maintain, and you can be up and running in no time (for all kinds of layouts, simple and complex). Give it a try :)

Nocturne