SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    CA
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div positioning confusion

    I'm trying to align one div to the bottom inside of another, and a third div to just beneath that one. Since the third div will appear on mouseover, it needs to lie on top of other content that will already be there. I've tried various combinations of positioning, setting margins, etc., but I can't figure out a solution that will work in all the browsers. This is just the bare bones so that you can maybe see what I'm trying to achieve here....

    Confused? Yes, me too; Here's the html:

    Code:
    <html>
    <head>
    <link href="test2.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    
    <div id="widebar">
          <div id="tabs">
                <div class="menu1">I want these</div>
                <div class="menu2">to align to the</div>
                <div class="menu3">very bottom </div>
                <div class="menu4">of this div </div>
                <div id="tabs2">Align this to the bottom left corner of the Tabs 1 section so that it shows up just below the dark blue area</div>
          </div>
    </div>
    Here is some text that will sit below the these divs and I don't want the mouseover to "push" this text out of the way.  The div that appears on mouseover should sit "on top" of this text with no interference.
    </body>
    </html>
    And here's the css, thus far:

    Code:
    /* css */
    
    #widebar {
          width:100%;
          height: 200px;
          background: #ffccff;
    }
    
    #tabs {
          float:right;
          display:block;
          #position: absolute;
          #bottom:0;
          height: 200px;
          background:#334ddd;
          width:50%;
    }
    
    #tabs2 {
          clear:both;
          #position: relative;
          #bottom: 0;
          background: #567dfe;
    }
    
    .menu1, .menu2, .menu3, .menu4 {
          float:left;
          width: 100px;
          background: #ccc;
    }

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

    I'm not exactly sure if this is what you mean but it might give you the general idea
    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">
    #widebar {
          width:100&#37;;
          height: 200px;
          background: #ffccff;
    }
    
    #tabs {
      float:right;
      display:block;
      height: 200px;
      background:#334ddd;
      width:50%;
        position:relative;
    }
    #tabs ul span {
      position:absolute;
      top:100%;
      background: #567dfe;
        left:-999em;
        width:100%;
        padding:10px 0;
    }
    #tabs ul{
        list-style:none;
        margin:0;
        padding:0;
        position:absolute;
        bottom:0;
        z-index:9;
        width:100%;
        background:blue;
        text-indent:10px
    }
    #tabs ul li{
        float:left;
        margin:0 10px 0 0;
        padding:5px;
    }
    #tabs ul li a{text-decoration:none;color:#000}
    a:hover{visibility:visible}
    #tabs ul li a:hover span{left:0}
    
    
    </style>
    </head>
    <body>
    <div id="widebar">
        <div id="tabs">
            <ul>
                <li><a href="#">Item 1 <span>Message box 1</span></a></li>
                <li><a href="#">Item 2 <span>This is Message box 2</span></a></li>
                <li><a href="#">Item 3 <span>This is Message box 3 with some more text</span></a></li>
                <li><a href="#">Item 4 <span>This is meassage  box 4</span></a></li>
            </ul>
        </div>
    </div>
    <p>Here is some text that will sit below the these divs and I don't want the mouseover to "push" this text out of the way.  The div that appears on mouseover should sit "on top" of this text with no interference.</p>
    </body>
    </html>

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you haven't done so already, start by using a complete and proper DOCTYPE declaration. Since you're using XHTML syntax in your page, I'd probably go with that. Otherwise, remove the XHTML syntax and use an HTML DOCTYPE instead.

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    CA
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, thanks Paul. This is really great, except that I can't figure out how to do two things, and I don't know if it's even possible with the current setup.

    (1) How to use images for the Item Names and swap them on hover, in addition to popping open the div on mouseover, and

    (2) How to align right edges of the div that appears on mouseover and the menu that pops it open.

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

    1) Rollovers can be done in exactly the normal way and probably easiest if you just apply a background image to the anchor and swap the image position on rollover. You use one image that holds both states and then just swap the background position on rollover.

    2) Not sure exactly what you mean here so you may need to draw a picture as there are so many variables to take into account. I'm not really sure of your final aim either and whether in fact you want a fly out menu rather than a pop up message box.

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    CA
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, right now, the menu that appears when you hover over the menu name is set to a width of 100%. What I'm trying to is set the second menu to the width of it's parent menu with the edges aligned on the right side. I attached an image.
    Attached Images Attached Images

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    It looks to me as though you should be using a proper menu and not just a message box.

    Have a look at the suckerfish menus.
    (I'm just on my way out - back later)

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I assume you've sorted this now?


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
  •