3. Layout pomoci xhtm a css – levé menu

Zdravím všechny ty komu můj návod v začátcích alespoň trochu pomůže! Další důležitou součástí webu a v případě, že se vám obsah nevleze na jednu stránku, je bezesporu menu. Menu se dá laicky vysvětlit jako seznam odkazů na jiné stránky (HTML) a v php může pomocí proměnných obsluhovat různé funkce a provádět jiné úkony, ale to jsem odbočil. Ne omylem jsem zvýraznil slovo seznam. Je asi hodně způsobů tvorby menu, ale pro mě jeden z nejdůležitějších je pomocí seznamu. Nebudu popisovat teorii, ale jdu rovnou k praxi!

Opět použiji můj vzorový soubor a jen do něj doplním nějaké jednoduché levé menu!

VÝSLEDNÝ SOUBOR

Tak začneme tím, že si do divu levý dáme seznam s několikami položkami! Je jasné, že budeme chtít, aby menu někam odkazovalo, proto musíme dovnitř menu vložit ještě odkazy (#), které později doplníme na adresy stránek!

<div id="levy">
     <ul id="menu">
         <li><a href="#">LOREM IPSUM</a></li>
         <li><a href="#">DOLOR SIT</a></li>
         <li><a href="#">CURABITUR</a></li>
         <li><a href="#">MAECENAS</a></li>
     </ul>
  </div>

Nyní začneme ze stylováníme menu! Je dobré si v každém divu vynulovat margin a padding. Jde to udělat i na začátku stylopisu pro různé tagy, ale tím se nebudu zabývat! Začneme tím, že celý blok ul si odsadíme od levého pravého a horného okraje příkazem margin!

 #menu {
  padding:0px;  /*vynulování*/
  margin: 0px;
  margin-top: 10px; /*odsazeni bloku menu od okrajů*/
  margin-left: 10px;
  margin-right: 10px;
}

Dále si nastavíme pozadí buňky menu a taky chceme menu vyšší, tak si u každé buňky li nastavíme vnitřní odsazení shora a zdola o 10px! V dalším kroku (li:hover) si nastavíme pozadí buňky, které se změní po najetí myši! Taky musíme opět nastavit horní a dolní odsazení, jinak by se po najetí myši menu smrštilo na výšku bez odsazení a to je nepěkné a nežádoucí! Pro pochopení je dobré si tuto variantu vyzkoušet nastavením paddingu na 0px!

 #menu li{
  padding:0px;  /*vynulování*/
  margin: 0px;
  background-color: rgb(0,102,51); /*pozadí buňky li*/
  padding-top: 10px; /*vnitřní odsazení buňky*/
  padding-bottom: 10px; /*vnitřní odsazení buňky*/
}

#menu li:hover{
  padding:0px;  /*vynulování*/
  margin: 0px;
  background-color: rgb(204,0,0); /*pozadí buňky li při najetí myši*/
  padding-top: 10px; /*vnitřní odsazení buňky při najetí*/
  padding-bottom: 10px; /*vnitřní odsazení buňky při najetí*/
}

V posledním kroku si nastavíme, aby text v menu nebyl podtržený a měl bílou barvu. Taky chceme, aby text nezačínal na počátku buňky tak si jej odsuneme o 5px zleva. Poté už jen pro ukázku nastavíme, aby text změnil barvu z bílé na oranžovou po najetí myši přímo na text! Tím máme hotové jednoduché a celkem použitelné menu!

 #menu a{
  padding:0px;  /*vynulování*/
  margin: 0px;
  text-decoration: none;
  color: white; /*barva textu*/
  padding-left: 5px; /*odsazení textu v buňce*/
}

#menu a:hover{
  color: rgb(255,102,0); /*barva textu při najetí*/
}

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 zde

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!