li elemen belül szöveg vertikális pozicinálás
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: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?
■ 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 #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?
display: block;
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!
li:hover szabványos
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.
hover és IE
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.
minek bonyolitani?
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...
display:table-cell
line-height
szerk.: most látom csak, hogy vbence megelőzött. korán volt még, na :)
V2..
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:
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?
Minden jó!!
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)