| repeat-y not tiling to 100% of vertical height
background-image |
blam
msg:4339334 | 3:11 am on Jul 14, 2011 (gmt 0) |
Ok, so I've been having a problem with my main layout where I'm attempting to create 1 large (eh, I guess 2 large) faux column so that my page content is always at a minimum 100% of the browser's vertical height. However, it's essentially not tiling and the layout is only as tall as their is acutual content (text/images) to fill it.
I actually have a TON of CSS and HTML code... and if I need to post it all I will... here's the pertinent code IMO
*{padding:0; margin:0;}
body {font-size:62.5%; font-family:verdana,arial,sans-serif;} /*Font-size: 1.0em = 10px when browser default size is 16px*/
.bg-container {background:rgb(4,8,19) url(../img/background_edges.jpg) repeat-y center;}
.page-container {width:900px; margin:0px auto; font-size:1.0em;}
.main {clear:both; width:900px; padding-bottom:30px; background:transparent url(../img/bg_main_withoutnav.jpg) repeat-y center;}
.main-left-nav {clear:both; width:900px; padding-bottom:30px; background:transparent url(../img/bg_main_withnav.jpg) repeat-y top left;}
.left-navigation {display:inline /*Fix IE floating margin bug*/; float:left; width:200px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}
.main-content {display:inline /*Fix IE floating margin bug*/; float:left; width:840px; margin:0 0 0 30px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}
.main-content-left-nav {display:inline; /*Fix IE floating margin bug*/; float:left; width:640px; margin:0 0 0 30px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}
.footer {clear:both; width:900px; padding:1.0em 0 1.0em 0; background:rgb(225,225,225) url(../img/bg_foot.jpg); font-size:1.0em; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} |
|
.bg-container effectively tiles an image that is the left and right images that border my main content
.main is my main content between my header and footer that tiles a very slim image to fill the content area.
.main-left-nav is used for pages that have lefthand navigation and contains a different image for the appropriate background coloring
Neither of them will tile 100%... my pages only have the height of whatever content is in them.
Here's all my clear classes for my floats:
.bg-container:after, .page-container:after, .header:after, .header-breadcrumbs:after, .main:after, .main-left-nav:after, .main-content:after, .main-content-left-nav:after, .left-navigation:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.column1-unit:after, .column2-unit-left:after, .column2-unit-right:after, .column3-unit-left:after, .column3-unit-middle:after, .column3-unit-right:after, .column4-unit-left:after, .column4-unit-middle-left:after, .column4-unit-middle-right:after, .column4-unit-right:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.footer:after, p:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clear-contentunit {clear:both; width:840px; height:0.1em; border:none; background:rgb(238, 238, 238); color:rgb(238, 238, 238);}
.clear-contentunit-left-nav {clear:both; width:640px; height:0.1em; border:none; background:rgb(238, 238, 238); color:rgb(238, 238, 238);} |
|
since the .main class is between my header and footer, here are those classes:
/* HEADER */
.header {width:900px; font-family:"trebuchet ms",arial,sans-serif;}
.header-middle {width:900px; height:150px; background:rgb(230,230,230) url(../img/banner2.jpg); overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}
.header-bottom {width:900px; height:40px; background:rgb(255,255,255) url(../img/bg_main_withoutnav.jpg) repeat-y;}
.header-breadcrumbs {clear:both; width:900px; padding:1.0em 0 1.5em 0; background:rgb(255,255,255) url(../img/bg_main_withoutnav.jpg) repeat-y;}
/* FOOTER */
.footer p {line-height:1.3em; text-align:center; color:rgb(125,125,125); font-weight:bold; font-size:110%;}
.footer p.credits {font-weight:normal;}
.footer a {text-decoration:underline; color:rgb(125,125,125);}
.footer a:hover {text-decoration:none; color:rgb(0,0,0);}
.footer a:visited {color:rgb(0,0,0);} |
|
any idea why neither background_edges.jpg nor bg_main_withoutnav.jpg tile to 100% of the vertical height?
thanks in advance,
Blam [edited by: alt131 at 8:13 pm (utc) on Jul 14, 2011]
[edit reason] Thread Tidy [/edit]
|
alt131
msg:4339675 | 8:29 pm on Jul 14, 2011 (gmt 0) |
Hi Blam, welcome to WebmasterWorld :) - and really appreciate you trying to avoid long code dumps. There is a bit of code (although not quite as bad as it can get ;)) and hopefully this is enough html to outline the layout.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>My title</title>
</head>
<!-- Global IE fix to avoid layout crash when single word size wider than column width -->
<!--[if IE]><style type="text/css"> body {word-wrap: break-word;}</style><![endif]-->
<body>
<!-- Background Edge Images Container -->
<div class="bg-container">
<!-- Main Page Container -->
<div class="page-container">
<!-- A. HEADER -->
<div class="header">
<!-- A.1 HEADER MIDDLE -->
<div class="header-middle"> </div>
<!-- A.2 HEADER BOTTOM -->
<div class="header-bottom">
<!-- Navigation Level 2 (Drop-down menus) -->
<div class="nav2">
<!-- Navigation item -->
<ul>
<li><a href="index.html">Home</a></li>
</ul>
<!-- Navigation item -->
<ul>
<li><a href="#">Practice</a></li>
</ul>
<!-- Navigation item -->
<ul>
<li><a href="#">Replays</a></li>
</ul>
<!-- Navigation item -->
<ul>
<li><a href="#">News</a></li>
</ul>
</div>
</div>
<!-- Breadcrumbs -->
<div class="header-breadcrumbs">
<ul>
<li><a href="/">Home</a></li>
<li>Guides</li>
<li>Suggestion</li>
</ul>
</div>
</div>
<!-- B. MAIN -->
<div class="main">
<!-- B.1 MAIN CONTENT -->
<div class="main-content">
<!-- Pagetitle -->
<h1 class="pagetitle">Suggestions</h1>
<!-- Content unit - One column -->
<div class="column1-unit">
<p>Thank you </p>
</div>
</div>
</div>
<!-- C. FOOTER AREA -->
<div class="footer"> </div>
</div>
</div>
</body>
</html>
|
|
Note the navigation is a horizontal drop-down, html and body both have 100% height.
|
blam
msg:4339751 | 11:33 pm on Jul 14, 2011 (gmt 0) |
Thanks for posting the HTML!
Correct, currently {height:100%;} applied to both html, and body, which would be an edit to the CSS code I provided above.
example link remains the same
I do very much appreciate anyones help!
blam
|
blam
msg:4339800 | 3:09 am on Jul 15, 2011 (gmt 0) |
Ok, so adding height:100% to .bg-container and .page-container has made it so that the BG image in .bg-container now fill to 100% of the screen at a minimum... so that's a plus
when I add height:100% to .main however it tiles the BG image there to 100% without accounting for the height of the header objects and the footer objects (I'm guessing) so it actually stretches the main content area well over 100% and the BG image does not tile (as it shouldn't) to keep up...
|
blam
msg:4339806 | 3:49 am on Jul 15, 2011 (gmt 0) |
I'm marking this SOLVED
I ditched my outter wrapper and called that BG image in the body class itself...2 wrappers was killing me... all is well...
|
|
|
