Šta je novo?
Od:
Filteri

CSS, treba mi savet

  • Začetnik teme Začetnik teme wiz011
  • Datum pokretanja Datum pokretanja
wiz011

wiz011

Guest
Učlanjen(a)
18.12.2004
Poruke
4,710
Poena
440
Problem je sledeći... Imam sliku, ta slika je "zatvorena" u DIV koji ima atribut "float" a unutar njega je još jedan DIV u kome je komentar slike. Sve dok je CSS kod za svaku sliku, zavisno od njene širine, pisan posebno (ID) - sve je u redu. Sve je u redu i ako je komentar kratak, reč dve.

Međutim, kako uraditi da se jedan te isti CSS (npr kao CLASS) primeni na sve slike i da širina spoljašnjeg DIV okvira uvek zavisi od širine slike, te da se komentar ispod slike "prelama" naniže zavisno od širine slike? Uzmimo da je slika široka 150, a tekst, ako je u jednom redu, 300, onda će se sa "width: auto" spoljašnji DIV raširiti na 300 i sve će ličiti na cirkus (strelice na priloženoj slici otprilike pokazuju kako se širi).

Koliko ja znam, ovo nije moguće u CSS (ili ja ne znam kako jeste?). Ono što mi je za sad palo na pamet je da napišem JavaScript funkciju koja će pomoću document.write "ispisivati" za svaku sliku style atribute zavisno od njene širine.

Da li sam nešto omašio (a sve nešto intuitivno osećam da jesam), ima li neko bolju ideju?
 

Prilozi

  • div.gif
    div.gif
    7.8 KB · Pregleda: 71
Poslednja izmena:
Pretražujem malo Net... Našao sam kod koji bi trebalo (eh, trebalo) da radi tačno to što meni treba. U stvari, umesto da se tekst razvlači po širini s tim kodom se razvlači po visini.

A pogledajte sledeći kod koji sma našao, trebalo bi da sadržaj strane centrira i po širini i po visini. Radi u Operi i FF, ali u IE...

E, to se stalno dešava kad god se radi nešto složenije sa CSS, u jednom browseru radi - u drugom ne radi.

<html>
<head>
<title>Centered HTML w/ CSS</title>
<style type="text/css" media="screen">
body, html { height: 100%; backgroud-color:#000; }
#outer { height: 100%; width: 100%; overflow: visible; position: relative; }
#outer[id] { display: table; position: static; }
#middle { position: absolute; top: 50%; }
#middle[id] { display: table-cell; vertical-align: middle; position: static; }
#inner { position: relative; top: -50%; text-align: center; }
#inner[id] { position: static; text-align: center; }
</style>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner">
This is the content
</div>
</div>
</div>
</body>
</html>
Kliknite za proširenje...
 
Nisam mislio o tome, već mi se uveliko spavalo, samo sam uradio paste i isprobao.

Nego, zašto u IE uvek mora da se deklariše to "transitional" da nam ne bi bile vezane ruke? Čak ni bojenje scrollbara, koje je IE specifičnost (mada sad radi i u Operi) neće da funkcioniše u IE bez "transitional" deklaracije.

Sad sam isprobao, u IE7 ne radi ni kad se ubaci <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">. Jeste centrirano po visini, ali ne i po širini.
 
Poslednja izmena:
I da... Centrirati to u svim browserima je piece of cake ako se koriste klasične tabele. Čisto prilog onoj priči od pre oko mesec dana, da je CSS fenomenalan na papiru, ali da su ponekad tabele još uvek bolje.

Naravno, CSS je fenomenalan i u praksi, pod uslovom da se ne preteruje. 😉 U 95% slučajeva CSS daje bezmalo totalnu kontrolu, ali u onih 5% slučajeva ja ću radije posegnuti za npr. tabelama nego se 15 dana mučiti da iznađem CSS kod koji odgovara svim šantavim implementacijama u browserima.

BTW, problem sa IE je što iz nekog razloga preskače ovo:

#inner[id] { position: static; text-align: center; }
 
Tebi je baš dosadno? Jesi ti uopšte probao te tvoje "savete"? Ne, ne radi u IE ni kad se izbaci "static". Osim toga, nije ovde pitanje šta izbaciti a šta ubaciti, nego je dat primer koda koji u dva browsera radi, u trećem ne radi.
 
Tja, ali meni baš ni za šta ne treba ovo centriranje... Čisto kod na koji sam naleteo dok sam tražio rešenje za ono što pitam u ovom topiku pa pomislio da će možda zatrebati nekad.
 
Morate se prijaviti ili registrovati da odgovorite ovde.
Nazad
Vrh Dno