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:
  1.         <ul>  
  2.             <li><span class="menuspan"><a href="#">Kezdőlap</a></span></li>  
  3.             <li><a href="#">Ismertető</a></li>  
  4.         </ul>  
  5. ---------------------------------  
  6. #menu ul   
  7.     {  
  8.     padding:0 0 0 0;  
  9.     margin: 0px;  
  10.     list-style-type: none;  
  11.     }  
  12. #menu li   
  13.     {  
  14.     background-image:url(images_css/menu_1.gif);  
  15.     height:37px;  
  16.     text-align:left;  
  17.     padding-top:0px;  
  18.     }  
  19. #menu li:hover  
  20.     {  
  21.     background-image:url(images_css/menu_2.gif);  
  22.     }  
  23. #menu a  
  24.     {  
  25.     color:#FFFFFF;  
  26.     font-weight:bold;  
  27.     text-decoration:none;  
  28.     padding-left:25px;  
  29.     padding-top: 10px;  
  30.     }  
  31. .menuspan   
  32.     {  
  33.     padding-top:10px;  
  34.     }  
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?
‹ lightbox style overlay Csillagos szavazó szkript ›
 ■
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:
  1. #menu ul   
  2.     {  
  3.     padding:0 0 0 0;  
  4.     margin: 0px;  
  5.     list-style-type: none;  
  6.     }  
  7. #menu li {  padding: 0px 0px 0px 0px;}  
  8. #menu li a  
  9.     {  
  10.     display:block;  
  11.     line-height:37px;  
  12.     text-align:left;  
  13.     background-image:url(images_css/menu_1.gif);  
  14.     padding:0px 0px 0px 25px;  
  15.     }  
  16. #menu li a:hover  
  17.     {  
  18.     background-image:url(images_css/menu_2.gif);  
  19.     }  
  20. #menu a  
  21.     {  
  22.     color:#FFFFFF;  
  23.     font-weight:bold;  
  24.     font-size:14px;  
  25.     text-decoration:none;  
  26.     }  
Í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)