Függő bekezdés CSS-sel

Nyomtatott anyagoknál gyakori megoldás az olyan, két hasábosnak tűnő tördelés, ahol egy rövidebb infohoz (pl. évszám) egy hosszabb szöveg tartozik úgy, hogy az egymáshoz tarozó párok első sorai egy vonalban vannak (ún. behúzás). Netoldalaknál ezt általában táblázatokkal szokták megoldani, de egy egyszerű CSS kóddal is el lehet érni ezt a hatást.

Minden évszámot (vagy „azonosítót”) és a hozzá tartozó szöveget tegyünk különálló tag-ekbe. Szükségünk lesz két class-ra, legyen az egyik mondjuk .evszam, a másik .esemeny.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

body {
	margin: 0px;
	padding: 0px;
	font: small Verdana, Arial, Helvetica, sans-serif;
}
.evszam {
	font-weight: bold;
	color: ##8F273F;
	display: block;
	float: left;
	margin: 0px;
	padding: 0px;
}
.esemeny {
	display: block;
	margin: 0px 0px 0.5em; /* itt adjuk meg a felsorolás pontjai közti távolságot*/
	padding: 0em 0em 0em 12em;
}

Az .evszam float:left értéke „teszi ki” baloldalra a bekezdést. Az .esemény baloldali padding értéke adja meg, hogy mekkora legyen a behúzás, ezt mindig a szükségletünkhöz igazíthatjuk.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>behúzásos szöveg</title>
<link href="identtext.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<P class="evszam">MiG–25RBF</P>
<P class="esemeny">A korszerűsített rádióelektronikai változatba a Sar–25 rendszert építették, új rádióelektronikai zavarórendszerrel együtt. Az orr aljának két oldalán két, kisebb dielektrikus burkolat jelent meg.</P>
<P class="evszam">MiG–25RBSZ</P>
<P class="esemeny">A gépet az RBK változattal párhuzamosan építették, és az orrába az oldalra néző Szablja–E szintetikus apertúrájú rádiólokátort építették, amely alkalmassá tette földfelszíni célok felderítésére napszaktól és időjárási körülményektől függetlenül.</P>
<P class="evszam">MiG–25RBS</P>
<P class="esemeny">A gép az RBSZ továbbfejlesztése volt, orrában a sokkal nagyobb felbontású és flexibilisebb Sompol radarral, ez képes volt a földfelszínen mozgó objektumok kijelzésére (MTI – Moving Target Indication)</P>
<P class="evszam">MiG–25BM Foxbat–F</P>
<P class="esemeny">A nagy repülési sebessége és magassága miatt a légvédelem számára szinte elérhetetlen gépből logikus gondolat volt egy kifejezetten a légvédelem megsemmisítésére specializált változatot létrehozni, ez volt a MiG–25BM, amelynek RBV-ből átalakított prototípusa 1976-ban repült először, és 1980 és 1985 között gyártottak belőle körülbelül 100 darabot. A repülőgép a korszerűbb Jaguár rádióelektronikai zavarórendszert hordozta, szárnyai alatt az elfogóvadász négy rakétaindító sínjén a H–58 (AS–11 Kilter) lokátorromboló rakétákkal. A gépek általában hordozták a törzs alatti 5300 literes tüzelőanyag-póttartályt. Orrukat, az elfogóvadászokéhoz hasonlóan, feketére festették, valószínűleg dezinformációs céllal.</P>
</body>
</html>

Az „em”-ben kifejezett értékadásnak az is az előnye, hogy ha a felhasználó átállítja a betűméretet a böngészőjében, az elrendezés megőrzi az optikai térközöket, ahogy az mellékelt fájlban ki is próbálható.

Mintakód

A mintakód megtekintéséhez kattints a linkre: függő bekezdés, 2 hasábos tördelés demo

Szemantikusság

A fórumon 777 javasolta, hogy a szemantikusság figyelembevételével a p (bekezdés) elemek helyett a direkt erre a célra készült definíciós lista (dl) elemet használjuk. A javaslatot köszönjük!
Íme a kód a fenti elem használatával:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>behúzásos szöveg</title>
<link href="http://www.tutorial.hu/webszerkesztes/fuggobekezdescss/identtext.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<dl>
		<dt class="evszam">MiG–25RBF</dt><dd class="esemeny">A korszerűsített rádióelektronikai változatba a Sar–25 (???-25) rendszert építették, új rádióelektronikai zavarórendszerrel együtt. Az orr aljának két oldalán két, kisebb dielektrikus burkolat jelent meg.</dd>
		<dt class="evszam">MiG–25RBSZ</dt><dd class="esemeny">A gépet az RBK változattal párhuzamosan építették, és az orrába az oldalra néző Szablja–E (?????) szintetikus apertúrájú rádiólokátort építették, amely alkalmassá tette földfelszíni célok felderítésére napszaktól és időjárási körülményektől függetlenül.</dd>
		<dt class="evszam">MiG–25RBS</dt><dd class="esemeny">A gép az RBSZ továbbfejlesztése volt, orrában a sokkal nagyobb felbontású és flexibilisebb Sompol (??????) radarral, ez képes volt a földfelszínen mozgó objektumok kijelzésére (MTI – Moving Target Indication)</dd>
		<dt class="evszam">MiG–25BM Foxbat–F</dt><dd class="esemeny">A nagy repülési sebessége és magassága miatt a légvédelem számára szinte elérhetetlen gépből logikus gondolat volt egy kifejezetten a légvédelem megsemmisítésére specializált változatot létrehozni, ez volt a MiG–25BM, amelynek RBV-ből átalakított prototípusa 1976-ban repült először, és 1980 és 1985 között gyártottak belőle körülbelül 100 darabot. A repülőgép a korszerűbb Jaguár (?????) rádióelektronikai zavarórendszert hordozta, szárnyai alatt az elfogóvadász négy rakétaindító sínjén a H–58 (AS–11 Kilter) lokátorromboló rakétákkal. A gépek általában hordozták a törzs alatti 5300 literes tüzelőanyag-póttartályt. Orrukat, az elfogóvadászokéhoz hasonlóan, feketére festették, valószínűleg dezinformációs céllal.</dd>
	</dl>
</body>
</html>
Tutorial.hu Szerkesztőség
Tutorial.hu Szerkesztőség

KAPCSOLÓDÓ CIKKEKTÖBB A SZERZŐTŐL

2 HOZZÁSZÓLÁS

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét