0 Kč s DPH
  • WYSIWYG verze 4.1
    • Návod je vytvořen ve WYSIWYG editoru verze 4.1 Více »

Zarovnání obrázků

V tomto článku si ukážeme, jak nastavit zarovnání obrázků pro verzi WYSIWYG editoru 4.1, který je vložen do textu tak, aby text nebyl na obrázek příliš "nalepen".

Zarovnání vůči textu

Při vkládání obrázku si můžeme zvolit, na kterou stranu ho budeme chtít zarovnat vůči textu. Na ukázce si ukážeme, jak zarovnat obrázek doleva.

 Ukázka

zarovnani-obrazku

 Výsledek

zarovnani-obrazku2

Odsazení textu od obrázku 

Abychom docílili odsazení textu od obrázku, je třeba využít CSS styl (Kaskádový styl) padding (vnitřní okraj), který vložíme v záložce Pokročilé do pole Styl v nastavení daného obrázku. V tomto poli bude automaticky vložen už přednastavený styl, podle toho, jaké zarovnání obrázku jsme zvolili. Styl padding (vnitřní okraj) má čtyři možné varianty dle směru odsazení: padding-top, padding-right, padding-bottom, padding-left.

Použití je jednoduché:

padding-right: 10px; padding-bottom:10px;

Pokud chceme nastavit pravý i dolní okraj, je nutné oddělovat jednotlivé styly středníkem.

Zkušenější uživatelé mohou využít zkrácenou formu CSS stylu ve formě:

padding: 0 10px 10px 0;

kde první číslo znamená odsazení shora a pokračuje po směru hodinových ručiček zprava, zdola a zleva.

Ukázka

zarovnani-padding

Výsledek

zarovnani-padding2

 

Více o kaskádových stylech se dočtene v našem článku CSS - uživatelské základy.

Ondřej Jonáš
Produktový manažer inPage.cz
admin(zav)zoner.cz

Přidat komentář

Přehled komentářů

  • Díky

    19.9.2014 13:46:38 | martina

    Užitečné, srozumitelné, díky. Ještě bych uvítala, v podobném duchu, orámování obrázků a ex post vytváření rámečku/mřížky v tabulce, která je zkopírovaná z excelu. Díky

    Odpovědět

  • Kurz

    27.10.2014 11:05:02 | Jarmila

    Dobrý den,
    mohu si u Vás objednat kurz výuky úpravy CSS?
    Děkuji za odpověď.
    Jarmila

    Odpovědět

  • Jak změnit název LOGO v šabloně za obrázek nebo jiný

    13.9.2015 0:44:54 | Lilien

    Použila jsem šablonu, ale nejde mi ji upravit v hlavičce. Trápí mě na webu LOGO, chci v této šabloně udělat změnu a místo obrázku LOGO, který tam je, vložit jiný obrázek. Poradíte mi prosím jak na to. Nejde mi také dost dobře rozpoznat náhled při výběru, což je škoda, protože jsou to krásné šablony a mě by to ušetřilo čas.

    Odpovědět

  • RE: Jak změnit název LOGO v šabloně za obrázek nebo jiný

    14.9.2015 9:18:09 | Tým inPage

    Dobrý den,
    postup na upravení loga naleznete v tomto článku: http://www.blog.inpage.cz/inpage/jak-pouzit-logo-webu/.

    Náhled šablony je možné zvětšit jeho poklikáním. Šablonu si také můžete lépe prohlédnout jejím použitím na webu. Po jejím výběru stačí kliknout na odkaz MŮJ WEB.

    Odpovědět

inPage.cz - webové stránky, doména a webhosting snadno.