I am trying to get a layout that was previously done using tables, rewritten to properly utilize CSS.
The problem with this approach is that you are basically copying a table layout instead of starting from scratch using css. It is better to create a new design with different dynamics that suit css rather than tables.
Although your wireframe approach gives you an idea of the layout it misses out the most important part of the process which is content. Creating little blocks all over the place does not take into account what content you may have in those sections and in the end you end up squeezing content into little blocks when in fact its the content that should dictate how the end result should look - not the other way around.
In reality a mixture of those approaches is required but content should be the priority. Design without content is just a drawing - not a website.
Looking at your wireframe it is basically just 4 separate columns floated left. In each column you can stack as much stuff as you need so the icon nav is the first column; 1a and 2 a would be stacked in the second column; 1b and 2B would be stacked in the third column and so on. I would float the nav column to the left and then float a main column to the right. The main column would then hold your subheader and three more floated columns as mentioned above.
Where CSS will differ from tables is that the end of all those columns will be in a different place and not all automatically align at the bottom. If its a fixed with you can imitate this affect with background images (faux columns) and other clever tricks but the best approach is to design without needing these tricks if you can and just let the columns finish where they will. After all its the content that should dictate where things finish and not the design.
For ie8+ you could use the display:table properties and create the same equalising behaviour that tables have if this is a pre-requisite of your design.
Here's a quick mock up:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
p, h1, h2, h3, h4, h5, h6 {
margin:0 0 1em;
padding:5px;
}
#outer {
width:960px;
margin:auto;
border:1px solid #000;
background:#eee;/* left column colour*/
}
#header {
background:#fcf;
padding:1px 0;
border-bottom:1px solid #000;
}
#main {
float:right;
width:720px;
border-left:1px solid #000;/* slides on top of left nav border */
}
#sidebar {
float:left;
width:239px;
border-right:1px solid #000;/* slides on top of #main border */
margin:0 -1px 0 0;/* mmke border overlap #main t provide full length */
}
#sub {
background:red;
min-height:100px;
padding:1px 0;/* stop margin collapse */
}
.submain {
display:table;/* ie8+ only*/
width:100%;
}
.column {
display:table-cell;
table-layout:fxed;
padding:0 0 1px;
}
.col1 { background:#ffc }/* Full length column colours ie8+ */
.col2 {
background:#ffc000;/* Full length column colours ie8+ */
border-left:1px solid #000;
border-right:1px solid #000
}
.col3 { background:#feff00 }/* Full length column colours ie8+ */
.coltop1 {
padding:1px 0;
background:teal;
border-bottom:1px solid #000
}/* column top colurs*/
.coltop2 {
padding:1px 0;
background:blue;
border-bottom:1px solid #000
}/* column top colurs*/
.coltop3 {
padding:1px 0;
background:green;
border-bottom:1px solid #000
}/* column top colurs*/
#footer {
clear:both;
width:100%;
background:blue;
color:#fff;
padding:1px 0;
border-top:1px solid #000
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.column{float:left;width:239px}
</style>
<![endif]-->
</head>
<body>
<div id="outer">
<div id="header">
<h1>Header</h1>
</div>
<div id="main">
<div id="sub">
<h2>Subheader</h2>
</div>
<div class="submain">
<div class="column col1">
<div class="coltop1">
<p>column 1</p>
<p>column 1</p>
</div>
<p>Sub column content</p>
</div>
<div class="column col2">
<div class="coltop2">
<p>column 2</p>
<p>column 2</p>
<p>column 2</p>
<p>column 2</p>
</div>
<p>column 2</p>
<p>column 2</p>
<p>column 2</p>
<p>column 2</p>
</div>
<div class="column col3">
<div class="coltop3">
<p>column 3</p>
<p>column 3</p>
</div>
<p>column 3</p>
</div>
</div>
</div>
<div id="sidebar">
<h3>Sidebar</h3>
</div>
<div id="footer">
<p>footer</p>
</div>
</div>
</body>
</html>
IE7 and under just get normal columns but no equalising behaviour.
Reply With Quote
Originally Posted by GHicks
Bookmarks