'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...

Alati teme
Pogledajte verziju za štampanje Pošaljite email-om ovu stranu
Način prikaza
Prebacite u linearni prikaz Prebacite u hibridni prikaz Prikaz kao teme