Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12
  1. #1
    Member
    Join Date
    Feb 2004
    Posts
    76
    Member #
    4909
    If you take a look at this: http://www.negative0.no-ip.com/versu...2k/index.shtml

    The content (the Blah text) goes beyond the background, but the background is supposed to stretch to the height of the screen no matter how much content there is i.e if the content is 2000 pixels high the background should stretch to 2000 pixels, but it doesn't. I want the background to stretch 100% the height of the screen nomatter how much content there is.

    If I take away the DIVs that contains the content the background will stretch to the full height of the screen but as soon as I put the DIVs back they go past the bottom of the background if there is too much content. I have tried playing around with z-indexes and different ways of positioning but nothing seems to work.

    All of the css is (for the moment) contained in the *.shtml.

    I could do it with tables with my eyes shut and hands tied behind my back but that would be the easy way out and what would I learn? Didly squat.

    I for the life of me can't work out the problem since it works without the other content DIVs. Does anyone else have any ideas or know what the problem is and how to fix it? Any help or idea would be greatly appreciated. Cheers.

  2.  

  3. #2
    Junior Member TwiztedFake's Avatar
    Join Date
    Apr 2004
    Location
    Central, IL
    Posts
    18
    Member #
    5633
    Have you tried changing height: 100%; to min-height: 100%;
    In the .shadow class

  4. #3
    Member
    Join Date
    Feb 2004
    Posts
    76
    Member #
    4909
    min-height isn't supported in IE.

  5. #4
    Member
    Join Date
    Feb 2004
    Posts
    76
    Member #
    4909
    I tried using background-attachment: fixed in the hope that I could stop the background from scrolling but I couldn't get it to work.

    Any othere ideas??

  6. #5
    Junior Member TwiztedFake's Avatar
    Join Date
    Apr 2004
    Location
    Central, IL
    Posts
    18
    Member #
    5633
    This is something else that I noticed.
    <img src="images/shaddowBDR.gif" width="11" height="600">

    You are telling it to be 600 pixels high. That could be why it is not following the length of the content. Try removing that and see what happens.

  7. #6
    Member
    Join Date
    Feb 2004
    Posts
    76
    Member #
    4909
    that is the height of the image, not the DIV, the image is inside the DIV and the DIV is set to 100%(so that it will stretch to the full height of the screen).

    If you have a look at the code there are 2 divs for content "subMen" and "maincontContainer", if I remove these DIVs then the DIVs that are used for the background stretch to the full height of the screen, but as soon as I put a DIV in and put enough content in then the content DIVs stretch beyond the background DIVs. I want the background to stretch to the full height of the screen regardless of how much content there is. This is what I can't work out how to to do.

    Can anyone please help me get this done? I have tried everything I know.

    Cheers

  8. #7
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    The reason why its not working is your 'content' divs are set to absolute. They have been removed from the document flow so no matter how big they get their containers will not stretch with them because frankly, their containers do not even know they are there now.

    And you are going back to giving things both an ID(for layout rules) and a class(for style rules) in the same elemnt witch makes it that much more difficult to figgure things out because ID's have more weight then classes, and certin rules could get ignored because of that. This would be a better way to accomplish this..
    HTML Code:
    /* layout rules */
    #subMen{
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	color:#FFFFFF;
    	font-size: 0.8em;
    	border-right-width: 1px;
    	border-right-style: dashed;
    	border-right-color: #FFFFFF;
    }
    /* Style rules */
    #subMen{
    	position: absolute;
    	left: 25px;
    	top: 75px;
    	width: 242px;
    }
    HTML Code:
    <div id="subMen">
    If i get some time later I will go back and look at your code again and come up with a solution for you that will probably involve floats. (In case you want to research how they work first, this is a great resource)


  9. #8
    Member
    Join Date
    Feb 2004
    Posts
    76
    Member #
    4909
    Cheers glyakk, I'll have a read and give floats a go and I'll see how it goes, hopefully I can get it to work now I know what the problem is.

  10. #9
    Junior Member
    Join Date
    May 2004
    Posts
    6
    Member #
    6063
    Thats really good, thanks for sharing that

  11. #10
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    Alright I 'fixed' your problem. However You should state some rules for your layout to get it to work properly. The previous example(in another post) worked as long as your content didnt stretch any father then your window. This one will work only if your content is larger then your window. However that also means that your navigation bar cannot be longer then your content div.. So this perticular code will work as long as your content stretches beyond your nav, and is longer then your window..


    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>200 Ok!</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style media="screen" type="text/css">
    
    body, html {padding:0px; margin:0px;}
    body {
    	background: url(images/bg.gif);
    }
    #top_nav {
    	background: url(images/headBG.gif) repeat-x 0% 0%;
    }
    #main_cont {
    	width: 795px;
    	background: #FF3399;
    }
    .shadow {
    	position: relative;
    	width: 806px;
    	background: url(images/RshdwBDRBG.gif) repeat-y 100% 0%;
    }
    .shadow img{
    	position: absolute;
    	right: 0px;
    	top: 0px;
    }
    #main_cont img{
    	position: static;
    }
    #menBG{
    display: none;
    }
    
    #subMen, #maincontContainer{
    	color: #fff;
    	margin-top: 50px;
    }
    #subMen{
    	width: 242px;
    	float: left;
    	margin-left: -1px;
    	padding: 10px;
    }
    
    #maincontContainer{
    	padding: 10px;
    	margin-left: 260px;
    	border-left: 1px dashed #fff;
    }
    
    </style>
    </head>
    
    <body>
    
    <div class="shadow"><img src="images/shaddowBDR.gif" width="11" height="600">
    <div id="main_cont">
    <div id="top_nav"><img src="images/2kHead.gif"></div>
      <div id="subMen">
    blah<br>
    blah<br>
    blah<br>
    blah<br>
    blah<br>
    blah<br>
    blah<br>
    blah<br>
    blah<br>
    	
    	 </div>
      <div id="maincontContainer">
    blah<br>
    blah<br>blah<br>
    blah<br>blah<br>
    blah<br>blah<br>
    blah<br>blah<br>
    blah<br>blah<br>
    blah<br>blah<br>
    blah<br>blah<br>
    blah<br>blah<br>
    blah<br>blah<br>
    blah<br>blah<br>
    blah<br>blah<br>
    blah<br>blah<br>
    blah<br>blah<br>
    </div>
    </div>
    </body>
    </html>
    Also the reason why the header graphic wasnt working in my previous example is because there was no space before repeat-x witch made the whole background rule invalid so IE ignored it. I simply put a space befor it and it works perfectly now. And you dont need that extra div.
    HTML Code:
    #top_nav {
    	background: url(images/headBG.gif) repeat-x 0% 0%;
    }



Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:25 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com