HTML vs. CSS

[Sulien]

Problem je rađenje kataloga - po standardima (a kako bi drugačije?). U mnogim slučajevima ista se stvar može napraviti na više načina u XHTML-u i kasnije style-ati CSS-om da bi se dobio jednak rezultat. U ovom slučaju moram li zaista žrtvovati semantičko značenje da bi mogao style-ati stvar kako bih htio?

Što želim dobiti na ekranu? Artikle u katalogu posložene u dvije ili tri kolumne. Svaki artikl je kućica dimenzija posjetnice - na lijevoj strani je thumbnail, na desnoj opis i cijena. Prilično standardno.

Code:

<div id="katalog">        <div class="artikl">       <img src="artikl1.jpg" alt="opis..." />       <div>          <p><strong>Ime artikla</strong></p>          <p>Opis artikla</p>          <p>Cijena</p>       </div>    </div>        <div class="artikl">       ...    </div> </div>

Code:

<ul id="katalog">        <li>       <img src="artikl1.jpg" alt="opis..." />       <div>          <p><strong>Ime artikla</strong></p>          <p>Opis artikla</p>          <p>Cijena</p>       </div>    </li>        <li>       ...    </li> </ul>

Code:

<dl id="katalog">        <dt>Ime artikla</dt>       <dd>Opis artikla</dd>       <dd>Cijena</dd>       <dd><img src="artikl1.jpg" alt="opis..." /></dd>        <dt>Ime drugog artikla...</dt>       <dd> ... </dd>        </dl>

Ja sam najviše za rješenje #3, makar mi to prilično otežava CSS-anje svega toga. Npr. vjerujem da je nemoguće od toga napraviti urednu floatanu listu u dvije ili tri kolumne zbog činjenice da DT i njegovi DD nisu enkapsulirani u neki element kojeg bi mogao floatati lijevo.

Što vi mislite? Slobodno predložite modifikacije priloženih primjera. DIV-ovi, UL/OL ili DL? Kako bi na ekranu složili definition listu? Da li bi detalje unutar jednog artikla trebalo staviti u unordered listu?

[gog]

Radi onako kako ti je jednostavnije, što se zamaraš glupostima, tebi nešto može biti logično da je lista, drugome može biti dl, trećemo može biti nešto treće

Problem kod definition lista je nemogućnost ubacivanja block level elemenata, tako da je to ograničavajući faktor ukoliko ćeš kasnije nešto htjeti mijenjati...

Mada s obzirom da vjerojatno artikle generiraš iz baze nije problem jednog dana preuraditi i template ako je potrebno...

[pixelpusher]

Ja bih mozda krenuo i u ovom smjeru:

Code:

<div class="item">    <h4>Ime artikla</h4>    <p class="image"><img src="artikl1.jpg" alt="opis..." /></p>    <p class="desc">Opis artikla</p>    <p class="price">Cijena</p> </div>

...lijeve margine, float na "image", malo negativne top margine za desc i eto..

[pixelpusher]

gog wrote:

Radi onako kako ti je jednostavnije, što se zamaraš glupostima...

Tesko je objasnit te porive ali ja ga u potpunosti razumijem

[gog]

[quote="pixelpusher"]Ja bih mozda krenuo i u ovom smjeru:

Code:

<div class="item">    <h4>Ime artikla</h4>    <p class="image"><img src="artikl1.jpg" alt="opis..." /></p>    <p class="desc">Opis artikla</p>    <p class="price">Cijena</p> </div>

A kad već picajzliramo, <p class="image"> je više manje nepotrebno, css atributi za konkretnu sliku se mogu dodijeliti i sa ".item img{...}"

[pixelpusher]

gog wrote:

A kad već picajzliramo, <p class="image"> je više manje nepotrebno, css atributi za konkretnu sliku se mogu dodijeliti i sa ".item img{...}"

Osobno ne bi bas ovo nazvao picajzliranjem mada vjerujem da to mnogi tako dozivljavalju.
Meni je obicaj svaki content (tekst ili sliku) stavljati u neki "nizi" container radi vece kontrole i sireg izbora mogucnosti. Primjer, probaj staviti top padding na image. Ne ide, a?
Od tuda p class image. A ovako i ljepse izgleda kad maknes styling.

[Sulien]

pixelpusher, jako dobro rješenje... baš sam se pitao hoće li netko spomenuti headinge

kao što sam rekao meni radi semantike najviše rokaju definition liste ali njih jednostavno ne možeš floatati u nekakav grid

haha možda postoji microformat za kataloge
not.

[gog]

pixelpusher wrote:

gog wrote: A kad već picajzliramo, <p class="image"> je više manje nepotrebno, css atributi za konkretnu sliku se mogu dodijeliti i sa ".item img{...}" Osobno ne bi bas ovo nazvao picajzliranjem mada vjerujem da to mnogi tako dozivljavalju. Meni je obicaj svaki content (tekst ili sliku) stavljati u neki "nizi" container radi vece kontrole i sireg izbora mogucnosti. Primjer, probaj staviti top padding na image. Ne ide, a? Od tuda p class image. A ovako i ljepse izgleda kad maknes styling.

OK, you made your point

[pixelpusher]

Sulien wrote:

pixelpusher, jako dobro rješenje... baš sam se pitao hoće li netko spomenuti headinge kao što sam rekao meni radi semantike najviše rokaju definition liste ali njih jednostavno ne možeš floatati u nekakav grid haha možda postoji microformat za kataloge not.

[maratz]

Kao holder za sliku bolje bi bilo možda iskoristiti division/span umjesto paragrafa, jer paragraf je više blok teksta, dok su div/span generički strukturalni elementi.

Quote:

Problem kod definition lista je nemogućnost ubacivanja block level elemenata, tako da je to ograničavajući faktor ukoliko ćeš kasnije nešto htjeti mijenjati...

Definicija smije sadržavati block-level elemente, kao što može postojati i više definicija istog pojma, dakle primjerice moguće je to izvesti i ovako:

Code:

<div>     <dl>         <dt>Naziv</dt>         <dd><img /><p>Caption</p></dd>         <dd><p>Opis</p><p>opis nastavak</p></dd>         <dd><a>link više</a></dd>         <dd>...</dd>     </dl>     <dl>         <dt>Naziv 2</dt>         <dd><img /><p>Caption</p></dd>         <dd><p>Opis</p><p>opis nastavak</p></dd>         <dd><a>link više</a></dd>         <dd>...</dd>     </dl> </div>

Last edited by maratz on 13.10.2005 11:56; edited 1 time in total

[Sulien]

Znači misliš da nije bed ako je po jedna definition lista za svaki item?

[maratz]

Sulien wrote:

Znači misliš da nije bed ako je po jedna definition lista za svaki item?

Već sam to radio, a i piše ti u speckama : )))

[štrumfhoza]

za slučaj da sam na tragu onog što trebaš vidi na http://www.westciv.com/style_master/house/tutorials/quick/floated_layout/photos.html možda pomogne.

[gog]

maratz wrote:

Quote: Problem kod definition lista je nemogućnost ubacivanja block level elemenata, tako da je to ograničavajući faktor ukoliko ćeš kasnije nešto htjeti mijenjati... Definicija smije sadržavati block-level elemente, kao što može postojati i više definicija istog pojma, dakle primjerice moguće je to izvesti i ovako:[code]<div>

Block level element smije biti unutar dd-a, ali ne i unutar dt-a...

[maratz]

dd = definicija

[Sulien]

pa i ne treba ti block unutar DT

[gog]

Kako kome Meni bi recimo baš bilo zgodno da možeš unutar dt-a, ubaciti <hX>...

[Sulien]

fakat ne znam zašto bi to htio

[gog]

SEO...