Tegs DIV
| Pārlūks |  Internet Explorer |
 Netscape |
 Opera |
 Safari |
 Firefox |
|||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Versija | 5.5 | 6.0 | 7.0 | 8.0 | 8.0 | 9.0 | 7.0 | 8.0 | 9.2 | 9.5 | 1.3 | 2.0 | 3.1 | 1.5 | 2.0 | 3.0 |
| Atbalsts | Jā | Jā | Jā | Jā | Jā | Jā | Jā | Jā | Jā | Jā | Jā | Jā | Jā | Jā | Jā | Jā |
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Apraksts
Elements <DIV> ir blokveida elements, kura mērķis ir dokumenta fragmenta izcelšana ar mērķi mainīt tā satura izskatu. Kā likums, bloka izskats tiek vadīts ar stilu palīdzību. Lai katrreiz nebūtu jāapraksta bloka stils tega iekšienē, stilu var izvest ārējā stilu tabulā (failā), bet pašam tegam pievienot parametru class vai id ar selektora nosaukumu.
Tāpat, kā izmantojot citus blokveida elementus, tega <DIV> saturs vienmēr sākas ar jaunu rindu. Arī pēc tā tiek pievienots rindas pārnesums.
Sintakse
<div>...</div>
Parametri
- align
- Nosaka tega <DIV> satura izlīdzinājumu.
- title
- Pievieno tega saturam "uzpeldošu" paskaidrojumu.
Aizverošais tegs
Obligāts.
Piemērs 1. Tega <DIV> izmantošana
HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Tegs DIV</title>
<style type="text/css">
.block1 {
width: 200px;
background: #ccc;
padding: 5px;
padding-right: 20px;
border: solid 1px black;
float: left;
}
.block2 {
width: 200px;
background: #fc0;
padding: 5px;
border: solid 1px black;
float: left;
position: relative;
top: 40px;
left: -70px;
}
</style>
</head>
<body>
<div class="block1">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet
dolore magna aliguam erat volutpat.</div>
<div class="block2">Ut wisis enim ad minim veniam, quis nostrud
exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat.</div>
</body>
</html>Piemēra rezultāts
Tega DIV parametru apraksts
Parametrs ALIGN
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Apraksts
Konteinera <DIV> satura izlīdzināšana attiecībā pret malām.
Sintakse
<div align="center | left | right | justify">...</div>
Аргументы
- center
- Teksta centrēšana. Teksts izvietojas pa horizontāles centru pārlūka logā vai konteinerī, kurā izvietots teksta bloks. Teksta rindas izvietojas uz neredzamas ass, kura iet pa web-lapas centru. Šāds izlīdzināšanas veids tiek aktīvi izmantots virsrakstos un dažādos parakstos, tas piešķir teksta izskatam oficiālu un solīdu izskatu. Visos citos gadījumos teksta centrēšanu izmanto reti, tāpēc ka lasīt tāda izskata lielu teksta apjomu ir neērti.
- left
- Teksta izlīdzināšana pēc kreisās malas. Šajā gadījumā teksta rindas tiek pielīdzinātas kreisajai malai, bet labajā malā tas paliek "kāpnīšu" izskatā. Šāds izlīdzinājums ir vispopulārākais lapās, jo ļauj lietotājam ērti ievērot jaunu rindu un komfortabli lasīt garu tekstu.
- right
- Teksta izlīdzināšana pēc labās malas. Šis izlīdzinājuma veids ir pilnīgs pretstats iepriekšējajam tipam. Teksta rindas tiek izlīdzinātas pēc labās malas, bet kreisā paliek "izraustīta". Tieši tādēļ, ka kreisā mala nav līdzena, bet tieši no tās sākas jaunas rindas lasīšana, tādu tekstu lasīt ir grūtāk, nekā ja tas būtu izlīdzināts pēc kreisās malas. Tāpēc šāds izlīdzinājuma veids parasti tiek izmantots īsiem virsrakstiem ne vairāk par 3 rindām.
- justify
- Izlīdzināšana visā platumā, kas nozīmē vienlaicīgu izlīdzināšanu gan pēc kreisās, gan labās malas. Lai to paveiktu, pārlūks pievieno atstarpes starp vārdiem.
Noklusētā vērtība
left
CSS analogs
text-align
Piemērs 2. Teksta izlīdzināšana
HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Tegs DIV, parametrs align</title>
<style type="text/css">
#layer1 {
background: #fc0;
padding: 5px;
}
#layer2 {
background: #fff;
width: 60%;
padding: 10px;
}
</style>
</head>
<body>
<div align="right" id="layer1">
<div align="left" id="layer2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diem nonummy nibh euismod tincidunt ut lacreet dolore
magna aliguam erat volutpat.
</div>
</div>
</body>
</html>Piemēra rezultāts.
Parametrs TITLE
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Apraksts
Pievieno paskaidrojošo tekstu konteineram <DIV>, kurš izskatās kā "uzpeldošs paskaidrojums", kas kļūst redzams, ja peles kursors tiek aizkavēts virs bloka satura.
Sintakse
<div title="teksts">...</div>
Argumenti
Jebkura teksta rinda. Teksts jāiekļauj pēdiņās.
Noklusētā vērtība
Nav.
Piemērs 3. Paskaidrojums tekstam
HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Tegs DIV, parametrs title</title>
</head>
<body>
<div title="Kanoniskā zivs">Lorem
ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna
aliguam erat volutpat.</div>
</body>
</html>
