Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Layered DIVs, text going outside the container DIV, background messed up

    I have a main DIV with other divs inside it, in 2 layers. 1st layer is the pretty background, and the 2nd layer is the content. everything is okay untill the content extends beyond the window size.

    SITE DEMO: LINK

    then.... scroll bars appear, but when scrolling in FF/IE7, the background layer stays static and content text extends past the parent DIV.
    in IE6, the content text is even more awkward. no scrollbars and text extends to past the window to the top! check out the screenshots below:

    FF/IE7 screenshot:



    IE6 screenshot:



    You can check out the site below:
    http://golosmira.com/site


    and here are the HTML/CSS sources:
    PHP Code:
    <!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" xml:lang="en" lang="en">
    <
    head>
    <
    title>Welcome</title>
    <
    meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    <
    link rel="stylesheet" href="css.style.css" type="text/css" />
    </
    head>

    <
    body>
    <
    div id="main">
        <
    div id="TL"></div>
        <
    div id="TR"></div>
        <
    div id="BL"></div>
        <
    div id="BR"></div>
        <
    div id="T"></div>
        <
    div id="L"></div>
        <
    div id="R"></div>
        <
    div id="B"></div>
        <
    div id="X">
            
    01<br />02<br />03<br />04<br />05<br />06<br />07<br />
            
    08<br />09<br />10<br />11<br />12<br />13<br />14<br />
            
    15<br />16<br />17<br />18<br />19<br />20<br />21<br />
            
    22<br />23<br />24<br />25<br />26<br />27<br />28<br />
            
    29<br />30<br />31<br />32<br />33<br />34<br />35<br />
            
    36<br />37<br />38<br />39<br />40<br />41<br />42<br />
            
    43<br />44<br />45<br />46<br />47<br />48<br />49<br />
            
    50<br />51<br />52<br />53<br />54<br />55<br />56<br />
        </
    div>
    </
    div>
    </
    body>
    </
    html
    PHP Code:
    * {
        
    padding0;
        
    margin0;
        
    border0;
    }
    bodyhtml {
        
    width100%;
        
    height100%;
        
    font-size16px;
    }

    #main {
        
    height100%;
        
    width100%;
        
    margin0 auto;
        
    positionrelative;
        
    background-color#f9f6f3;
    }
    #TL {
        
    height150px;
        
    width150px;
        
    positionabsolutetop0left0z-index: -1;
        
    background-imageurl(img.mainbg.topleft.png);
    }
    #TR {
        
    height150px;
        
    width150px;
        
    positionabsolutetop0right0z-index: -1;
        
    background-imageurl(img.mainbg.topright.png);
    }
    #BL {
        
    height150px;
        
    width150px;
        
    positionabsolutebottom0left0z-index: -1;
        
    background-imageurl(img.mainbg.botleft.png);
    }
    #BR {
        
    height150px;
        
    width150px;
        
    positionabsolutebottom0right0z-index:-1;
        
    background-imageurl(img.mainbg.botright.png);
    }
    #T {
        
    height150px;
        
    width100%;
        
    positionabsolutetop0z-index: -2;
        
    background-imageurl(img.mainbg.top.png);
    }
    #L {
        
    height100%;
        
    width150px;
        
    positionabsoluteleft0z-index: -2;
        
    background-imageurl(img.mainbg.left.png);
    }
    #R {
        
    height100%;
        
    width150px;
        
    positionabsoluteright0z-index: -2;
        
    background-imageurl(img.mainbg.right.png);
    }
    #B {
        
    height150px;
        
    width100%;
        
    positionabsolutebottom0z-index: -2;
        
    background-imageurl(img.mainbg.bot.png);
    }
    #X {
        
    height100%;
        
    width100%;
        
    positionabsolutebottom0z-index0;
        
    text-aligncenter;


    This is my first shot at the DIV based layout. what i'm shooting for it to have background be 100% height/width, BUT if the content extends past the window size - i want background to extend as well.

    Can anyone help me with this problem, it drives me nuts !
    thanks for all your help in advance!
    The Power of PNG - http://windenis.com (my site)

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,694
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    You can see that the 100% height is one screen and no more. I'm surprised it worked so well in IE6.

    Pretty easy to slip it all into my full height layout example though:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html {
    	height: 100%;
    }
    body{
    	height: 100%;
    	text-align: center;	
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #000000;	
    	background-color: #00FF66;
    }
    * {
    	margin: 0;
    	padding: 0;
    }
    #wrap {
    	min-height: 100%;
    	width: 100%;
    	text-align: left;
    	background-color: #f9f6f3;
    }
    * html #wrap {
    	height: 100%
    }
    #TL {
    	height: 150px;
    	width: 150px;
    	position: absolute; top: 0; left: 0; z-index: 1;
    	background-image: url(http://golosmira.com/site/img.mainbg.topleft.png);
    }
    #TR {
    	height: 150px;
    	width: 150px;
    	position: absolute;
    	top: 0; right: 0; z-index: 1;
    	background-image: url(http://golosmira.com/site/img.mainbg.topright.png);
    }
    #BL {
    	height: 150px;
    	width: 150px;
    	position: absolute; bottom: 0; left: 0; z-index: 1;
    	background-image: url(http://golosmira.com/site/img.mainbg.botleft.png);
    }
    #BR {
    	height: 150px;
    	width: 150px;
    	position: absolute; bottom: 0; right: 0; z-index: 1;
    	background-image: url(http://golosmira.com/site/img.mainbg.botright.png);
    }
    #T {
    	height: 150px;
    	width: 100%;
    	position: absolute; top: 0; z-index: 0;
    	background-image: url(http://golosmira.com/site/img.mainbg.top.png);
    }
    #L {
    	height: 100%;
    	width: 150px;
    	position: absolute; left: 0; z-index: 0;
    	background-image: url(http://golosmira.com/site/img.mainbg.left.png);
    }
    #R {
    	height: 100%;
    	width: 150px;
    	position: absolute; right: 0; z-index: 0;
    	background-image: url(http://golosmira.com/site/img.mainbg.right.png);
    }
    #B {
    	height: 150px;
    	width: 100%;
    	position: absolute; bottom: 0; z-index: 0;
    	background-image: url(http://golosmira.com/site/img.mainbg.bot.png);
    }
    #X {
    	height: 100%;
    	width: 100%;
    	position: absolute; bottom: 0; z-index: 1;
    	text-align: center;
    }
    </style>
    </head>
    <body>
    <div id="wrap">
    	<div id="TL"></div>
    	<div id="TR"></div>
    	<div id="BL"></div>
    
    	<div id="BR"></div>
    	<div id="T"></div>
    	<div id="L"></div>
    	<div id="R"></div>
    	<div id="B"></div>
    	<div id="X">
    		01<br>02<br>03<br>04<br>05<br>06<br>07<br>
    
    		08<br>09<br>10<br>11<br>12<br>13<br>14<br>
    		15<br>16<br>17<br>18<br>19<br>20<br>21<br>
    
    		22<br>23<br>24<br>25<br>26<br>27<br>28<br>
    		29<br>30<br>31<br>32<br>33<br>34<br>35<br>
    
    		36<br>37<br>38<br>39<br>40<br>41<br>42<br>
    		43<br>44<br>45<br>46<br>47<br>48<br>49<br>
    
    		50<br>51<br>52<br>53<br>54<br>55<br>56<br>
    	</div>
    </div>
    <!--closes wrap-->
    
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    i tried your version... same problem persist

    btw the background is 100% height/width of the container DIV. and both background and the text content are enclosed in that same div.

    ok. lets put the background aside.
    the problem is if the text content is too big, the parent div doesnt resize to fit the text. text simply continues out of the DIV if i were to use tables, the cell would expand to compensate and enclose ALL text... but i seriously dont want to go back to tables!
    The Power of PNG - http://windenis.com (my site)

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,694
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Yes I see. Sorry I did not test that enough.
    For that layout to work you would have to img.mainbg.bot.png, img.mainbg.botleft.png and img.mainbg.botright.png in a footer.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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