Jdi na obsah Jdi na menu

Rámeček č. 3

Tento rámeček má pevné rozměry. Výhodu od předchozích má v tom, že je tvořen pouze jedním obrázkem. Pokud obsah je velmi velký, objeví se posuvníky.

 

Návrh

ObrazekTento rámeček je tvořen třemi obaly <div>. Jeden má pevné rozměry, Druhý slouží pro zarovnání a třetí k odsazení posuvníku s obsahem. V obalu je přímo obsah rámečku. Pokud je obsah příliš dlouhý, objeví se posuvníky.

 

Vložení rámečku

1. Vytvořte nebo si otevřete již vytvořený příspěvek nebo stránku.

2. Přepněte si na HTML pomocí tlačítka "WYSIWYG / HTML" nad editorem.

3. Vložte HTML kód:

<div align="left">
<div style="width: 300px; height: 200px; background: barva url(urlobrazku); margin: 10px 15px 20px 25px; padding: 90px 8px 12px 1px">
<div style="overflow: auto">
obsah
</div>
</div>
</div>

left - Zarovnání rámečku. left - vlevo; center - doprostřed; right - vpravo

300px - Šířka rámečku.

200px - Výška rámečku.

barva - Barva pozadí rámečku. Místo toho vložte HTML kód barvy. Pokud chcete mít průhledné pozadí, vložte místo toho transparent.

urlobrazku - URL obrázku na pozadí rámečku. Doporučuji šířku obrázku, jako je šířka rámečku, a výšku, jako je výška rámečku. Pokud chcete mít na pozadí pouze barvu, tak smažte url(urlobrazku).

10px - Odsazení rámečku nahoře.

15px - Odsazení rámečku vpravo.

20px - Odsazení rámečku dole.

25px - Odsazení rámečku vlevo.

90px - Odsazení obsahu rámečku od horního okraje buňky. Pozor!, přičítá se k výšce obsahu.

8px - Odsazení obsahu rámečku od pravého okraje buňky. Pozor!, přičítá se k šířce obsahu.

12px - Odsazení obsahu rámečku od dolního okraje buňky. Pozor!, přičítá se k výšce obsahu.

1px - Odsazení obsahu rámečku od levého okraje buňky. Pozor!, přičítá se k šířce obsahu.

auto - Toto dává rámečku posuvník, pokud je obsah příliš široký nebo vysoký. Pokud obsah nechcete rolovat, ale oříznout, tak vložte místo toho hidden.

 

Vložení obsahu rámečku

4. Přepněte si zpět na WYSIWYG pomocí tlačítka "WYSIWYG / HTML" nad editorem.

5. V rámečku vložte místo obsah obsah vašeho rámečku.

6. Uložte a jděte se podívat, jak váš rámeček vypadá v prohlížeči.

 

Komentáře

Přidat komentář

Přehled komentářů

Zatím nebyl vložen žádný komentář