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 11 of 11
  1. #1
    Regular Coder
    Join Date
    Sep 2002
    Posts
    157
    Thanks
    2
    Thanked 0 Times in 0 Posts

    How to prevent image overlapping DIV tag

    It's a problem when there is few texts. Any solution to this?

    Also is it possible to make DIV box filling browser windows 100% height?

    Thanks in advance

  • #2
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    What do you mean?

  • #3
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by barnettgs View Post
    It's a problem when there is few texts. Any solution to this?

    Also is it possible to make DIV box filling browser windows 100% height?

    Thanks in advance
    Would have to see the code to even begin to understand what your first question means.

    However, your second question is easy enough to to.

    In your CSS, add min-height: 100% to the div in question.

    Now the div still won't be 100% high, because it needs an antecendent element with a declared height - to be 100% of...

    So, to achieve 100% height in the browser viewport, you'll need to make both the html and body elements 100% high also:

    Code:
    html, body {
            height: 100%;
    }
    Then you'll need to tell the div in question to have a minimum height of 100%...

    Code:
    div#mydiv {
           min-height: 100%;
    }
    But there's stil a problem: IE versions 5- 6 don't understand min-height and will ignore it. However IE 5 - 6 treaght the 'height' property as it were min-height.

    so the next step would be to feed IE 5 -6 soem specific rules that none of the other browsers out there will read, best way is to use conditional comments, like so:

    Make a css document called, let's say: iehacks...

    and add this rule to it:

    Code:
    div#mydiv {
           min-height: 100%;
    }
    Then link to the iehacks.css file by placing the following code (known as a conditional comment) in the < head > of your html document.

    Code:
    <!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="css/iehacks.css" />
    <![endif]-->
    Hope that helps? I think I got it right, as I've been working on a 100% height web layout today

    If I got anything wrong, it's because I've been working on a 100% height layout all day

    Kind regards, and good luck,

    Gary

  • #4
    Regular Coder
    Join Date
    Sep 2002
    Posts
    157
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks, I will look at 100% height later as I need to sort out image issue on DIV.

    For example, if I type texts into DIV box, it would be stretched as more text filled in. It is not the same with image in DIV box without texts, instead most part of image is outside colored DIV box.

    If not, I will put in link soon for you to see.

  • #5
    New to the CF scene
    Join Date
    Nov 2006
    Location
    Kansas City
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm working on a similar problem.

    I've implemented what you've said, but my page will still not extend to it's full length. Any ideas?

    http://test.rhombusdesign.com
    Last edited by almostlucid; 11-08-2006 at 08:12 PM.

  • #6
    Regular Coder
    Join Date
    Sep 2002
    Posts
    157
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok, here's the link: http://www.udsc.org.uk/template2.php

    You can see the logo on bottom of footer, how to stop this?

  • #7
    Regular Coder
    Join Date
    Jan 2006
    Posts
    568
    Thanks
    6
    Thanked 84 Times in 84 Posts
    Hmmm, I've come across this problem before:

    1. add display:block to your image
    2. put an invisible div underneath it, like this:

    Code:
    <img src=blah.gif><div style="clear:both;width:100%;height:1px;overflow:hidden"></div>
    either/both of the above should sort it out, unless I'm not understanding it properly

  • #8
    Regular Coder
    Join Date
    Sep 2002
    Posts
    157
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Are you sure? I'm sure there must be a simpler way to deal with this.

  • #9
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Quote Originally Posted by barnettgs View Post
    Thanks, I will look at 100% height later as I need to sort out image issue on DIV.

    For example, if I type texts into DIV box, it would be stretched as more text filled in. It is not the same with image in DIV box without texts, instead most part of image is outside colored DIV box.

    If not, I will put in link soon for you to see.
    Simple one here, if you want an image as tyour background and your image to stretch with the text use three images. The first image should be the top of the box, or div you want the text in. The the second should be the content section of the div where the text is going to go. And then the third should be the bottom part or end of the box. For example;

    Code:
    #boxtop {
    background-image: url(blah.jpg);
    width: 100px;
    height: 10px;
    }
    
    #boxcontent {
    background-image: url(blah.jpg);
    width: 100px;
    height: auto; (makes the image stretch to the text height)
    }
    
    #boxbottom {
    background-image: url(blah.jpg);
    width: 100px;
    height: 10px;
    }
    And your HTML

    Code:
    <div id="boxtop"></div>
    <div id="boxcontent">
    Type as much text here as you want
    </div>
    <div id="boxbottom"></div>
    Simple

    An example, got to http://www.ahallicks.co.uk/music.php and looks at the source, where the text is describing the vids there is this type of style used. Hope that helps for that?

    Edit: Just noticed that for that image you haven't used pixels for the height and width, they just have a number. If you want it resized try using 100px?
    Last edited by ahallicks; 11-22-2006 at 04:00 PM.

  • #10
    Regular Coder
    Join Date
    Sep 2002
    Posts
    157
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks but I have found a way. I have added colour background (same colour as footer) to body tag and white background to div #wrap (that holds header, content and footer in one). It worked great for me, with no complicated coding anyway!

    However, a new problem appeared! See the page: http://www.udsc.org.uk/contactus.php It looks fine on Mozilla Firefox but the content of contact us is missing in IE 6!?

    I think it's more to do with the width but can not find the source of problem!

  • #11
    Regular Coder
    Join Date
    Sep 2002
    Posts
    157
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok, this is odd. This is a problem with Internet Explorer 6.

    If the main content is longer than side menu, it's fine. But if the content is shorter (like contact us page) than menu then it won't display!

    Is there a workaround for this? Thanks


  •  

    Posting Permissions

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