[css/html] Problem z menu poziomym

Dla specjalistów Webmastering
#1

Mam problem z menu poziomym, tekst normalnie wyświetla się na środku menu, a po najechaniu myszką przenosi się na dół menu. A chcę by pozostał na środku. Po zmienia padding-top tekst jest na środku ale razem z nim tło ucina się na dole.

Kod css:

@import url(http://fonts.googleapis.com/css?family=Capriola);

#menu, #menu ul, #menu ul li, #menu ul li a{


	padding: 0;

	margin: 0;

	line-height: 1;

	font-family: 'Capriola', sans-serif;


}


#menu:before, #menu:after, #menu > ul:before, #menu > ul:after {


	content: '';

	display: table;


}



#menu:after, #menu > ul:after {


	clear: both;


}


#menu {


	zoom:1;

	height: 49px;

	background: url(menubg.png) repeat-x center bottom;

	border-radius: 2px;


}


#menu ul{


	height: 49px;


}


#menu ul li{


	float: left;

	list-style: none;


}


#menu ul li a{


	display: block;

	height: 17px;

	padding: 10px 30px 0;

	margin: 4px 2px 0;

	border-radius: 2px 2px 0 0;

	text-decoration: none;

	font-size: 15px;

	color: white;

	text-shadow: 0 1px 1px rgba(0, 0, 0, .75);


}


#menu ul li:first-child a{

	margin: 4px 2px 0 0;

}


#menu ul li a:hover, #menu ul li.active a{

	background: url(menuactive.png) center bottom;

	display: block;

	height: 17px;

	margin-top: 0px;

	padding-top: 25px;

	color: white;

	text-shadow: 0 1px 1px rgba(255, 255, 255, .55);

}

Kod html:

[/code]

Obrazek menubg: menubg.png

Obrazek menuactive: menuactive.png

#2

Usuń:

padding-top: 25px;

z

#menu ul li a:hover, #menu ul li.active a{

O taki efekt Ci chodziło?

Jeśli nie opisz dokładniej i napisz pod jaką przeglądarką nie działa.

Pozdro

#3

Po najechaniu na element menu tekst przesuwał się w dół: http://scr.hu/5ht/1647n

Po usunięciu padding-top tekst nie przesuwa się ale ucina tło: http://scr.hu/5ht/jddao

#4

Ok czaję.

To tak, wywal ten

padding-top: 25px;

Po co miałeś tam marginesy? Wywaliłem je z dwóch miejsc. Zdublowanie wysokości dla aktywnego a też wywaliłem Fragment gdzie zmieniałem:

#menu ul li a{

   display: block;

   height: 33px;

   padding: 15px 30px 0;

   border-radius: 2px 2px 0 0;

   text-decoration: none;

   font-size: 15px;

   color: white;

   text-shadow: 0 1px 1px rgba(0, 0, 0, .75);


}


#menu ul li:first-child a{


}


#menu ul li a:hover, #menu ul li.active a{

   background: url(menuactive.png) center bottom;

   display: block;

   margin-top: 0px;

   color: white;

   text-shadow: 0 1px 1px rgba(255, 255, 255, .55);

}

Ogólnie nie warto np dublować: display: block; bo w aktywnym stylu powinniśmy wpisywać tylko co ma się zmienić a “domyślne” ustawienia zostają.

#5

Wielkie dzięki ! Tego potrzebowałem ! Naprawdę super ! =D>