Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jan 2007
    Location
    Sweden
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Position elements horizontal

    Hey people!

    I'm having a bit of a problem positioning two things next to each other. Here's a picture of what I'm trying to do:
    Horizontal bar

    If you look at the orange bar, you'll see I have a few text links on the left and a small form to the far right. Easy to do with a table and some valign properties, but I'd like to manage without.

    The text links are an unordered list element. This is the markup:
    Code:
    <div id="nav">
        <form action="">
            <input type="text" />
            <input type="password" />
            <input type="submit" value="Logga in" class="button" />
        </form>
        <ul>
            <li><a href="#">Artiklar</a></li>
            <li class="current"><a href="#">Recensioner</a></li>
            <li><a href="#">Nyheter</a></li>
        </ul>
    </div>
    If I have to float something, I'd like it to be the form, because it will only be displayed if the user is not logged in. However, I can't get it to work with paddings and margins. This is what happens if I put float:right on the form: Horizontal bar

    I ended up making it position:absolute, but that apparently broke something in IE. Is there an easy way to position things horizontally with a "valign" center sort of effect?

    Cheers

  • #2
    Regular Coder
    Join Date
    Jun 2004
    Posts
    495
    Thanks
    0
    Thanked 82 Times in 80 Posts
    vertical-align:middle or line-height:
    Seeing the ccs would be useful.

  • #3
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    If you know the relative height of what you're trying to center you can always set the top: 50% and apply a negative top margin to half of the height of the element. IE:

    Code:
    li#artiklar { 
      height: 2em;
      width: auto; 
      position: absolute;
      top: 50%;
      left: 0;
      margin-top: -1em;
     }

  • #4
    New Coder
    Join Date
    Jan 2007
    Location
    Sweden
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sure, here's the css:
    Code:
    #nav {
        margin:7px 0;
        padding:8px 5px;
        background:#deaf40;
    }
    
    #nav ul {
        list-style:none;
    }
    
    #nav li {
        display:inline;
        margin:0 7px;
    }
    
    #nav form {
        float:right;
    }
    
    #nav form input {
        padding:2px;
        border:1px solid #a9842c;
        background:#ebe2cc;
        font:9px verdana;
    }
    
    #nav form .button {
        border:0;
        background:#9e7921;
        color:#fff;    
    }
    Tried applying vertical-align almost everywhere to no visible effect. How should I use it?

  • #5
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    Quote Originally Posted by pakmannen View Post
    Sure, here's the css:
    Tried applying vertical-align almost everywhere to no visible effect. How should I use it?
    Vertical-align is not intended to be used for vertically centering elements on a page (oddly enough).

    If used in the context of table cells (like td or th) then vertical-align will behave as you'd expect.

    If used on inline elements (non-block level elements such as img or strong) they actually behave like the old depreciated img attribute "align." This has more of an effect on the text that wraps around the element than the element itself.

    If used on any other element the rule is typically ignored (implicitly overridden to "inherit") which is what you're noticing.

    Line height, or positioning the element (like I mentioned above with the top: 50%) are the recommended methods for vertical centering. Vertical-align is often misunderstood and misapplied in this context.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •