www.webdeveloper.com
Results 1 to 7 of 7

Thread: Css relative overlay causing gap at bottom of page

  1. #1
    Join Date
    Aug 2004
    Location
    70 klicks above the Do Lung bridge
    Posts
    654

    Css relative overlay causing gap at bottom of page

    I am using relative positioning to overlay text over an image. There is now a gap of space at the bottom of the page where the text box would be if it was not re-positioned. Is there anyway around this or do I just grin at bear it?

    Thanks!

    Graham

    p.s. link is in my signature.
    Last edited by Dopple; 04-05-2010 at 04:57 PM. Reason: pointing out link

  2. #2
    Join Date
    Feb 2010
    Location
    Alaska
    Posts
    39
    Hello Dopple,
    Try some ap instead of relative.
    Like this -
    Code:
    body {
    	text-align: center;
    	font-family:verdana, arial, sans-serif;
       }
     
    div.wrapper {
    	text-align: left;
    	margin-left: auto;
    	margin-right: auto;
    	width: 800px; 
    position: relative;
       }
    
    #logo {
    
       }
    
    #navimg {
    position: absolute;
    	top:160px;
    left: 0;
       }
    
    #contcont {
    
       }
    .content {
    	width: 280px;
    	height: 385px;
    	overflow-y: scroll;
    	position: absolute;
    	top:180px;
    	left:285px;
    	padding-right:10px;
    }

  3. #3
    Join Date
    Feb 2010
    Location
    Alaska
    Posts
    39
    Good morning,
    I got busy last night and didn't get the chance to finish my thought.
    Instead of using any positioning at all, it might be better to make your images the background of their containing divs. Text would just go on top of the image as part of the natural flow of the document that way.
    Have a look at this example -
    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Simple 2 column layout</title>
    <style type="text/css"> 
    html, body {
    	background: #99CC99;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    }
    * {
    	margin: 0;
    	padding: 0;
    }
    #wrapper {
    
    	width: 640px;
    	margin: 20px auto 0;
    	background: url(http://grahammacleod.co.uk/img/main.png) no-repeat 0px 150px;
    overflow: auto;
    }
    h1 {
    	height: 150px; 
    	background: #fff url(http://grahammacleod.co.uk/img/banner.png) no-repeat;
    }
    #left {
    	height: 450px;
    	width: 250px;
    	float: left; 
    	background: url(http://grahammacleod.co.uk/img/nav.png) no-repeat 0 0;
    }
    #right {
    	margin: 24px 65px 0 0;
    	width: 280px;
    	height: 385px;
    	float: right;
    	overflow-y: scroll;
    }    
    </style>
    </head>
    <body>
        <div id="wrapper">    
        	<h1></h1>
                <div id="left"><!--end left--></div>
            <div id="right">
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                        <br />
                        <br />
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                        <br />
                        <br />
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                        <br />
                        <br />
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                        <br />
                        <br />
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
            <!--end right--></div>
        <!--end wrapper--></div>
    </body>
    </html>

  4. #4
    Join Date
    Aug 2004
    Location
    70 klicks above the Do Lung bridge
    Posts
    654
    Thanks Excavatorak. That probably would make more sense and be more semantically valid.

  5. #5
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    I agree with the other post about not using positioning.
    But the reason for the space is that's the way posititioning works. The use of a declared position give different results depending on whether or not the parent element also has a declared position. From an old post:
    The thing missing from your positioning is that unless the parent element also has a declared position, the child will do 1 of 2 things.
    If position:relative, it will position as desired but space will be left as though that element was still in the natural flow. So you may move the 500 X 100 element down and over, but a 500 X 100 space will be left, as though it was still there.
    If position:absolute, child is positioned relative to browser window and that position does not change even if window contracts or expands.
    Best wishes,
    Eye for Video
    www.cidigitalmedia.com

  6. #6
    Join Date
    Aug 2004
    Location
    70 klicks above the Do Lung bridge
    Posts
    654
    If position:absolute, child is positioned relative to browser window and that position does not change even if window contracts or expands.
    This is why I didn't use relative, because I have a centred div.

  7. #7
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    Hope you've got your issue solved by now.
    My post was to explain the reason for the space at the bottom of your page and describe to others how to use declared positioning. The main point being that how the positioning works depends on whether or not the parent of the element also has a declared position.
    To overlay text over an image, give the parent of the text <div> a declared position and then you can position the text without the space being left at the bottom. Centering the content on the page does not prevent the use of absolute positioning, just put all the content in a main_container that is centered and has a declared relative position. Then content can be absolutely positioned inside that main_container. That's where understanding how the parent's declared position plays in.
    For an example of how this positioning works, here's a sample page with 3 <div> s, 2 with text and one with Flash. The Flash is sandwiched between the 2 text layers, all inside a main_container which is centered on the screen:
    http://www.cidigitalmedia.com/tutorials/flash_div.html
    View the source code for a better look at how this is done.
    Best wishes,
    EfV

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles