Vertical-Align Not Working on Horizontal Menu

  • Resolved Aurum

    (@aurum)


    16 years, 11 months ago

    I’ve integrated a horizontal menu in my header. The header’s image is the traditional background image and not an actual img tag.

    Whenever I try to get the horizontal menu to align bottom using vertical-align command it doesn’t work. Instead it stays put at the top of the page.

    Can anyone help me solve this problem?

    Aurum

    Relevant CSS excerpt:

    /* Horizontal Menu Structure */
    .path {
    vertical-align: bottom;
    color: #FFF;
    font: normal 1.1em Verdana,sans-serif;
    padding: 4px 12px;

    }
    .path li,.path ul {display: inline;}
    .path a {
    color: #FAFAFA;
    text-decoration: none;
    margin-right: 15px;
    }
    .path a:hover {
    color: #FFE;
    text-decoration: underline;
    }

    And now for the Header.php excerpt:

    <div class=”header”>
    <div class=”path”>

    <UL>Menu links and stuff</UL>
    </div>
    </div>

Viewing 6 replies - 1 through 6 (of 6 total)
  • Marcel Brinkkemper

    (@macbrink)

    16 years, 11 months ago

    .path vertical aligns to .header

    Thread Starter Aurum

    (@aurum)

    16 years, 11 months ago

    I thought that, but when I put vertical-align: bottom; in my header CSS entry it changed nothing.

    Marcel Brinkkemper

    (@macbrink)

    16 years, 11 months ago

    try to use the bottom property of css.
    bottomsets how far the bottom edge of an element is above/below the bottom edge of the parent element

    Thread Starter Aurum

    (@aurum)

    16 years, 11 months ago

    I couldn’t get the bottom command to work after experimenting with it both the main header container nor the path (horizontal menu).

    I did devise something of a solution, by using the padding tag in the horizontal menu CSS.

    .path {
    vertical-align: bottom;
    color: #FFF;
    font: normal 1.1em Verdana,sans-serif;
    padding: 4px 12px;
    padding-top: 400px;
    padding-bottom: 10px;
    padding-right: 10px;
    padding-left: 10px;
    }

    It works, but my question, is it efficient or might this pose some sort of incompatibility issue down the road?

    Marcel Brinkkemper

    (@macbrink)

    16 years, 11 months ago

    how about

    .path {
bottom:0px;
.......
}

    ?

    timt

    (@timt)

    16 years, 1 month ago

    I have similar problems in the footer, regardless of what I change, it’s either text at the bottom or the top. How does one vertical align center?

    #footer { background: #000000 url(images/footer.jpg) bottom center; background-repeat: no-repeat; text-align: center; height: 100px; width: 99%; clear: both; padding-top: 10px; padding-left: 10px; color: #ffffff; border-top: 5px solid #1CC1FF; }
    #footer a { color: #ffffff; }
    #footer a:hover { color: #aff268; }

    This CSS stuff is making me older. I’ve done a lot of HTML but I spend hours working on small things like this.
    Thanks for any help.
    Tim

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Vertical-Align Not Working on Horizontal Menu’ is closed to new replies.