SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background Issue. Probably simple.

    Okay i have dove back into dream weaver and ran into a bit of a problem.

    here is a link to the site with the problem.
    http://www.chrisando.com/test_problem/

    you will notice that on the left and right there is a bit missing. a background image should be following that all the way down as i add more text. (but its not)
    ive fiddled with it for hours now, but no results, im probably making a simple mistake.

    this is happening in both ie and firefox.
    i have taken out irrelevent parts of the html to keep it simple.

    here is the general layout of the section.
    main_left and main_right are the sections on the sides, where the background image should be.

    Code:
    <div id="whole">
    
    	<div id="main">
        
    	  <div id="main_left">
    
    		<div id="d1_"></div>
        	        <div id="f1_"></div>
        
    		</div>
    
    		<div id="main_mid">
     
                      TEXT
                   
    	        </div>
    
        	<div id="main_right">
    
    		<div id="d3_"></div>
    		<div id="f3_"></div>
        
        	</div>
    
    	</div>
        
    	</div>
    
    </div>
    css is:

    Code:
    body {
    background-color:#dcff63;
    }
    
    #whole {
    	position:absolute;
    	top:0;
    	left: 50%; 
    	width:1024px;
    	margin-left:-512px;
    }
    
    #d1_, #d3_, #g1_, #g2_, #g3_ {position:relative;float:left;top:0px;left:0px;}
    #f1_, #f3_ {position:absolute;bottom:49px;left:0px;}
    #f1_ {left:0px;}
    #f3_ {left:816px;}
    
    #d1_, #d3_, #f1_, #f3_, #g1_, #g3_ {width:208px;}
    #g2_ {width:608px;}
    
    #d1_, #d3_ {height:142px;}
    #f1_, #f3_ {height:242px;}
    #g1_, #g2_, #g3 {height:49px;}
    
    #d1_ {background-image: url(images/d1.gif);}
    #d3_ {background-image: url(images/d3.gif);}
    #f1_ {background-image: url(images/f1.gif);}
    #f3_ {background-image: url(images/f3.gif);}
    
    #main {float:left;width:1024px;}
    
    #main_left {
    	float:left;
    	width:208px;
    	background-image: url(images/e1.gif);
    }
    
    
    #main_right {
    	float:right;
    	width:208px;
    	background-image: url(images/e3.gif);
    	background-repeat:repeat-y;
    }
    
    }
    hopefully somebody knows what my mistake is.

    thanks.

  2. #2
    SitePoint Zealot get_dave's Avatar
    Join Date
    Nov 2006
    Location
    England, UK
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure what you're asking. There is no bg image attached to the main_mid column in the CSS, so it won't work.

    Have i misunderstood?
    I'm looking for a link exchange.
    contact me or head to:
    http://www.aheadcreative.co.uk

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no its the main left and right that is not flowing down.
    the main_mid i just have a background colour and that works fine.

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,279
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Ah, it looks like you have a middle part and four "corners"-- a top left div, a top right div, and bottom left and right divs. Only the corner divs have the background images. There's no image in the middle parts cause there's nothing there with a background image. At least, that's how it looks here. *Edit no, I'm wrong, there's a gazillion images there...*

    Better to do the three-column thing. Left column with top left background image, middle with text, right column with right top image. Footer on bottom tall enough to have the bottom left and right images. The #whole could have the stripe-image repeated y.
    Last edited by Stomme poes; Feb 13, 2008 at 09:18.

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,279
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Damn... that design is harder than it looks. I probably looked at it the wrong way, but this is how I'd code it if it were mine (except, the way I did it, the text can never be shorter than what it currently is-- a major disadvantage. The page can grow as much as it wants though.
    http://stommepoes.nl/Chrisando/chrisando.html

    That was my try. I took all those little images and made them into 3. The one problem I had was, somewhere in editing, GIMP started telling me there was something up with the transparency and I started having trouble with some of my tools. So, the topimg.gif I think has something wrong with it (though it seems to look normal in Opera9+, Safari, Firefox2, Firefox 1.5, IE6 and IE7...)

    Prolly an abuse of XHTML, but valid nonetheless and strict.

    This is what the current page looks like in IE6-- more than just the middle problem:
    http://stommepoes.nl/Chrisando/chrisandotop.gif
    http://stommepoes.nl/Chrisando/chrisandobottom.gif

  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow, i didnt expect somebody to re-code it for me.
    thanks alot for that.

    i see you have sliced it up more sense ably.
    i will redo it that way,
    thanks again, youve been a great help.

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,279
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Hmmm, well now that I've slept on it, I'd prolly do it some other way. If it weren't for IE6, I'd maybe even make those things transparent png's and position them around. Also, to get around the min-text thing, you could set a min-height on the #main so that the blue stays even when the text is shorter. IE6 doesn't understand min-height but you could just tell it secretly
    * html #main {height: whatever the minimum has to be;}

    so the other browsers don't see it. IE6 will treat height as min-height anyway.


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
  •