2. Layout pomoci xhtm a css – obsahová část

Pokračování mého miniseriálu pro tvorbu základního layoutu v html a css bych chtěl věnovat odsazení příkazem margin a padding. Těmito příkazy zajistím odsazení bloku od jiného bloku. Margin je venkovná okraj, a padding je vnitřní okraj. Při použití správného doctipe většinou fungují bez problému stejně ve všech novějších prohlížečí.

Jen někdy trochu zlobí ve starších IE, kvůli rozdílnému výpočtu u Mozilly a IE viz. Někdy pomáhá v divu margin a padding nejprve vynulovat (margin: 0px; padding: 0px; ) a pak zadat potřebné odsazení! (viz příklad).

Jedna dobrá pomůcka je taková, že není vhodné používat v jednom divu margin/padding left/ right společně s příkazem width a podobně u margin/padding top/ bottom s příkazem height. V tomto případě je nutné divu nastavit width/height a vnořit další div kde budu řešit jen odsazeni. (viz příklad)

VÝSLEDNÝ SOUBOR

Použiji layout s minulého dílu a sem vám napíšu jen co přibylo!

Do stylopisu přidám div obsah, kterému pro názornost přidám barvu pozadí!

#obsah{
  background-color: rgb(0,153,204);
  padding:0px;  /*vynulování*/
  margin: 0px;
  margin-top: 10px; /*venkovní okraj*/
  margin-left: 10px; /*venkovní okraj*/
  margin-right: 10px; /*venkovní okraj*/
  margin-bottom: 10px;  /*venkovní okraj*/
  padding-top: 10px;  /*vnitřní okraj*/
  padding-left: 20px; /*vnitřní okraj*/
  padding-right: 20px; /*vnitřní okraj*/
  padding-bottom: 10px; /*vnitřní okraj*/
  text-align: justify; /*zarovnání do bloku*/
}

Do HTML kódu do pravého sloupce jsem jen přidal div obsah, který budu obsahovat už jen obsah webu. Můžou zde být nadpisy obrázky tabulky atd.!

<div id="vse"><!-- div který středí celý web-->
        <div id="hlavicka">
        Hlavicka
        </div>
        <div id="telo">
           <div id="levy">
           Levý sloupec
           </div>
           <div id="pravy">
                <div id="obsah"><!-- div který už bude obsahovat text -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscis, amet sem.</p>
<p>In in ligula id nisl rutrum volutpat qusaagntarice. Nam quis nisl.</p>  
                </div>
        </div>
        <div id="pata">
           Pata webu
        </div>
        </div>

</div>

Napsat komentář

Layout pomoci xhtm a css – obsahová část

Layout pomoci xhtm a css

Každý kdo začíná s tvorbou webů tak se po určité době a osvojení si základů XHTML dostane k problému jak navrhnout vlastní design. Není to jedinný postup jak layout vytvořit ale mě to na začátku pomohlo k pochopení základů obtékání zde

Návod na stránkování u dlouhých přízpěvklů

Každý se asi setkal s tím, že stránka na internetových stránkách je příliš dlouhá a stává se nepřehlednou. WordPress má v sobě jednoduchou funkci která se dá velmi dobře a rychle použít ve stránce zde

WordPress – Návod na plugin Nextgen gallerie

Podrobný návod jak vkládat obrázky a galerie do stránek pomocípluginu NextGen gallery. zde

Doplněna sekce Grafika

Zde se můžete podívat na reference webů, které jsem dělal sám jak po stránce grafické, tak po stránce programátorské! Většina webů jede pod redakčním systémem WordPress nebo mají vlastní naprogramovanou administraci! Ukázka zde

Fotografie z dovolené

Přidána nová fotogalerie z dovolené z Chorvatska a taky z výletu na Plitvická jezera!

REKLAMA:

2. Layout pomoci xhtm a css – obsahová část

Napsat komentář