logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Closed Thread
 
Thread Tools Display Modes
Old 12-27-2009, 09:56 PM   #1
blimp
 
Join Date: Jun 2009
Posts: 113
Default Help needed with layout

I'm trying to attempt this layout but not 100% sure it's possible.

LAYOUT EXAMPLE:


The fullscreen background image will be done using the supersized 2.0 project.

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

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:


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:
Code:
<!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


Any suggestion...?

Last edited by blimp; 12-27-2009 at 10:16 PM..
blimp is offline  
Old 12-28-2009, 08:45 AM   #2
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

Please don't double post. Thread closed.
Corrosive is offline  
Closed Thread


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 11:29 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com