No replies
dreamabstract
Offline
newbie
Last seen: 12 years 49 weeks ago
Joined: 2008-04-23
Posts: 9
Points: 0

Hi

Ive been trying to work with a 3 row layout using a fixed header and footer and while i've found good examples with a scrolling middle div, what i need is a middle div that vertically aligns the content it doesnt have to scroll i would just like the content to sit dead centre so on large screens it all balances perfectly.

This is the page i am working on http://www.dream-abstract.com/new/index.htm

I have included all the code below, any ideas?

The CSS so far:

/* -------------------------- BODY STYLES ---------------------------------- */
* {margin:0;padding:0;} 
html, body, #wrap {
	height: 100%;
	background-color: #000000;
}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 50px;}  /* must be same height as the footer */
#footer {
	position: relative;
	margin-top: -50px; /* negative value of footer height */
	height: 50px;
	clear:both;
	text-align: center;
} 
 
/* CLEAR FIX*/
.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
 
 
/* -------------------------- TEMPLATE & LAYOUT STYLES ---------------------------------- */
h1 { font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: normal; color:#CCCCCC;
}
h2 { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; color: #000000;
}
h2 a:link    {color:#660000; text-decoration:underline;}
h2 a:visited {color:#660000; text-decoration:underline;}
h2 a:hover   {color:#FF6600; text-decoration:none; cursor:pointer;}
h2 a:active  {color:#660000; text-decoration:underline;}
.ours { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; text-decoration: none; color:#999999;
        }			 
.ours a:link    {color:#999999; text-decoration:underline;}
.ours a:visited {color:#999999; text-decoration:underline;}
.ours a:hover   {color:#ffffff; text-decoration:underline; cursor:pointer; }
.ours a:active  {color:#999999; text-decoration:underline;
}
/* -------------------------------- TEXT STYLES ----------------------------------------- */
.maintxt { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #ffffff; line-height:130%;  }
.maintxt a:link    {color:#ffffff; text-decoration:underline;}
.maintxt a:visited {color:#ffffff; text-decoration:underline;}
.maintxt a:hover   {color:#CCCCCC; text-decoration:none; cursor:pointer;}
.maintxt a:active  {color:#ffffff; text-decoration:underline;
}
/* -------------------------------- FORM STYLES ----------------------------------------- */
 
.formfield {border: 1px solid #000000;}
/* -------------------------------- CSS LAYOUT STYLES ----------------------------------------- */
#container {
	height: auto;
	width: 990px;
	margin-right: auto;
	margin-left: auto;
}
#headerbox {
	height: 40px;
	width: 990px;
	text-align: center;
}
#mainbox {height:720px;text:align:center;margin-top:auto;margin-bottom:auto;}

and the html code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><!-- InstanceBegin template="/Templates/template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- InstanceBeginEditable name="title" -->
<title></title>
<meta name="keywords" content="">
<meta name="description" content="">
<!-- InstanceEndEditable -->
<script src="scripts/script.js" type="text/javascript"></script>
<link href="scripts/css.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/JavaScript" language="javascript" src="scripts/script.js"></script>
</head>
<body onLoad="MM_preloadImages('images/menu2_01.gif','images/menu2_02.gif','images/menu2_03.gif','images/menu2_04.gif','images/menu2_05.gif')">
<div id="wrap">
<div id="main" class="clearfix"><div id="container"><div id="headerbox"><!-- InstanceBeginEditable name="menu" --><a href="index.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/menu2_01.gif',1)"><img src="images/menu1_01.gif" alt="Dreamabstract: Photography, video and design in London and Bristol" name="Image2" border="0"></a><a href="photography.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/menu2_02.gif',1)"><img src="images/menu1_02.gif" alt="Photography, London and Bristol" name="Image3" border="0"></a><a href="video.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','images/menu2_03.gif',1)"><img src="images/menu1_03.gif" alt="Video Art, London and Bristol" name="Image4" border="0"></a><a href="design.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','images/menu2_04.gif',1)"><img src="images/menu1_04.gif" alt="Website Design, London and Bristol" name="Image5" border="0"></a><a href="contact.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','images/menu2_05.gif',1)"><img src="images/menu1_05.gif" alt="Contact Us" name="Image6" width="125" height="40" border="0"></a><!-- InstanceEndEditable --></div><div id="mainbox"><!-- InstanceBeginEditable name="main" --><script type="text/javascript" src="v3flashslideshow/slideshow.js"></script><!-- Begin XML Flash Slideshow v3 --><script type="text/javascript">
// <![CDATA[
XMLFlashSlideshow_v3({swf:'v3flashslideshow/slideshow.swf',w:'990',h:'660',redirect:'',usePreloader:'true',xml:'v3flashslideshow/home.xml',preventCache:'true',disableMultipleXML:'false',initXML:'%3C?xml%20version=%221.0%22%20encoding=%22utf-8%22?%3E%3Cslideshow%20version=%223%22%3E%0A%20%20%3Cstyles%3E%0A%20%20%20%20%3CPreloader%20label=%22Loading%20%7BN%7D%2525%22%20iconColor=%22#666666%22%20iconAlpha=%2270%22%20iconWidth=%2250%22/%3E%0A%20%20%20%20%3CPreloaderLabel%20font=%22Verdana%22%20size=%2210%22%20color=%22#666666%22%20bold=%22false%22/%3E%0A%20%20%20%20%3CBackground%20backgroundColor=%22#E4E4E4%22%20backgroundAlpha=%220%22%20bevelColor=%22#FFFFFF%22%20bevelStrength=%220%22%20borderWidth=%220%22%20borderColor=%22#FF6600%22/%3E%0A%20%20%20%20%3CLoaderAnimation%20type=%22circle%22%20color=%22#FFFFFF%22%20alphaBackground=%2220%22%20alphaInner=%2240%22%20frameWidth=%222%22%20width=%2250%22%20height=%2250%22/%3E%0A%20%20%20%20%3CDataLoader%20useAnimation=%22true%22%20useLabel=%22true%22%20labelPlacement=%22bottom%22%20fadeOutDuration=%22400%22%20textFormat=%22loader_text%22/%3E%0A%20%20%3C/styles%3E%0A%20%20%3Clocalization%3E%0A%20%20%20%20%3Ctext%20orig=%22Loading%20Data...%22%20local=%22Loading%20Data...%22/%3E%0A%20%20%3C/localization%3E%0A%20%20%3Cfonts%3E%0A%20%20%20%20%3Cfont%20id=%22loader_text%22%20name=%22Pixelade%22%20embed=%22true%22%20size=%2213%22%20color=%22#666666%22%20bold=%22false%22%20selectable=%22false%22%20align=%22left%22/%3E%0A%20%20%3C/fonts%3E%0A%3C/slideshow%3E'});
// ]]>
</script>
<!-- End XML Flash Slideshow v3 --><!-- InstanceEndEditable --></div></div>
</div>
 
</div>
 
<div id="footer"><span class="ours"><a href="index.htm" target="_self">Home</a> - <a href="info.htm" target="_self">Info</a> - <a href="photography.htm" target="_self">Photography London</a> - <a href="video.htm" target="_self">Video Art</a> - <a href="web-design.htm" target="_self">Web Design</a> - <a href="web-marketing.htm" target="_self">Web Marketing</a> - <a href="web-developement.htm" target="_self">Web Development</a> - <a href="contact.htm" target="_self">Contact</a> - <a href="friends.htm" target="_self">Friends</a><br>
All Content and Photos &copy; Dreamabstract 2009</span>08</div>
</body>
<!-- InstanceEnd --></html>