PDA

View Full Version : Trying to use padding to move a text in a li



cadric
Mar 18th, 2010, 12:27 AM
Hi.

My problem is kinda hard to explain. But what I'm trying to do is to make a menu.

I have made a Unordered list and inside have some text that I want to move down to the middle of the box, when a user moves the mouse over the link.
Thats seems simple enough :)
But I am using padding to make the box bigger at the bottom, when the mouse is over the link..And want my text to move down to the middle of the box now.
Its easier to just show you the page, where I have a vertical list that works as I want it to. The problem is with the horizontal list...

http://platoon.dk/stuff/css3/test.html

I hope someone can see and understand what I'm trying to do and have a solution for me.

Excavator
Mar 18th, 2010, 01:47 AM
Hello cadric,
It's a little different centering vertically than the horizontal one you have working properly.
Give line-height a try, like this -
/*not working as intented*/
.case1 {
width:500px;
text-align: center;
border: 1px solid black;
overflow: auto;
}
.case1 ul {height: 30px;}

.case1 li {
display: inline;
}
.case1 li a {
float: left;
background: #cbcbcb;
color: #174867;
padding: 0em 30px 0 30px;
}
.case1 li a:hover {
line-height: 60px;
background: #ebebeb;
color: #67a5cd;
padding: 0px 30px 0 30px;
}

cadric
Mar 18th, 2010, 01:58 AM
Awsome thanks.
You are my hero right now. Been trying to figure that one out all night :D

Thank you, thank you, thank you :)

Now to style it with some transition :thumbsup: