6 CSS a DIVy

Nacházíš se zde: rozcestník kroužku → 1. Úvodní lekce → 1. lekce - Teorie klient a server → 2. lekce - Úvod do vývoje webových aplikací → 3. lekce - XHTML (XHTML tahák) → 4. lekce - CSS = kaskádové styly → 5. lekce - CSS + Třídy → 6. lekce - CSS a DIVy

6.1 Opakování z minula

Nevíš si s něčím rady? Navštiv www.jakpsatweb.cz nebo nám napiš na e-mail (tomik@jmx.cz nebo klaxalk@gmail.com).

6.2 Divy

6.2.2 Div

Pro vytváření grafických elementů na stránce nám slouží prvek div. Je párový a většinu jeho vlastností budeme upravovat pomocí css. Pokud ho do html napíšeme jen tak, bez css specifikace, nebude vidět. Jeho výchozí "nastavení" je tzn. neutrální (kromě toho, že je blokový), to znamená, že jeho vzhled a vlastnosti můžeme ovlivnit až v CSS.
A jaké všechny vlastnosti mu můžeme nastavovat? Jsou to tyto:
- šířka,
- výška,
- rámeček,
- pozadí,
- odsazovací okraje uvnitř a venku.
- Dále samozřejmě obvyklé nástavení vlastností textu uvnitř, jako známe z paragrafu.
Pro nastavování je dobré si pro každý div udělat třídu a podlé ní ho potom v css upravovat.
Za všechno bude hovořit následující příklad.

Libovolný xHTML obsah.

Zdrojový kód XHTML je jednoduchý:

<div class="trida" id="idParametr">
        <p>Libovolný <strong>xHTML</strong> obsah.</p>
</div>

Většinu práce budeme dělat pomocí css. Tam už je toho víc:

.trida, #id {
        width: 400px;
        height: 80px;
        background-color: yellow;
        border: 1px solid maroon;
        margin: 0px auto;
}

Novinka pro vás bude nejspíše rámeček, tak si ho rozebereme. 1px je snad všem jasné, to je tloušťka rámečku. solid nám říká, že to bude jedna čára. Další možnost by byla dashed, která by ho udělala čárkovaně. Pokud ho nechceme vůbec, je pro to celé border: none;

6.2.3 Floating [česky obtékání]

div je blokový element. To znamená, že sám o sobě zabere celý řádek (pokud je větší, než jeden řádek, zabere si víc) a vedle sebe nikoho nepustí. To se projeví např. tak, když ihned za div napíšeme nějaký text, bez odřádkování, tak se neobjeví vedle divu, ale pod ním.
Toto nám samozřejmě vadí, pokud chceme dát 2 divy (případně div a jiný element) vedle sebe. A jak se to řeší?
Každému divu musíme říct, na které části obrazovky se bude vyskytovat - plavat.
To se dělá pomocí CSS vlastnosti float, která má dvě varianty: left a right.
Zde se podívejte na příklad:

Obsah prvního DIVu.

Obsah druhého DIVu.

Tento příklad se zapíšte takto:

v xHTML budeme mít dva divy a jejich obsah:

<div class="trida1">
        <p>Obsah prvního DIVu.</p>
</div>

<div class="trida2">
        <p>Obsah druhého DIVu.</p>
</div>

v CSS (vlastnosti divů můžeme samozřejmě zapisovat jak pomocí tříd, tak pomocí id):

.trida1 {
  width: 300px;
  height: 80px;
  background-color: yellow;
  border: 1px solid maroon;
  float: left;
  margin: 30px;
}

.trida2 {
  width: 300px;
  height: 80px;
  background-color: yellow;
  border: 1px solid maroon;
  float: right;
  margin: 30px;
}

S tím souvisí problém, který nastane u prvků, které jsou pod takto floatovanými = obtékanými prvky. Protože pokud pod obtékaný div přidáme obsah, automaticky bude tento obsah horní div obtékat, pokud ale chci, aby obsah začal pod obtékaným divem, musím tomuto obsahu (textu, obrázku...) nastavit css vlastnost clear: both;.

Příklad bez vlast. clear: both;:

Žlutý div.

Text, který nemá nastaveno clear: both; a proto se zobrazí postraně DIVu - bude jej tzv. obtékat.

Zdrojový xHTML kód ukázky:

<div class="zluty">
  <p>Žlutý div.</p>
</div>
<p>
  Text, který nemá nastaveno <code>clear: both;</code> a proto se 
  zobrazí postraně DIVu - bude jej tzv. obtékat.
</p>

Zdrojový CSS kód obou ukázek:

.zluty {
  width:  100px;
  height: 100px;
  background-color: yellow;
  border: 1px solid maroon;
  float: left;
  margin: 30px;
}

Příklad bez vlast. clear: both;:

Žlutý div.

Text, který má nastaveno clear: both; a proto se zobrazí pod DIVem - nebude jej obtékat.

Zdrojový xHTML kód ukázky:

<div class="zluty">
  <p>Žlutý div.</p>
</div>
<p style="clear: both;">
  Text, který má nastaveno <code>clear: both;</code> a proto se 
  zobrazí pod DIVem - nebude jej obtékat.
</p>

Máš chuť na další lekci?

Tak pokračuj dál! 7. lekce - Publikování stránek.
Můžeš se také vrátit na předchozí 5. lekci - CSS a třídy.
Nebo můžeš jít na rozcestník kroužku.