Aktualnie lista artykułów wygląda tak: zobacz zrzut. Jest tabelą zawierającą 2 komórki w każdym wierszu. W pierwszej znajduje się tag <img>.
Jak zmodyfikować kod, aby był semantyczny i działał poprawnie w większości przeglądarek? Czy tabela jest odpowiednim znacznikiem do opisania listy artykułów, która zawiera: obrazek, tytuł i opcjonalnie opis?
Tymczasowo użyłem listy <ul>: zobacz zrzut. Zawartość <li> raczej nie da się wyrównać do środka w pionie, co może spowodować utrudnienie w czytelności.
Ważne, aby można było dowolnie ostylować skórkę - małą ilością kodu i parametrów w CSS i HTML!
Być może najlepszym znacznikiem dla listy artykułów jest <ol>. Niestety automatyczna numeracja nie zastąpi numerów generowanych przez skrypt - atrybut start ma status "deprecated" (potępiony). Oczywiście taką listę można lepiej ostylować (choć tabelę też się da).
Spójrzcie jeszcze na dotychczasowe tabelkowe rozwiązanie. Dopóki przeglądarki nie zaczną obsługiwać w pełni CSS 2, można zapomnieć o takim efekcie w przypadku użycia <ol>. Można jednak uzyskać też ciekawy efekt: zobacz zrzut - tylko tak jak pisałem - tytuły bez opisów psują wygląd.
Chcę uniezależnić plik CSS od szablonów, które znajdują się tylko w 1 katalogu - VIEW. Skórki zawierają tylko: arkusze stylów, główny layout i ikony. Co robić? "Inwestować" w listę <ol> i czekać z nadzieją, aż będę mógł spokojnie zastosować display: table dla <ol> i display: row dla <li> (jeśli tak jest poprawnie, bo brakuje jeszcze display: cell)?
[HTML][CSS] Lista artykułów - semantyczny kod
Re: [HTML][CSS] Lista artykułów - semantyczny kod
Dla LI display: block z width i height odpowiednim + border na spód. W środku IMG z marginesem + tekst a UL na display: block i borderem na lewo, prawo i na górze.Spójrzcie jeszcze na dotychczasowe tabelkowe rozwiązanie. Dopóki przeglądarki nie zaczną obsługiwać w pełni CSS 2, można zapomnieć o takim efekcie w przypadku użycia <ol>.
Efekt do osiągnięcia bez większych problemów.