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>
Kapcsolódó bejegyzések:
  • Valid XHTML transitional doctype, Valid XHTML transitional sablon Az alábbi kódot amolyan segítség leginkább magamnak, hogy ne kelljen mindig megírnom az alapok …

  • Ha olyasmi formázást szeretnél, melyek általában könyvekben lehet látni (tartalomjegyzék), akkor az alábbi kódot használd:tartalomjegyzék mintaol …

  • A minap újfent bebizonyosodott, hogy a CSS segítségével milyen jó dolgokat lehet elérni a weben. :) Listát kellett formázni hogy a legördülő tartalom vmi struktú …

  • Felmerült egy kérdésként, hogy lehetne egy login oldal tartalmánál (belépési név és jelszót kell megadni) jelezni a felhasználók számára azt, hogy melyik mező mi …

  • Ha azt szeretnéd, hogy a lapodon az egyes linkekhez 1-1 megfelelő ikon társuljon (pl. PDF-re mutató linkhez egy kis PDF ikon kerüljön), használd az alábbi kódot …

A cikket beküldte: Har_melin ()

1 hozzászólás

  1. Bence says:

    Hmm… Mintha hasznos lenne! :):)

Szólj hozzá
a Függő bekezdés CSS-sel c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>