ugrás a tartalomhoz

li elemen belül szöveg vertikális pozicinálás

napalm · 2008. Júl. 23. (Sze), 09.42
Van egy menüm, ami remekül működik.
Unordered list <li> elemei tartalmazzák a menüpontokat. Háttér megadva neki, egér "over"-re háttér változás, majdnem minden klappol.
Egy problémám van: a <li> elemen belül a szöveg vertikális pozicionálását nem tudom szabályozni.

Így néz ki a HTML és CSS kód:

		<ul>
			<li><span class="menuspan"><a href="#">Kezdőlap</a></span></li>
			<li><a href="#">Ismertető</a></li>
		</ul>
---------------------------------
#menu ul 
	{
	padding:0 0 0 0;
	margin: 0px;
	list-style-type: none;
	}
#menu li 
	{
	background-image:url(images_css/menu_1.gif);
	height:37px;
	text-align:left;
	padding-top:0px;
	}
#menu li:hover
	{
	background-image:url(images_css/menu_2.gif);
	}
#menu a
	{
	color:#FFFFFF;
	font-weight:bold;
	text-decoration:none;
	padding-left:25px;
	padding-top: 10px;
	}
.menuspan 
	{
	padding-top:10px;
	}
A lista elemem tehát 37 pixel magas, és azt szeretném, hogy a benne levő link szöveg kb a közepén jelenjen meg.
A #menu:a definicióban a padding-left értéke (25px) remekül látszódik is, pontosan 25 pixellel el van tolva a szöveg, örülök. Ugyanebben a részbe hiába vésem be, hogy a link 10 pixel távolságban legyen a felső résztől (padding-top:10px), ugyanúgy a <li> elem tetejéhez ragad.

Íme egy kép a problémáról
(itt a felső menüpont felett van az egér).

A kódból látszódik, hogy probálkoztam egy <span> tag beillesztésével is, azonban ez sem járt sikerrel. A link továbbra is makacsul felmászik a <li> tetejére.

Tud valaki megoldást erre a problémára?
 
1

display: block;

pekka · 2008. Júl. 23. (Sze), 10.17
Szia!

A megoldás szerintem az, hogy a listaelemek block típusúak legyenek, így már működni fog a padding.
Viszont a #menu li:hover nem túl szabványos, úgy inkább valami ilyesmi kellene:
#menu LI A{
display: block;
height:27px;
width: (a menü szélessége)
padding: 10px 0px 0px 25px;
text-align:left;
background-image:url(images_css/menu_1.gif);
}
#menu LI A:hover{
background-image:url(images_css/menu_2.gif);
}

Hát remélem, tudtam segíteni!
5

li:hover szabványos

Jano · 2008. Júl. 24. (Cs), 03.17
A li:hover kiválasztó teljesen szabványos! Ezzel lehet megvalósítani például csak CSS segítségével lehulló menüket.
Sajnos az IE windows-os 7-es elötti verziók nem támogatják a hover-t, csak az a elemen, de erre vannak okos behaviour megoldások.
2

hover és IE

vbence · 2008. Júl. 23. (Sze), 10.19
Az ie (6?) csak az A elem esetén támogatja a hovert. Ezért a méret, háttérkép, display: block az A elemre kellene. Az A elemen belül a link szövegét beteheted egy SPAN elembe, aminek szintén display: block-ot adsz, és akkor a SPAN padding-top-jával beállíthatod a távolságot az A elem (tehát a háttér) tetejétől.

Ha vertikálisan középre szeretnéd rendezni a szöveget, használd a line-height css paramétert, amit állíts az egész elem magasságára (asszem nálad 37px), ekkor a szöveg középen lesz egy ekkora sorban.
3

minek bonyolitani?

toro · 2008. Júl. 23. (Sze), 10.40
minek bonyolultkodni?

a li blokkszintu elemnek tekintheto, nyugodtan ra lehet tenni a paddingot, a szelesseget es a magassagot ennek megfeleloen kell beloni. Igy az <a> elem helyre rakhato.
IE6 alatt valoban nem megy a li:hover, de ha nagyon kell letezik ra javitas, a google-on meg lehet talalni.

Ha megis inkabb az a-ra akarod tenni a hovert, akkor tenyleg blockkent kell definialni, akkor mehet bele a padding, es a width/height, no, meg a hover.

A span nezetem szerint felesleges, foleg akkor ha dispaly:block-ot akarsz ratenni, hiszen arra ott a div. De az se kell ide.

Vegul csak csendesen jegyzem meg, hogy az ordogtol valo <table>/<td> elemmel es a cellara ertelmezett fuggoleges igazitassal ez a kerdes nem is lenne kerdes...
6

display:table-cell

Jano · 2008. Júl. 24. (Cs), 03.19
A csendes megjegyzést javítsuk ki inkább arra, hogyha lehetne a gyakorlatban is display:table-cell-t megadni (támogatni az IE6) akkor nem is lenne kérdés!
4

line-height

hector · 2008. Júl. 23. (Sze), 11.00
Ne height-et használj, hanem line-height-et. Ezzel ugyanazt a magasságot éred el, de a szöveg középen lesz. Nem kellenek paddingok sem felülre, sem alulra.

szerk.: most látom csak, hogy vbence megelőzött. korán volt még, na :)
7

V2..

napalm · 2008. Júl. 24. (Cs), 08.12
Kipróbáltam a fent leírtakat, köszönöm az ötleteket.Félsiker..

A li:hover-t kiszedtem, tartalom jellege miatt elképzelhető, hogy 1000 éves gépeken is nézni fogják - inkább legyen mindennel kompatibilis (ha lehet ilyenről beszélni..).

Azonban van egy kis bibi: a "display:block;" miatt térközöket hagy az elemek közt!
A CSS ide vonatkozó része így néz ki:

#menu ul 
	{
	padding:0 0 0 0;
	margin: 0px;
	list-style-type: none;
	}
#menu li {  padding: 0px 0px 0px 0px;}
#menu li a
	{
	display:block;
	line-height:37px;
	text-align:left;
	background-image:url(images_css/menu_1.gif);
	padding:0px 0px 0px 25px;
	}
#menu li a:hover
	{
	background-image:url(images_css/menu_2.gif);
	}
#menu a
	{
	color:#FFFFFF;
	font-weight:bold;
	font-size:14px;
	text-decoration:none;
	}
Íme egy kép a problémáról

Hmm.. szoval a kerdes az, hogy a display:block tulajdonsággal ellátott <li> elemek közül hogy lehet kieszedni a függőleges távolságot? Próbálkoztam magának a li elem paddingjának nullázásával, hiába..

Ötlet?
8

Minden jó!!

napalm · 2008. Júl. 24. (Cs), 08.35
Storno!

HTML-ben benne hagytam piszkokat, amik nem kellettek volna oda :PP user error.
Minden jó, köszi a segítséget!

(Ezzel megszületett első, HTML táblákat egyáltalána nem tartalmazó felületem.. hát van szívás azért ezzel, de minden kezdet nehéz :P. Következő már jobban fog menni)