Autor | Zpráva | ||
---|---|---|---|
Petroff Profil |
#1 · Zasláno: 19. 8. 2007, 11:05:03 · Upravil/a: Petroff
Potřebuji CSS pro shodné zobrazení MENU v FF,Opera,IE6+7
<div id="nav"> <ul> <li><a href="#">Novinky</a></li> <li><a href="#"> ....next </a></li> <li><a href="#"> ......next </a></li> <li><a href="#"> .........last </a></li> </ul> </div> Lze použít postup,kdy nastavím výšku a relativní pozicování u LI a odkazy A absolutně pozicované, abych při formátování odkazů zachoval nastavenou hodnotu LI {height:26px} ??? .... #nav li { margin: 0; padding: 0; border: 0px solid transparent; border-width: 0 0 3px 0; position: relative; height: 26px; } #nav li.hvr, #nav li:hover { border: 0 solid blue; border-width: 0 0 3px 8px; } #nav li a { position: absolute; left:0; bottom:0; display:block; width.... border.... margin... padding..... color: blue; text-decoration: none; font: bold xxx/yyy serif; } |
||
habendorf Profil |
#2 · Zasláno: 19. 8. 2007, 14:12:43
Proč position? Normálně dej pro a block a je to, ne?
|
||
Petroff Profil |
#3 · Zasláno: 19. 8. 2007, 20:36:13 · Upravil/a: Petroff
A je samozřejmě s nastaveným:
display:block Zapomněl jsem to uvést /OPRAVENO/ - pokud by někdo chtěl znát všechny vlastnosti/hodnoty u odkazů, bude nejlepší když popíšu výsledný vzhled: Odkazy mají border-top a border-bottom nastaveny tak, aby byly tečkovaně podtrženy/nadtrženy. Přitom se horní border přesně překrývá se spodním předchozí položky. Bez absolutního pozicovaní nevím, jak bych toho překrytí dosáhl ( ten tlustý LI:HOVER{border-bottom} by je od sebe odstrčil ). |
||
Časová prodleva: 30 dní
|
|||
Petroff Profil |
#4 · Zasláno: 18. 9. 2007, 14:01:35
Je víc než jisté, že přestože jsou odkazy absolutně pozicované (prý vyňaty z toku dokumentu !), tak rozhodí formát seznamu - konkrétně odstup položek od sebe.
A protože jsem u IE narazil na další případ, kdy absolutní a statické prvky se navzájem ovlivňují, rád bych věděl, jestli je to "specialita" Internet Exploreru. Anebo je to další věc k prověřování i u dalších browserů (nastanou-li problémy). Nevíte? |
||
Časová prodleva: 18 dní
|
|||
Petroff Profil |
#5 · Zasláno: 6. 10. 2007, 21:06:15
Nakonec jsem na to přišel - jde o bug IE ( podobná šílenost jako když máte NORMÁLNÍ = statické blokové odkazy v <li>položkách a při psaní zdrojáku dáte mezery mezi </li> <li>, což způsobí že IE dá text.uzel dovnitř <li></li> (nakonec) a dojde ke stejně vyhlížející BUGOmezeře)
Na tohle jsem přišel (pokusně): Pokud je obsahem <li> jen absolutně pozicovaný prvek(prvky), objeví se pod takovouto <li>položkou mezera navíc 1.ŘEŠENÍ Nenechávat tam pouze absolutně pozicovaný prvky, přidat např.text stačí jediný znak, vhodný Příklad: <li> <a href="#">x-Item</a></li><li> <a href="#">y-SubMENU</a><ul>........</ul></li> 2.ŘEŠENÍ Ta mezera navíc je bílý vodorovný proužek, silně to připomíná škvíru když vložíme do <div> normální <img>. Velikost je úměrná velikosti písma, např. když zvětšíme font-size:100px , dostaneme tlustý pás pod obrázkem. Totéž platí i pro mezeru pod <li>. U obrázku stačí nastavit display:block a je po mezeře, což u (blokové) položky nepomůže. Zato aplikací libovolné hodnoty na vertical-align: [middle/bottom/top] je po problému. Příklad: li {vertical-align: top} 3.ŘEŠENÍ Jestliže je velikost mezery úměrná velikosti písma, stačí nastavit nulovou velikost Příklad: li {font-size:0} |
||
Časová prodleva: 16 let
|
0