'bem ti CSS :)

Pedja · 31. 05. 2006.

Evo ga opet, ceo dan uklapam iuklapam i nikako da napravim a sa tabelom bi sredio za tri minuta...

Treba da napravim dokument koji izgleda ovako kada je rasiren prozor:

A ovako kada je prozor uzak:

Kvaka je sto zelim da se tekst u opljima, ako je predug, prelomi u novi red ali da ostane u svojoj koloni a da kolona zaglavlja ima istu visinu kao i pripadajuci
tekst.

Najdalje sto sam uspeo da uradim je:

Kôd:

<html>
<head>

<style type="text/css">

.report {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding: 5px;
}

.report .podaci, .report .izvestaji, .report .opis {
	margin: 1px; 
	padding: 2px;
}

.report .podaci {
	float: left;  
	background-color: #fff;
}

.report .izvestaji {
	float: right; 
	background-color: #eee;
	width: 120px;
}

.report .izvestaji p {
	padding: 5px;

}

.report .opis {
	float: left; 
	clear: both;
	background-color: #eee;
	width: 100%; 
}


.report .text_label, .report .text_contents {
        float: left; 
        padding: 3px;
	margin: 1px;


}

.report .text_label {
        clear: both;
	background-color: #eee;
	font-weight: bold;
	width: 120px;
}

</style>

</head>
<body>


<div class="report">

<h1>Izvestaj</h1>
<div>

<div class="podaci">
<p><span class="text_label">ID:</span> <span class="text_contents">2234</span></p>
<p><span class="text_label">Naziv:</span> <span class="text_contents">Naziv firme</span></p>
<p><span class="text_label">Pun naziv:</span> <span class="text_contents">Pun naziv firme koji je mnogo dugacak pa je potrebno da se prelomi u vise redova</span></p>
<p><span class="text_label">Vlasnik:</span> <span class="text_contents">Ime vlasnika</span></p>
<p><span class="text_label">Br. poÜte:</span> <span class="text_contents">42899</span></p>
<p><span class="text_label">Adresa:</span> <span class="text_contents">Nepoznata ulica broj 54</span></p>
<p><span class="text_label">Mesto:</span> <span class="text_contents">Negde</span></p>
<p><span class="text_label">TekuŠi raŔun:</span> <span class="text_contents">788-087879-90<br>900-0998777899-43<br>990-8766887756-98</span></p>
<p><span class="text_label">Telefon:</span> <span class="text_contents">98/889-90-887<br>98/889-90-888</span></p>
<p><span class="text_label">Telefaks:</span> <span class="text_contents">98/889-90-889</span></p>
</div>

<div class="izvestaji">
<p>IzveÜtaji</p>
<p><a href="izvestaj1.php" target="_blank">Finansijska kartica dobavljaŔa</a></p>
<p><a href="izvestaj2.php" target="_blank">Finansijska kartica kupca</a></p>
<p><a href="izvestaj3.php" target="_blank">Finansijska kartica ino dobavljaŔa</a></p>
<p><a href="izvestaj4.php" target="_blank">Finansijska kartica ino kupca</a></p>
<p><a href="izvestaj5.php" target="_blank">Finansijska kartica (izbor konta)</a></p>
</div>

</div>

<div class="opis">
<p><span class="text_label">Opis:</span></p>
<p><span class="text_contents">Ovde idu napomene</span></p>
</div>

</div>

</body>
</html>

Znalci, pomagajte...

jablan · 31. 05. 2006.

Pa ovo ti je idealan primer gde treba da se koriste tabele. Što bi ih menjao nečim drugim?

(Ne mislim na desnu kolonu, nju izvuci kao poseban DIV.)

jasmanac · 31. 05. 2006.

U pravu je Jablan. Tabele i sluze za tabelarni prikaz podataka sto je u ovom primeru slucaj.

bojan_bozovic · 31. 05. 2006.

Bas tako. Mozes to i CSSom napraviti, ali gubis vreme (i komplikujes bespotrebno).

Pedja · 01. 06. 2006.

I to sto kazete...

modeus · 01. 06. 2006.

eto tipicnog primera kada ljudi ne shvate poentu CSS-a

Pedja, nije cilj praviti sajt kompletno u CSS-u, bez da se koristi <table> tag, vec da se sajt napravi po standardu. XHTML postoji za kostur stranice, ali kada zelis da prikazes tabelarne podatke, onda lepo koristis tabelu. Pogresno bi bilo raditi ceo sajt pomocu tabela (shto je do sada bilo "silovanje" tehnologije)

31. 05. 2006.	#2
jablan VD IT Direktora Invented the damn thing Datum učlanjenja: 08.06.2005 Lokacija: Beograd Poruke: 2.118 Hvala: 503 1.307 "Hvala" u 282 poruka	Pa ovo ti je idealan primer gde treba da se koriste tabele. Što bi ih menjao nečim drugim? (Ne mislim na desnu kolonu, nju izvuci kao poseban DIV.) Poslednja izmena od jablan : 31. 05. 2006. u 18:58.

01. 06. 2006.	#5
Pedja Predrag Supurović Grand Master Datum učlanjenja: 24.01.2006 Lokacija: Užice Poruke: 791 Hvala: 3 200 "Hvala" u 12 poruka	I to sto kazete... __________________ Peđina beležnica (blog) - www.uzice.net - wireless.uzice.net - www.vokabular.org - www.vodic.net - forum.uzice.net

01. 06. 2006.	#6
modeus Creative Director Qualified Datum učlanjenja: 05.03.2006 Lokacija: Arad, Rumunija Poruke: 102 Hvala: 0 0 "Hvala" u 0 poruka	eto tipicnog primera kada ljudi ne shvate poentu CSS-a Pedja, nije cilj praviti sajt kompletno u CSS-u, bez da se koristi <table> tag, vec da se sajt napravi po standardu. XHTML postoji za kostur stranice, ali kada zelis da prikazes tabelarne podatke, onda lepo koristis tabelu. Pogresno bi bilo raditi ceo sajt pomocu tabela (shto je do sada bilo "silovanje" tehnologije) __________________ RAINFALL - Branding and Interactive Communication GotSolution - Creative development for your business Blog@Rainfall Identity Conspiracy - Branding, Coding, Design, Balet

31. 05. 2006.	#3
jasmanac Knowledge base Wrote a book Datum učlanjenja: 24.06.2005 Poruke: 1.109 Hvala: 76 390 "Hvala" u 53 poruka	U pravu je Jablan. Tabele i sluze za tabelarni prikaz podataka sto je u ovom primeru slucaj.

31. 05. 2006.	#4
bojan_bozovic expert Master Datum učlanjenja: 20.12.2005 Poruke: 730 Hvala: 0 0 "Hvala" u 0 poruka	Bas tako. Mozes to i CSSom napraviti, ali gubis vreme (i komplikujes bespotrebno).