SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member dcordes's Avatar
    Join Date
    Mar 2004
    Location
    St. Louis, MO
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background Image Inside Float Problem

    I've got a 3 column site I'm building and am running into issues trying to get the background images to tile to the bottom of the column nearest to the bottom of the page. I'm currently using IE6 and Firefox 1.0 as my test browsers.

    http://dev.truckdriver.com/index2_css.cfm

    Code:
    body {
    	margin: 0;
    	padding: 0;
    	background: #013B61;
    	color: #000;
    	font-family: Tahoma, Arial, Helvetica;
    	font-size: 11px;
    }
    td, div, span, p {
    	font-family: Tahoma, Arial, Helvetica;
    	font-size: 11px;
    }
    #container {
    	margin: 0;
    	padding: 0;
    }
    #logo {
    	top: 0;
    	left: 0;
    	position: absolute;
    }
    #header {
    	height: 104px;
    	overflow: hidden;
    }
    #header2 {
    	height: 23px;
    	overflow: hidden;
    	background-image: url(/images/menu_main_background.gif);
    	border-top: 1px solid #fff;
    	text-align: center;
    }
    #header3 {
    	height: 24px;
    	overflow: hidden;
    	background-color: #E5F1F9;
    	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FFFFFF', EndColorStr='#E5F1F9');
    	border-top: 1px solid #fff;
    	
    }
    #left {
    	float: left;
    	width: 121px;
    	margin-left: -121px;
    	position: relative;
    	background-color: #E5F1F9;
    	text-align: center;
    	background-image: url(/images/body_shadow_left.gif);
    	background-position: right;
    	background-repeat: repeat-y;
    	
    }
    
    .clearer {
    	height: 1px;
    	overflow: hidden;
    	clear: both;
    	margin-top: -1px;
    }
    
    .left_inner {
    	padding-right: 7px;
    }
    
    #left p, #right p, #middle p {padding:10px}
    #right {
    	float: right;
    	width: 168px;
    	margin-right: -168px;
    	position: relative;
    	background-image: url(/images/body_pane_background.gif);
    	background-repeat: repeat-y;
    	background-color: #F4F4F4;
    }
    
    #middle {
    	background: #fff;
    	margin-left: 121px;
    	margin-right: 168px;
    	background-image: url(/images/body_shadow_top.gif);
    	background-position: top;
    	background-repeat: repeat-x;
    }
    * html #middle {height:1%}/* combat ie's 3 pixel jog */
    #footer {
    	clear: both;
    }
    h1,h3,p {margin-top:0}
    .float_left {
    	float: left;
    }
    .float_right {
    	float: right;
    }
    a {
    	color: blue;
    	text-decoration: underline;
    }
    a:hover {
    	color: grey;
    	text-decoration: none;
    	border-bottom: dashed 1px gray;
    }
    a.topnav {
    	color: white;
    	text-decoration: none;
    	font-weight: bold;
    	margin: 0 15px 0 15px;
    }
    a.topnav:hover {
    	color: #E8E8E8;
    	text-decoration: none;
    	font-weight: bold;
    }
    
    .topnav {
    	margin: 5px 0 0 0;
    }
    
    a.utilnav2 {
    	font-size: 10px;
    	color: white;
    	text-decoration: none;
    	font-weight: bold;
    	margin: 0 5px 0 5px;
    }
    a.utilnav2:hover {
    	font-size: 10px;
    	color: #8CD0FD;
    	text-decoration: none;
    	font-weight: bold;
    }
    
    .utilnav {
    	float: right;
    	width: 150px;
    	height: 28px;
    	background-image: url(/images/menu_lip_blue_background.gif);
    }
    
    a.leftnav {
    	font-size: 10px;
    	color: gray;
    	text-decoration: none;
    	line-height: 13px;
    	border-bottom: none;
    }
    a.leftnav:hover {
    	font-size: 10px;
    	color: blue;
    	text-decoration: none;
    	line-height: 13px;
    	border-bottom: none;
    }
    
    a.footernav {
    	font-size: 10px;
    	color: white;
    	text-decoration: underline;
    	border-bottom: none;
    }
    
    a.footernav:hover {
    	font-size: 10px;
    	color: white;
    	text-decoration: underline;
    	border-bottom: none;
    }
    
    .footer_inner {
    	color: white;
    	font-size: 10px;
    	padding: 10px;
    	text-align: right;
    }
    
    .left_ad {
    	width: 100px;
    	height: 50px;
    	background-color: white;
    	margin: 0 0 7px 0;
    }
    .top_ad {
    	width: 468px;
    	height: 60px;
    	background-color: white;
    	margin: 8px 8px 7px 0;
    }
    .bot_ad {
    	width: 468px;
    	height: 60px;
    	background-color: white;
    	margin: 8px 0 0 8px;
    }
    Is is even possible to get this to work?

    Thanks.

  2. #2
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think if I understand your question correctly, you want the background of each column to extend to the bottom of the page, which is actually determined by the tallest column. The only way to accomplish this is to make all three columns the same height. The only way I am aware of to dynamically make sure all three columns are the same height is to use a JavaScript in the onload event that figures out the height of all three columns and then makes the other columns the same height. I have done this before and it works okay. I wouldn't, however, want to have a design that looked really bad if it didn't work.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  3. #3
    SitePoint Member dcordes's Avatar
    Join Date
    Mar 2004
    Location
    St. Louis, MO
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep, using JavaScript I was able to get it to work. But like Paul says you shouldn't need to use it so I'm going to look for a CSS ONLY solution. Any ideas?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You need to think out of the box a bit when dealing with 100% height

    You can't repeat the backgrounds on the left and right because they don't reach the bottom. What you have to do is repeat the background gif on the parent that contains the left and right. This way the parent is always stretched and the columns appear to grow. You just float your content on top using a transparent background so that the image underneath shows through.

    In your example you'd need to repeat the image on the container for the left side and then you'd need another outer container to hold the other columns repeating image.

    If you were using the 100% height layout you could use the body like so.

    Code:
    body {
     margin: 0;
     padding: 0;
     background:#013B61 url(http://dev.truckdriver.com//images/b...background.gif) repeat-y right top;
     color: #000;
     font-family: Tahoma, Arial, Helvetica;
     font-size: 11px;
    }
    #container {
     margin: 0;
     padding: 0;
     background:transparent url(http://dev.truckdriver.com//images/body_shadow_left.gif) repeat-y left top;
    }
    However that won't work on pages smaller than 100% high so instead of the body just add an outer wrapper to the page and repeat the image on the right side of that.

    If you look here at this page this is a similar layout that has a 100% higf image on both sides of the page and even has the 100% high layout. It would just be a simple matter of floating content over the appropriate columns.

    http://www.pmob.co.uk/temp/hundredpe...lay-table2.htm

    Hope thats given you some ideas

    Paul

  5. #5
    SitePoint Member dcordes's Avatar
    Join Date
    Mar 2004
    Location
    St. Louis, MO
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,
    I got it! I just added 2 outer divs, one with the left background image and the other with the right one. Just say NO to JavaScript!

    TruckDriver.com

    Thanks!

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Yep thats it

    easy when you know how


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •