CSS kérdésem van

[Kiskalóz]

Nem vagyok nagy CSS guru de ezek mi?

#navigation ul ul li

#navigation ul ul li:hover 

[KGigi]

Megy egyre lejjebb a fában. Az elsõ sor esetén pl. listába beágyazott lista listaelemeire ad meg formázást.

[kléni]

Ugyan nem néztem végig, de ha ul ul-t hazsnálsz, minden benne lévõ ul-ra vonatkozik a stílus. Erre megoldás az ul > ul, akkor csak az elsõ ul-ban lévõ ul-okat formázza, és nem az elsõ ulban lévõ ulban lévõ ulokat. Hehh, ez értelmes lett

Ellenben láthatod, hogy ez így nemm igen szép, és mindnek be kell állítani külön, inkább hazsnálj egy jquer-s plugint, azzal nem kell külön beállítani egyesével.

Edited March 6, 2011 by kléni

[KGigi]

Ez esetben szerintem megvan a hiba oka.

[payskin]

Kléninél a pont!

[Giraffe1]

A gond csak az, hogy az ul > ul IE6 alatt nem fog menni.

 

jQuery-vel meg nagyon sok mindent meg lehet oldani, de menüt NEM. Mert ha a felhasználó böngészõjében ki van kapcsolva a JavaScript, akkor nem tud még csak navigálni sem az oldalon.

 

Vagyis - egyelõre - marad az <ul class="level1">, <ul class="level2">, <ul class="level3"> megoldás... Vagy ha az IE6 az adott "oldalon nem támogatott böngészõ", akkor valóban a legegyszerûbb és legpraktikusabb az ul > ul.

[kléni]

Igazad van, én már eltemettem az IE6ot végleg (és nektek sem sok időtök van: http://www.ie6countdown.com/), és nem foglalkozom azzal az a fél százalékkal (ha jól emlékszem[pontos adat]) akinek nincs JavaScriptje (bár persze ezt is ki lehet küszöbölni).

[Giraffe1]

Jó annak, aki megteheti. Sajnos nálunk még mindig 5% közeli az IE6-tal látogatók aránya, és nem tehetem meg, hogy olyan kódot írok, amitõl szétesik vagy meg sem jelenik az oldal... Az más kérdés, hogy végre sikerült kisírnom, hogy nem kell 100%-os egyezés pl. design szinten, pl. saroklekerekítés mehet n+1 felesleges grafikus elem nélkül.

 

A JS-sel hasonló a helyzet: korlátozott lehet a felhasználói élmény, de akadályt nem jelenthet a hiánya. (Hozzáteszem, szerintem is ez így korrekt.)

[Pjotr]

Ha egy táblázatban vannak <a> elemek, és rájuk szeretném engedni a display:block; varázslatot, akkor nem járok sikerrel. Az lenne a cél, hogy a cella minden pontja katitntható legyen, ne csak az <a> szövege. Megoldás?

[payskin]

Nem látom be, miért ne mûködne, legfeljebb a magasságát be kellene állítani...

[Pjotr]

Pedig nem megy, hiába állítom be a cella magasságát, nem fogja kitölteni az <a>. Dev Tools-szal sasolom, de semminek sincs káros hatása rá.

[kléni]

Az a elemnek próbáld meg a magasságát állítani.

[Pjotr]

Ha megadom az <a> magasságát, akkor széthúzza a cellát, de kattintani így is csak a szöveget lehet.

[arpsoft]

A cella legyen position:relative, mindenféle pozíció megadás nélkül, az a legyen position:absolute; left: 0px; top: 0px; height: 100%; width: 100%;

[Pjotr]

Nem nyert, ha ezeket adom meg nekik, akkor minden kimászik a táblázatból a lap bal felsõ sarkába.

[Dani991]

Azt hiszem, a phpBB egyik sablonjában láttam ezt a megoldást: tegyél az a tagbe egy span-t, aminek a szélessége és magassága 100%.

<a><span></span></a>

[Pjotr]

Nem tudom, hogy ez miért mûködne. (Amúgy nem megy.)

Gondolom, azzal van a baj, hogy a táblázat elemeinek speciális a display tulajdonsága, ezért nem megy normálisan a display:block; sem.

 

Szerintem rácsalok majd egy kis Javascript-tel.

[KGigi]

Ez nagyon érdekes. Csináltam egy demó oldalt, ami egyetlen táblázatból, és benne linkekből áll. A CSS-be összesen két dolgot tettem: megadtam a td szélességét, illetve a display:block-ot a linkeknek. IE, FF 3 és Opera alatt tökéletes. Két tippet google-öztem össze. Az egyik, hogy a td-knek is megadod, hogy display:block, a másik egy * { zoom: 1 }.

[Pjotr]

A zoom-mal már próbálkoztam, nem jött be. A td{display:block;} megint nem túl jó a fent említett speciális display dolog miatt.

 

Mondjuk, ha Firefox-ban megy simán a display:block; az <a>-kra, akkor az nem is rossz, ahol használnák ezt az alkalmatosságot, ott Firefox van.

[KGigi]

De milyen böngészõ alatt nem sikerül? Mint írtam, nekem mindháromban megy, ami kéznél volt.

[Pjotr]

Google Chrome (tegnap írtam a Dev Tools használatát )

[payskin]

Na, most már én is kipróbálom... :-)

[KGigi]

Google Chrome (tegnap írtam a Dev Tools használatát )

Jogos. Leszedtem egy Chrome Portable-t, azzal is megy. Biztosan minden rendben van a CSS-ben?

 

A kódom kicsit őskori, még az egyik régi IE-hez írt teszt része egy fórumon, de megteszi:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
   "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>IE display:block test</title> 
<style type="text/css"> 
td { width: 120px; } 
a { display: block; } 
a:link, a:visited { background: #f00; } 
a:hover, a:active { background: #00f; } 
</style> 
</head> 
<body> 
<table> 
  <tr> 
    <td><a href="">Link 1</a></td> 
    <td><a href="">Link 2</a></td> 
    <td><a href="">Link 3</a></td> 
  </tr> 
</table>
</html>

[Pjotr]

Nem látok semmilyen káros hatást a Dev Tools-ban, kivéve azt, hogy nem tudom megadni az <a> elem magasságát, sárga háromszöget dob rá.

 

Akkor megy, ha a <td>-nek tudom a magasságát, az <a>-nak pedig beállítom, hogy height:100%; a display:block; mellett. De ez nagyon nem az igazi, eleve nem tudom előre a cellák magasságát, plusz a height100%; miatt nem lehet vertikálisan középre biggyeszteni a szöveget.

[payskin]

Hát, valami húzós gond lehet, drága barátaim, mert nálam (is) működik.

 

<!DOCTYPE html> 
<html> 
<head> 
    <title>Display Block Test</title> 
    <meta charset="iso-8859-2">
    <style>
        * { margin: 0; padding: 0; border: 0; }
        table { width: 100%; }
        td { width: 33%; }
        a { color: blue; }
        a:hover { color: red; background-color: yellow; }
        td a { display: block; }
    </style>
</head> 
<body>
<table> 
    <tr> 
        <td><a href="#">Link 1</a></td> 
        <td><a href="#">Link 2</a></td> 
        <td><a href="#">Link 3</a></td> 
    </tr> 
</table>
</body>
</html>