PDA

View Full Version : Help needed with layout


blimp
12-27-2009, 08:56 PM
I'm trying to attempt this layout but not 100% sure it's possible.

LAYOUT EXAMPLE:
http://img145.imageshack.us/img145/8180/image4ro.jpg

The fullscreen background image will be done using the supersized 2.0 project. (http://www.buildinternet.com/project/supersized/)

The orange bar at the bottom will act as the navigation bar.

I'd like this to always sit 40px from the bottom of the browser screen.

To do this, I've set the position value to absolute and set a placement value of 40px from the bottom.

If you resize your browser window, you'll notice the bar always remain 40px from the bottom of the browser window.

EXAMPLE HERE (http://blimpmedia.com.au/photodomainv3/)

I'd now like to add the text box and slideshow, but most importantly I'd like it to allways remain in the middle between the top of the nav bar and the browser window.

EXAMPLE:
http://img697.imageshack.us/img697/8139/image5aa.jpg

At this stage I've created <div id="wrapper"> and placed the left & right div within it. However I'm not sure how to make it sit within this area.

This is the code I've come up with so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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 {
margin: 0px;
}
#nav_bar{
height: 120px;
width: 100%;
background-color: #666;
position: absolute;
bottom: 40px;
}
#wrapper {
height: 400px;
width: 820px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
top: 20px;
}
#left {
float: left;
height: 400px;
width: 200px;
background-color: #F00;
}
#right {
float: right;
height: 400px;
width: 600px;
background-color: #00F;
}
</style>
</head>
<body>

<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
</div>

<div id="nav_bar"></div>

</body>
</html>


LIVE EXAMPLE (http://blimpmedia.com.au/photodomainv5/)


Any suggestion...?

Corrosive
12-28-2009, 07:45 AM
Please don't double post. Thread closed.