Two alignment CSS questions

Discussion in 'CSS' started by Nima, Dec 20, 2006.

  1. #1
    hey,

    I have two CSS problems that I cant solve.

    Please look at my code in pokereagles.com (please don't post a live link as I don't want search engines to pick it up yet).

    First - I want to align the Orange section in the center..

    Second- I want to align the text inside the orange section vertically in the middle.

    Thanks for your help...

    Nima
     
    Nima, Dec 20, 2006 IP
  2. crazybjörn

    crazybjörn Peon

    Messages:
    270
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #2
    ok, center align horizontally can be done through, "text-align: center;" in parent container, and "margin: 0 auto;" for the container itself.

    Vertical alignment is a bit more complicated than that. If the hight of the orange section won't change, then add either a top padding to the container, or a top margin for the content itself.
     
    crazybjörn, Dec 21, 2006 IP
    Nima likes this.
  3. Nima

    Nima Well-Known Member

    Messages:
    3,489
    Likes Received:
    243
    Best Answers:
    0
    Trophy Points:
    175
    #3
    Well, even the horizontal alignment is not working for me. Look at the code, I have text-align: center; in "body" (in css) and margin: 0 auto; in my #Header-Menu but the orange section (header menu) is not aligned center...
     
    Nima, Dec 21, 2006 IP
  4. JEET

    JEET Notable Member

    Messages:
    3,832
    Likes Received:
    502
    Best Answers:
    19
    Trophy Points:
    265
    #4
    Try adding a
    text-align: center;
    in #Header-Menu

    Also #Header-Menu ul has a float which is quite possible why other text is wrapping around it...
    Try removing it.
    Hope that helps.
    Bye :)
     
    JEET, Dec 21, 2006 IP
    Nima likes this.
  5. Nima

    Nima Well-Known Member

    Messages:
    3,489
    Likes Received:
    243
    Best Answers:
    0
    Trophy Points:
    175
    #5
    if I remove the "float:left;", all my links appear vertical... (I tried float:center; but it didnt work - I guess it doesnt exist).
     
    Nima, Dec 21, 2006 IP
  6. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #6
    Before going further, you need to fix your errors and use a complete and proper DTD. Without the latter, IE is in quirks mode where it uses the wrong box model and it doesn't understand {margin: 0 auto;}. Without the former, well, it's kinda hard to properly style a list if you don't properly code the list.

    cheers,

    gary
     
    kk5st, Dec 21, 2006 IP
  7. pr0xy122

    pr0xy122 Peon

    Messages:
    1,649
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    0
    #7
    thats right, kk5st got it :").
     
    pr0xy122, Dec 21, 2006 IP