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.
I’d now like to add the text box and slideshow, but most importantly I’d like it to allways remain vertically centered between the top of the nav bar and the browser window.
EXAMPLE:
To do this I’ve added the text and slideshow box within a wrapper div. I then set the left and right margin values to AUTO so that it sits horizontally centered.
The part I don’t know how to do and am struggling with, is setting the wrapper div vertically centered between the top of the nav bar and the browser window (if this is even possible…?).
The best I’ve come up with so far is this:
<!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-left: auto;
}
#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>
Any suggestion…?
