...

View Full Version : how would i do this?



roeyfreak10
03-07-2009, 05:18 AM
i want to make a page that looks like this http://i104.photobucket.com/albums/m184/COUTUREE_x3/example.jpg?t=1236402867
i know how to go about making the divs but how exactly do i get the space in between the divs while there within a container?

an example of page that i found similar to my image is this website

Drop Dead Clothing (http://shop.iheartdropdead.com/)

Fisher
03-07-2009, 05:53 AM
There would be many ways to do it. You could absolute positioning or float, etc.

Here's one example:

<!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>Untitled Document</title>
</head>
<style type="text/css">
body {
background:#000;
}
#container {
width:800px;
margin:0 auto;
}
#header {
width:800px;
height:100px;
background:#FFF;
}
#sidenav {
width:200px;
float:left;
height:500px;
background:#FFF;
margin-top:20px;
}
#maincontent {
float:right;
height:500px;
width:500px;
background:#FFF;
margin-top:20px;
}
</style>
<body>
<div id="container">
<div id="header">
<p>Header</p>
</div>
<div id="sidenav">
<p>sidenav</p>
</div>
<div id="maincontent">
<p>main content</p>
</div>
</div>
</body>
</html>

Kabuthunk
03-07-2009, 06:56 AM
For a design like that, I'd probably cheap out and use tables... but I'm lazy like that :P. I'd go with something along the lines of:



<br><br><table align="center" border="0" width="80%">
<tr>
<td align="center" colspan="3">header image or text or whatever, across the top</td></tr>
<td colspan="3" height="30"></td></tr>
<tr>
<td align="center" width="10%">Sidebar.<br>
Extend<br>
downwards<br>
however<br>
you want</td>
<td width="3%"></td>
<td align="center" width="87%">Main page thing</td></tr></table>


Again, there's probably about a million ways better to do this, but this is the first one that came to mind for me. And of course, the widths can be made a solid, unchanging number for everything there, or adjusted as needed. Course, it all depends on what you're using it for, too.

PitbullMean
03-07-2009, 07:00 AM
never use tables lol crazy bugger

Kabuthunk
03-07-2009, 07:04 AM
Like I said... lazy and cheaping out :P

abduraooft
03-07-2009, 07:41 AM
Like I said... lazy and cheaping out :PNever use tables for layout. See "Why tables for layout is stupid (http://www.hotdesign.com/seybold/)?" and some good CSS based layouts at http://www.bonrouge.com/2c-hf-fixed.php



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum