[ Rahotep @ 13.03.2004. 17:10 ] @

Ne bavim se web dizajnom, drugar me zamolio da mu pomognem oko sajta...

Kako bi se preko CSS-a elegantno mogle pozicionirati npr. 4 slike, dve po redu, ili dve slike, jedna do druge, sa objasnjenjima ispod? Sve to uz automatsko skaliranje slika prema sirini strane/bloka: recimo da imam dve velike slike istih dimenzija u jednom redu i hocu da centrirane zauzimaju 90% sirine stranice, bez obzira na trenutnu rezoluciju ekrana i velicinu prozora. Isprobavao sam nesto i sa i bez tabela i uvek dobijam razlicite rezultate u IE 6.0 i Opera 7.x. Kakvo bi bilo CSS resenje?

Kako da poravnam sledeci tekst (visine) bez koriscenja tabele?

Code:

xxx   Ovde ide objasnjenje.

yyy   Opet objasnjenje, ovaj
      put u vise
      redova.

zzz   Poslednji blok. Sadrzi
      sliku.


Da li je za ovakve stvari i dalje preporucljivo drzati se tabela?

Napominjem da se za sajt, koji je izuzetno primitivan, koriste XHTML 1.0 Strict i CSS2. Cilj je napraviti gotovo skolski primer (potpunog) razdvajanja forme od sadrzaja, ali tako da sajt ispravno izgleda u svim danasnjim citacima. Nema tu fancy stvari - meni, tekst i nekoliko slika.

Dajte neke sajtove sa besplatnim CSS stilovima.
[ igorsa @ 13.03.2004. 19:42 ] @
Code:

<div id="slika_leva">
xxx   Ovde ide objasnjenje.

yyy   Opet objasnjenje, ovaj
      put u vise
      redova.

zzz   Poslednji blok. Sadrzi
      sliku.
</div>

<div id="slika_desna">
xxx   Ovde ide objasnjenje.

yyy   Opet objasnjenje, ovaj
      put u vise
      redova.

zzz   Poslednji blok. Sadrzi
      sliku.
</div>

<div id="slika_leva">
xxx   Ovde ide objasnjenje.

yyy   Opet objasnjenje, ovaj
      put u vise
      redova.

zzz   Poslednji blok. Sadrzi
      sliku.
</div>

<div id="slika_desna">
xxx   Ovde ide objasnjenje.

yyy   Opet objasnjenje, ovaj
      put u vise
      redova.

zzz   Poslednji blok. Sadrzi
      sliku.
</div>


a u css fajlu...

Code:
#slika_leva {
 float: left;
 width: 50%;
}
body>#slika_leva {
 width: 50%;
}

#slika_desna {
 float: right;
 width: 50%;
}
body>#slika_desna {
 width: 50%;
}
[ Rahotep @ 14.03.2004. 16:43 ] @
Moguce da nisam bio dovoljno jasan...

1) Potrebno je sloziti 4 slike istih dimenzija u dva reda, sa razmakom od npr. 10px izmedju "redova" i 8px izmedju "kolona", tako da sirina svakog reda zauzima sredisnih 90% stranice i da slike nikada ne budu vece od svoje prave velicine (max-width). Fotografije se ne prikazuju u punoj velicini (niti se koriste umanjene slicice) vec se skaliraju prema sirini stranice, odnosno treba da se uklope u (90%-8px)/2 od te vrednosti.

2) Koristi se isti princip iz 1) - centriraju se dve slike, ali svaka ima i kratko objasnjenje Npx nize.

3) Zadatak je osloboditi se tabele:

Code:

<table width="100%" border="0">
  <tr valign="top">
    <td>xxx</td>
    <td>Ovde ide objasnjenje.</td>
  </tr>
  <tr valign="top">
    <td>yyy</td>
    <td>Tekst<br />u vise<br />redova.</td>
  </tr>
  <tr valign="top">
    <td>zzz</td>
    <td>Poslednji opis.</td>
  </tr>
</table>


4) Gde se mogu naci gotovi CSS stilovi (sa objasnjenjima) za download?

Hvala unapred!
[ Goran Aničić @ 15.03.2004. 10:49 ] @
Evo rešenja:
Practical CSS Layout Tips, Tricks, & Techniques
[ Dag @ 06.04.2004. 18:16 ] @
Citat:
Rahotep:
Moguce da nisam bio dovoljno jasan...
. . .
4) Gde se mogu naci gotovi CSS stilovi (sa objasnjenjima) za download?

Bio si jasan druzhe... Za to shto hoc'esh, bolje su ti table (slika, potpis; slika; potpis... -- apsolutno mozhesh da sve to shvatash kao tabularne podatke i table i jeste za to -- bash tako kako se nekada radilo ... i odstupe lepo regulishesh i centriranje i borders ako treba a table isto mozhe da se stilizuje).

To shto se tiche odvajanja sadrzhine od forme... sa tim slikama to nema veze... kakva ti je tu sadrzhina? Objekti i gotovo.

Poslednje pitanje ti je chudno... ne postoji nishta shto bi moglo da se nazove "gotov stil". Stil zavisi od sadrzhaja (cura od 100kg u minic'u i Shifer u minic'u... kapirash...) ... ili Ela Ficdzherald i josh u minic'u... a ne mozhesh da kazhesh da mini nije lepo:)) Stil. Shvati ga bash tako kako se i shvata u normalnom zhivotu.

Ja imam par stranica bogatih stilovima ali to nije tutorijal.
http://orwell.ru/test/CSS/
U dnu stranice imash desetak jako dobrih linkova.