[es] - CSS2 umesto tabela

Rahotep

Član broj: 17317
Poruke: 6
*.rcub.bg.ac.yu

Profil

^{13.03.2004. u 17:10 - pre 244 meseci}

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.

Odgovor na temu

igorsa

Član broj: 2522
Poruke: 2290
195.178.35.*

Profil

Re: CSS2 umesto tabela

^{13.03.2004. u 19:42 - pre 244 meseci}

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%;
}

Odgovor na temu

Rahotep

Član broj: 17317
Poruke: 6
*.rcub.bg.ac.yu

Profil

Re: CSS2 umesto tabela

^{14.03.2004. u 16:43 - pre 244 meseci}

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!

Odgovor na temu

Goran Aničić
Goran Aničić
Novi Sad

Član broj: 7404
Poruke: 414
*.direcpceu.com

Sajt: www.personalmag.rs/blog/o..

Profil

Re: CSS2 umesto tabela

^{15.03.2004. u 10:49 - pre 244 meseci}

Evo rešenja:
Practical CSS Layout Tips, Tricks, & Techniques

ICT magazin
IT, Mobile, Gaming online magazin
------------------------------
Blog
Svakodnevnica Blog Auto blog
------------------------------

Kompjuterski e-zine
Personal magazine

Odgovor na temu

Dag
Moscow

Član broj: 11879
Poruke: 97
*.Moscow.dial.rol.ru

Sajt: orwell.ru

Profil

Re: CSS2 umesto tabela

^{06.04.2004. u 18:16 - pre 243 meseci}

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.

Odgovor na temu