WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Vertical-Align Not Working on Horizontal Menu (7 posts)

  1. Aurum
    Member
    Posted 7 years 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>

  2. Marcel Brinkkemper
    Member
    Posted 7 years ago #

    .path vertical aligns to .header

  3. Aurum
    Member
    Posted 7 years ago #

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

  4. Marcel Brinkkemper
    Member
    Posted 7 years 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

  5. Aurum
    Member
    Posted 7 years 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?

  6. Marcel Brinkkemper
    Member
    Posted 7 years ago #

    how about

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

    ?

  7. timt
    Member
    Posted 6 years 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

Topic Closed

This topic has been closed to new replies.

About this Topic