CODEWITHSUNDEEP
htmlcsstextmenualignment
Zain Hasan
Zain Hasan

Reputation: 13

Adjusting the vertical position of text in a menu

i am trying to build a basic hover menu with blank background images and text.

I have created two images with normal and hover state, and for the text the code is in a table with one row and multiple td's. This is an example of one:

                            <td align="center">
                            <div id=menu>
                               <ul style="padding:0px;">
                                 <li><a href="#">WHO WE ARE</a></li>
                               </ul>
                            </div>

I have a CSS running to control the hover color and background change.

#menu ul li{
font-family:Arial, Helvetica, sans-serif;
font-weight:700;
font-size:14px;
color:#666;
display:block;
background-image:url(resource/try.gif);
height:35px;
background-repeat:no-repeat;
width:186px;
}

#menu ul li a:hover{
font-family:Arial, Helvetica, sans-serif;
font-weight:700;
font-size:14px;
color:#FFF;
display:block;
background-image:url(resource/try2.gif);
height:35px;
background-repeat:no-repeat;
width:186px;
}

#menu ul li a:visited{
text-decoration:none;
color:#666;
}

The problem is that although all this works fine my text is aligned to the top and i am unable to change its position

I have tried every possible trick, worked with vertical-align property but it doesn't seem to work.

Could any one help me with this please?

Thanks in advance.

Upvotes: 1

Views: 927

Answers (4)

moongoal
moongoal

Reputation: 2956

Maybe you should work with the padding-top property of your li element, try adding something like padding-top: 10px. If it aligns with the bottom border then add the same value to the padding-bottom property of the element.

EDIT:

Try this way:

#menu ul li {
 ...your attributes...
 vertical-align: middle;
 line-height: 35px;
}

Upvotes: 0

stackr
stackr

Reputation: 2742

I see that you use "padding:0px" That locks your stuff to the upleft-corner.http://www.tizag.com/cssT/padding.php shows you how to use padding.

try using: padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px; you will see that it has moved.

Upvotes: 0

jondinham
jondinham

Reputation: 8511

you need to add line-height for everything

Upvotes: 1

Fernando Valente
Fernando Valente

Reputation: 1096

I'd use padding-top.

http://www.w3schools.com/css/css_padding.asp

Upvotes: 0

Related Questions