Menu vertically center

Discussion in 'CSS' started by cohq82, Apr 21, 2008.

0
  1. #1
    Hi all,

    I am new to CSS and this forum. I designed the below code for menu. However, I cannot make the AAA, BBB, and CCC to stay center vertically. Is there anyway to do this just by changing to CSS only? Thanks

    <head>

<style type="text/css">
* {
margin: 0px auto;
padding: 0;
}

body {
font-family: Tahoma;
font-size: 0.8em;
}

#Menu {
height: 30px;
border: thin solid Blue;
}

#Menu ul {
border: thin solid red;
height: 30px;
background-position: center;
text-align: center;
vertical-align: middle;
}

#Menu li {
float: left;
list-style: none;
border: thin solid #00FF00;
}

#Menu li a {
float: left;
font-size: 0.85em;
font-weight: bold;
padding-right: 10px;
padding-left: 10px;
}

#Menu li a:hover {
text-decoration: underline;
border: thin solid #663399;
}

</style>

</head>
<body>

<div id="Menu">
<ul>
<li> <a href="">AAA</a> </li>
<li> <a href="">BBB</a> </li>
<li> <a href="">CCC</a> </li>
</ul>
</div>

</body>
</html>
    HTML:
     
    cohq82, Apr 21, 2008 IP
  2. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #2
    What does your complete code look like? (For the record, you should be declaring your default font size and leading - that's line-height in CSS parlance - in the body selector, and then use top/bottom padding in your list anchors. Also do not add margin: 0 auto; to everything via the universal selector; just use margin: 0; and be done with it.)
     
    Dan Schulz, Apr 23, 2008 IP
  3. cohq82

    cohq82 Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    My code is complicated but I just took out the basic of what needs to be fixed here.

    The requirements are

    1. Height must be fixed (30px in this case)
    2. It must be vertical aligned
    3. The box around AAA, BBB, CCC must be space evenly across horizonal
    4. There will be more DDD EEE FFF

    Thanks

     
    cohq82, Apr 24, 2008 IP
  4. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I've been doing this stuff since 2002, and have been acknowledged as a Web design guru by more than a few people (in fact, I happen to be the "Web Design Guru of the Year" over at the SitePoint forums, as well as a staff member there).

    So go ahead and throw your code at me. (Though I will say that the fixed height will break the layout if the text is resized or viewed on a monitor that has its .dpi settings configured to anything other than 96 .dpi)
     
    Dan Schulz, Apr 24, 2008 IP