SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot Servyces's Avatar
    Join Date
    Jun 2007
    Location
    The Netherlands
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Floating DIV with CSS

    Hi all,

    for a website I'm working on, I'm trying to get a "floating" div showing random quotes inside a table.
    I have this code and it works pretty well:

    Code CSS:
    .quote {
        position: relative;
        top: 325px;
        left: 20px;
        width: 191px;
        height: 137px;
        background: url(img/quotes.gif);
        background-repeat: no-repeat;
    }

    The div is inserted into a table column like this:

    Code HTML4Strict:
    <tr>
      <td>
        <div class="quote">
          <div class="quote-line1">Line 1</div>
          <div class="quote-line2">Line 2</div>
          <div class="quote-line3">Line 3</div>
        </div>
      </td>
    </tr>

    The div itself looks fine and the -line1,2 and 3 classes do their job of spacing the text too. However, when I insert text into the TD, say for example:

    Code HTML4Strict:
    <tr>
      <td>
        <p>Welcome</p>
        <div class="quote">
          <div class="quote-line1">Line 1</div>
          <div class="quote-line2">Line 2</div>
          <div class="quote-line3">Line 3</div>
        </div>
      </td>
    </tr>

    ... the div gets "pushed down". It doesn't stay in the place where I want it to be. I have tried to give the DIV a z-index of 2 and the TD a z-index of 1, but that doesn't work. Any other suggestions to keep the div in it's place while using a relative position?
    Servyces.com
    Where itís all about you.
    Your partner in online solutions.
    Visit our website at http://www.servyces.com/

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not quite understanding what you are trying to do here as the code is rendering exactly as I would expect it to, given the styles you are using.

    You have moved div.quote 325px from the top and 20px from the left so the actual table will be 325px above the quote. The "welcome" text will be in the table and then 325px down the page the quote box will appear.

    It's unlikely that you should be using relative positioning anyway because relative positioning only moves things visually and not physically. Although it appears to be somewhere else the element still takes up its original space and will maintain that space in the flow of the document. Its new visual position is just overlaid on whatever may be in the way.

    You will have to give a detailed explanation of where things are to appear in order to answer this question (or provide a link or drawing of what you want.)

    Why are you moving the quote div anyway. Surely you want it to remain where it is.

    You also mentioned floating in your heading but I see no float styles in your code!

  3. #3
    SitePoint Zealot Servyces's Avatar
    Join Date
    Jun 2007
    Location
    The Netherlands
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, well I guess I explained it wrong. Actually I just realize that "floating" is not the right term. It should be on a static place and stay there. At this point, when I enter the "welcome" text, there are 325 pixels between the welcome text and the div. However it should be 325 pixels - whatever pixels "welcome" may take.

    See the attached screenshot to see what I am talking about.
    Attached Images Attached Images
    Servyces.com
    Where itís all about you.
    Your partner in online solutions.
    Visit our website at http://www.servyces.com/

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You need to think about what you are saying and what the consequences will be .

    Firstly you say you want the quote box at 325px from the top irrespective of how much text there is above it. If that's correct then what happens when you have more than 325px of text? The text will over-write the quote box if it doesn't move out of the way.

    Secondly, is this container a fixed height? You can't place the quote box 325px away from the top if the container isn't a fixed height because the container may shrink or increase due to content.

    There are too many variables in there that you haven't defined yet for me to give the right solution but this is what I think you are doing.

    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=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    table{
        border:1px solid #000;
        margin:20px;
        width:500px;
    }
    .wrap{
        position:relative;
        width:100&#37;;
        padding-bottom:150px;/* preserve quote box*/
        min-height:325px;
    }
    * html .wrap{height:325px}
    .quote {
        position: absolute;
        bottom:0;
        left: 20px;
        width: 191px;
        height: 137px;
        background:#ffffcc url(img/quotes.gif) no-repeat;
    }
    </style>
    </head>
    <body>
    <table>
        <tr>
            <td><div class="wrap">
                    <p>Welcome</p>
                    <div class="quote">
                        <div class="quote-line1">Line 1</div>
                        <div class="quote-line2">Line 2</div>
                        <div class="quote-line3">Line 3</div>
                    </div>
                </div></td>
        </tr>
    </table>
    </body>
    </html>
    If that's not what you want then you will need to define precisely the actions and behavior you need


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
  •