...

View Full Version : Help working out the best method of laying out this page section?



kyllle
05-14-2011, 07:37 PM
Hi all,

My minds drawing a blank on the best way to possibly lay out the design ive attached to this post, can this be achieved using <dl> or <ul> tags or would there have to be divs etc?

All suggestions appreciated

Here's the link (http://www.flickr.com/photos/62570778@N04/5719672246/in/photostream/)

Kyle

bullant
05-15-2011, 02:21 AM
That looks like a "standard" Header, 2 columns, footer layout.

Maybe use this skeleton layout of the above as a guide.


<!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">
#wrapper {
width: 900px;
margin: 0px auto 0px auto;
border: 1px solid red;
height: auto;
}
#header {
border: 1px solid blue;
}
#content {
width: 70%;
float: left;
}
#content .gutter {
margin: 0px 0px 0px 0px;
padding: 20px 20px 20px 20px;
}
#sidebar {
width: 30%;
float: right;
}
#sidebar .gutter {
margin: 0px 0px 0px 0px;
padding: 20px 20px 20px 20px;
border: 1px solid green;
}
#footer {
clear: both;
border: 1px solid black;
}
</style>
<script type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>HEADER and NAVIGATION BAR</h1>
</div>
<div id="content">
<div class="gutter"> <!-- to set constant gutter around the content -->
<h1>LEFT MAIN CONTENT COLUMN</h1>
</div>
</div>
<div id="sidebar">
<div class="gutter"> <!-- to set constant gutter around the content -->
<h1>RIGHT SIDE BAR COLUMN</h1>
</div>
</div>
<div id="footer">
<h1>FOOTER BAR</h1>
</div>
</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum