www.webdeveloper.com
Results 1 to 9 of 9

Thread: Vertical align text inside a drop down menu

  1. #1
    Join Date
    Jul 2005
    Posts
    46

    Vertical align text inside a drop down menu

    Maybe it's because I'm no drop down menu newbie, but this aspect of my site has been the most troublesome (besides the abandoned iframe). I'm trying to manipulate the text inside the dropdown menu (hover over the "log" and "works" link) so that it stands on the bottom right hand corner on the box rather than the upper right corner. I've tried using vertical-align: bottom, vertical-align: text-bottom, and just plain bottom, and have gotten no where. It's possible, likely even, that I put either one of those properties out of place. Could someone provide the correct sequence?

    Here's my stylesheet:
    Code:
    html, body{ height: 100%; width: 100%;  margin: 0px; padding: 0px; } 
    body{ background-color: rgb(255,255,255); color: rgb(255,255,255); font-family: "tempus sans itc", "trebuchet ms", sans-serif; font-size: 20px; font-weight: 500; letter-spacing: 1.25px; text-align: left; word-spacing: 2px; }  
    p { margin: 0px; padding: 0px 0px 15px 0px; } 
    
    /*Containers*/
    #interface { position: absolute; left: 50%; top: 50%; width: 984px;  height: 500px; margin-left: -492px; margin-top: -250px; padding: 0px; }
    #background { position: absolute; top: 30px; left: 0px; width: 984px; height: 440px; filter: alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75; } 
    #threshold {position: absolute; overflow: hidden; width: 100%; height: 100%; background: transparent; } 
    #content  { position: absolute;  z-index: 1; background: transparent; padding: 30px 0px 30px 0px;  } 
    
    /*Header and footer:*/
    .a2, .a4, .a6, .a7, .a8, .a9, .b1, .b2, .b3, .b4, .b5, .b6, .b8 { position: absolute; margin: 0px; padding: 0px; background-image: none; height: 26px; z-index: 3; filter: alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75; } 
    .a2, .a4, .a6, .a7, .a8, .a9 { top: 0px; } 
    .b1, .b2, .b3, .b4, .b5, .b6, .b8 { bottom: 0px; }
    .a7, .a9, .b1, .b3, .b5 { width: 160px; }
    .a2, .a4, .a6, .a8, .b2, .b4, .b6, .b8 { width: 40px } 
    .hub, .log, .works, .info, .net { position: absolute; margin: 0px; padding: 0px; }
    .hub { top: 0px; left: 0px; } 
    .a2 { left: 163px; } 
    .log { top: 0px; left: 206px; } 
    .a4 { left: 369px; } 
    .works { top: 0px; left: 412px; } 
    .a6 { left: 575px; } 
    .a7 { left: 618px; } 
    .a8 { left: 781px; } 
    .a9 { left: 824px; } 
    .b1 { left: 0px; } 
    .b2 { left: 163px; } 
    .b3 { left: 206px; }
    .b4 { left: 369px; } 
    .b5 { left: 412px; } 
    .b6 { left: 575px; } 
    .net { bottom: 0px; left: 824px; text-align: right; } 
    .b8 { left: 781px; } 
    .info { bottom: 0px; left: 618px; text-align: right; } 
    
    /*Drop down menu:*/
    ul, li ul, ul li a, li ul a { color: rgb(255,255,255); font-weight: bold; text-decoration: none; padding: 0px; margin: 0px; filter: alpha(opacity=90); -moz-opacity: 0.9; opacity: 0.9; position: relative;  z-index: 2; }
    ul { list-style: none; width: 160px; } 
    li ul { position: relative; width: 160px; display: none; } 
    li ul a, ul li a { display: block; } 
    li:hover ul, ul li a:hover { display: block; text-align: right; } 
    ul li a:hover { width: 160px; text-align: left; } 
    li ul a:hover { background: rgb(75,20,20); text-align: right; height: 100px; }
    Thanks in advance.

  2. #2
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    19,361
    Unfortunately, "vertical-align" is only appicable for table-cell and in-line elements.

    And by the way, if I view your link in IE6 on WinXP, then hover over one of the menu items, it crashes the browser. If I view it in Firefox the menu is displayed totally differently, showing the whole menu tree as an unordered list vertically down the left side of the page.
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

  3. #3
    Join Date
    Jul 2005
    Posts
    46
    Hm. Are there all kinds of weird gaps of dark-colored blotches between the unorded list? If so, it goes away if you reload the page a couple times. I don't know why.

  4. #4
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    The big black things are caused by the height in this.

    li ul a:hover { background: rgb(75,20,20); text-align: right; height: 100px; }
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  5. #5
    Join Date
    Jul 2005
    Posts
    46
    Quote Originally Posted by ray326
    The big black things are caused by the height in this.

    li ul a:hover { background: rgb(75,20,20); text-align: right; height: 100px; }
    I would hope so, as that was an intetnional stylistic choice on my part. .

    The problem is that I want the text inside the menu aligned toward the bottom so that the eye is directed to the options under the one being highlighted.

  6. #6
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    19,361
    Instead of changing the height, how about changing the padding-top to a larger value?
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

  7. #7
    Join Date
    Jul 2005
    Posts
    46
    That'd do it. Thanks, NogDog.

  8. #8
    Join Date
    Jul 2005
    Posts
    29
    Anybody know a good tutorial to make these kinds of menus?
    My Site: Madhouse Vids

  9. #9
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910

Thread Information

Users Browsing this Thread

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

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