Táblázat optimalizálása

[Ika-Bus]

Ma csináltam egy hamarosan megjelenõ kamionos játékhoz egy Gyakran Ismételt Kérdések oldalt. Az XHTML legszigorúbb (Strict) szabványai szerint készítettem el (át is ment a W3C Validator ellenõrzésén a HTML és a CSS is), de rendesen csak a Firefoxban jelenik meg, mert ebben csináltam. A táblázatnak normál esetben csak egy vonala van, a két feltett kérdés közt (késõbb ha bõvítem mindegyik közt lesz), de Opera-ban pl. mindegyik cella be van keretezve, IE-ben két csík van, stb. Ezzel nem igazán tudok mit kezdeni, ezért ideiglenes kényszermegoldásként kiírtam, hogy a megtekintés Firefox-szal ajánlott. Tudtok segíteni? ír:

[Pjotr]

<div class=kerdes>

</div>
<div class=valasz>

</div>

 

div.valasz {
   border-bottom: 2px solid #000000;
}

 

Én div-ekbe pakolnám, CSS-ben megadva egy bordert. Sőt, JS-et lehetne mögé rakni, hogy a kérdésre kattintva jelenjen meg a válasz.

[payskin]

Alapvetően az a baj, hogy egy táblázat megjelenését legalább féltucat különböző tulajdonság írja le, ebből te definiáltál kettőt vagy hármat, ráadásul a felét a HTML-ben, a másik felét a CSS-ben. Miért?

 

Ez így teljesen nem oké, nemcsak azért mert mindent* a CSS-ben kéne, hanem mert így a maradék tulajdonságokat a böngészők a saját stíluslapjukból töltik ki. Az IE például alapértelmezés szerint szétválasztja a cellakereket, az Opera meg nem értelmezi a frame="above" dolgot -- speciel én is most látok ilyet először (?!??!?!?!) -- és a border="1"-re bekapcsolja az összes bordert.

 

Ja, igen, arról nem is beszélve, hogy erre egyáltalán nem is kéne táblázatot használni. Ha ez egy felsorolás, akkor én -- meglepő módon -- felsorolásba (rendezetlen listába) pakolnám. (Lehet, hogy rendezett, gondolkodnék rajta egy picit.)

 

 

*Sajnos nem lehet mindent: az IE nem ismeri a border-collapse tulajdonságot, ezért a cellspacinget a

-ben kell megadni.

[Pjotr]

A listás megoldás hogyan nézne ki? Nem a listára gondolok konkréten, hanem arra, hogy egy <li> tagon belül hogyan helyezed el a kérdés-válasz párost.

[Ika-Bus]

Az elején listával próbálkoztam, de azért lett táblázat belõle, mert nem tudtam megoldani, hogy a bal oldali számok ne a kérdéssel egy vonalban legyenek, hanem az egész felsoroláselem közepén, mint most. Ha van erre valami megoldás, akkor inkább úgy csinálnám meg.

[payskin]

Nézzétek meg ezt, elég jó kiindulópontnak tûnik

 

Itt van hozzá a tutorial

 

Nem biztos, hogy pont ezt a hatást el lehet vele érni, és egyébként is függõlegesen pozicionálni nem egyszerû CSS-ben. Viszont háttérképként is meg lehetne csinálni szépre a számokat, és azt könnyû középre igazítani, igaz, több munka volna vele.

[Pjotr]

Simán <li>-n belül <h2> és <p>? Bennem az volt, hogy ez nem megy, de akkor csak álmos vagyok.

[arpsoft]

Miért ne menne? A <li> is csak egy doboz.

[payskin]

Ahogy mondja.