Dnevnik eklektika - Piše Dragan Babić

Rastegljive definition list-e sa zaobljenim ćoškovima

OK ljudi idemo ovako. Svi smo se načitali raznih “rounded corner” tehnika, toga sam svestan. Ono što je meni interesantno da radim, a upravo zbog toga ću pokušati i što intenzivnije da pišem ovakve “tutorijale” je to što će ih (tehnike) možda neko lakše usvojiti ukoliko su one na domaćem jeziku. (U ovom slučaju—Srpskom.)

Dakle bez mnogo okolišanja, u ovom članku ću Vam pokazati kako da uz pomoć CSS-a, samo 3 slike i veoma malo ekstra markupa, koji i dalje ostaje koliko je moguće semantički ispravan, dobijete “full scalable” definition list. (Što će reći—može da se rastegne i po visini i širini.)

Pre nego što počnem, rekao bih da je ova tehnika veoma pogodna za flexible i elastic layoute i da veoma dobro trpi velika smanjenja i uvećanja. (Barem u mojim testovima.)

Markup liste

Ovako—počnimo sa XHTMLom:

<dl class="com" id="komentar1">
	<dt class="comname">
		<span><strong><a href="#">Miroslav Ilić</a></strong> kaže:</span>
	</dt>

	<dd>
		<p><a class="komentarbroj" href="#komentar1" title="link do ovog komentara">1</a>
		Ako je ljubav pesma, hajde da pevamoooo...</p>
    <p>Bla bla bla, ovo je drugi pasus u listi.</p>
    <p>Ako ste lenji <a href="roundeddl.css">pogledajte posebno style sheet ovde</a></p>
	</dd>
	
	<dt class="comdate">
		<span>Objavljeno: 07.11.2005</span>
	</dt>
</dl>

Kao što možete naslutiti iz ovog markupa—odlučio sam da svrha ove liste bude da sadrži komentar na unos u blogu. Od elemenata imamo sledeće:

• Standardne elemente svake definition liste: dt i dd (definition term i definition description)
• Par paragrafa (p elemenata) koji će da sadrže tekst komentara,
• par spanova, pošto u dt ne smemo da stavljamo paragraf

CSS je sledeći:

.com{
	padding:0; margin:1em 3% 0 3%;
	background:url(img/comheader.png) top right no-repeat;
}
.com dd{
	padding:0 15px 0 0; margin:0;
	background:url(img/combody.png) top right repeat-y;
}
.com dd p{
	background:url(img/combody.png) top left repeat-y;
	padding:12px 0 4px 40px; margin:0;
	overflow:auto;
	height:100%;
}

a.komentarbroj{
	float:right;
	color:#ddd;
	text-align:right;
	padding:0 20px 5px 5px; margin:0;
	border:none;
	font:normal 3em/100% verdana, sans-serif;
  text-decoration:none;
}
a.komentarbroj:link{ color:#ddd;} /* for IE */
a.komentarbroj:visited{ color:#ddd; text-decoration:none;} /* for IE */

.comdate{
	font-style:italic;
	text-align:right;
	background:url(img/comfooter.png) bottom left no-repeat;
	padding:0 0 0 20px; margin:0;
	font-size:.83em;
}
.comdate span{
	background:url(img/comfooter.png) bottom right no-repeat;
	padding:15px 40px 15px 0; margin:0;
  display:block;
}
.comname{
	padding:0; margin:0 30px 0 0;
	background:url(img/comheader.png) top left no-repeat;
}
.comname span{
	padding:15px 15px 5px 20px; margin:0;
	display:block;
}

Kao što vidite, imamo tri slike: comheader.png, combody.png i comfooter.png, uz malo lukavog pozicioniranja njih samih—ni ne treba nam više.

Namerno sam zadao klase i samoj listi i njenim descenderima, u slučaju da neko proba da integriše ovaj metod i uz to ima predefinisane osobine za definition liste.

Kako sve to radi?

Jednostavno. Naše slike—iako se čini da su “rastegljive” one to u stvari nisu. Samo su lukavo pozicionirane kao background-attachmenti elemenata u listi. Dakle npr. imamo za dt (.comname) osobinu kojom kažemo browseru da prikaže sliku comheader.png u gronjem levom uglu, a paragrafu koji je u dtu damo osobinu da tu istu sliku prikaže, ali ovaj put u gornjem desnom uglu.

Cela stvar funkcioniše po tom principu. Imamo veoma dugačke slike (ali opet male kada je reč o veličini fajla), koje postavljamo kao pozadinske slike raznih elemenata, i respoređujemo ih uz pomoć background-position CSS osobine.

U ovom slučaju doduše ja sam koristio shorthand propertyje—prevedeno to mu dođe na isto, znači ovo:

background:url(img/comfooter.png) bottom right no-repeat;

je isto što i ovo:

background-image:url(img/comfooter.png);
background-position:bottom right;
background-repeat:no-repeat;

Glavni štos je u tome da se ne koriste margine u elementima koji su unutar liste, već se oni odvajaju paddingom. Tako razdvojeni elementi ne prekidaju pozadinu i daju utisak da je cela pozadina sačinjena iz jedne velike slike, a ne 3 isečka te jedne velike.

Kao što možete primetiti ova naša lista ne samo da ima zaobljene ćoškove nego ima i gradijent. E sada tu treba biti malo oprezniji tako da liste sa gradijentima preporučujem ili smelim (čitaj: sa dosta živaca) ili iskusnijim bećarima.

Za rezultat pogledajte listu koju smo upravo napravili i analizirali na posebnoj stranici, i ne zaboravite da menjate veličinu prozora da biste videli efekat skaliranja.

Kompatibilnost

Testirano na Windows platformi u sledećim browserima:

• Firefox 1.0.x i 1.5.x
• Opera 7.2 – 8.2
• Internet Explorer 6

Molim Vas da ukoliko uočite bug da mi ga prijavite radi korigovanja, ili mi kupite jedan od ovih. ;)

UPDATE: Povezana tema na Dizajn Zona forumima

UPDATE #2: Popravljen 1px jog, za objašnjenje pogledaj primer.

• « Koncert: Madball—Utisci
• Mali downtime »

Komentari na ovaj unos 4

1. Goran Aničić kaže 08/11/05 09:42 AM

   Imaš par piksela neslaganja po levoj strani ;)
   
   Forefox 1.0.7

2. Dragan Babić kaže 08/11/05 09:59 AM

   

   Gorane, pogledaj temu vezanu za ovaj članak na DZ ;)

3. sergio kaže 21/07/06 11:51 AM

   na tvom primeru (http://dnevnikeklektika.com/css/roundeddl/roundeddl.html) isto imas “rupe” kad resizujes … kako to reshiti ? :)

4. Dragan Babić kaže 21/07/06 02:27 PM

   

   @ sergio:
   Da li si pročitao objašnjenje na primeru? Piše da su 1px “rupe” prouzrokovane zaokruživanjem em jedinica kojima je izražena veličina fonta prilikom prevožejna istih u piksele (unutar browsera).

   Samo Fx browser ima taj quirk, i rešenje je da veličinu fonta izraziš recimo u procentima i problem bi trebao da nestane.

Komentari su zatvoreni za ovaj unos.