Fri, 2009-04-17 10:06
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 © Dreamabstract 2009</span>08</div> </body> <!-- InstanceEnd --></html>
