Welcome to WebmasterWorld Guest from 54.146.248.111

Forum Moderators: not2easy

Message Too Old, No Replies

repeat-y not tiling to 100% of vertical height

background-image

     

blam

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

8:29 pm on Jul 14, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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

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

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

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...
 

Featured Threads

Hot Threads This Week

Hot Threads This Month