ZONER Cookies

Vážený návštěvníku, potvrzením pomocí tlačítka OK udělujete souhlas nám a našim partnerům s použitím cookies pro nezbytné, analytické a marketingové účely na tomto zařízení. Volbou Nastavení můžete sami určit, jaké skupiny cookies je možné zpracovávat, popřípadě jejich zpracování úplně zakázat. Ukládání nezbytných cookies probíhá vždy, a to v zájmu zachování funkčnosti webové prezentace.

V tomto okně můžete zvolit kategorie cookies v souladu s vlastními preferencemi.

Nezbytné

Tyto cookies zajišťují bezchybný provoz našich webových stránek. Umožňují například vložení služby do objednávky, ukládání dat s ohledem na bezpečnost webu, přihlašování k webu a podobně. Nezbytné cookies nelze deaktivovat, jelikož by došlo k narušení správného fungování webu.

Preferenční

Preferenční cookies umožňují, aby si webová stránka zapamatovala informace, které mění, jak se webová stránka chová nebo jak vypadá. Je to například preferovaný jazyk nebo region, kde se nacházíte.

Analytické

Díky nástrojům jakými jsou například Google analytics můžeme sledovat, jak stránky používáte, z jakých zdrojů a technologií. Na základě těchto dat můžeme web neustále vylepšovat, aby byl pro vás co nejpřívětivější. Veškerá data jsou anonymizována, konkrétní uživatele tedy identifikovat nemůžeme.

Marketingové

Společně s nástroji třetích stran můžeme zobrazovat vámi preferované reklamy v partnerských sítích přesně dle vašich zájmů. V případě nesouhlasu je vysoce pravděpodobné, že vaše zájmy a preference nebudou zohledněny a bude se vám reklama zobrazovat plošně. Veškeré profily vašich zájmů jsou pseudonymizované, díky tomu není možná bezprostřední identifikace vaší osoby.

Dvousloupcový layout s plovoucí šířkou pravého panelu

1. října 2005
•
Miroslav Kučera

Obsah

  1. CSS
  2. XHTML

Související

Dvousloupcový layout, ve kterém má levý panel pevnou a pravý panel plovoucí (proměnlivou) šířku.

Pro správnou funkci si vytvořte obrázky podobné tomuto. Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Petr Staníček. Bližší popis najdete v článku Dvousloupcový beztabulkový layout.

CSS

body
{
margin:0; padding:0;
background:#ffffff;
text-align:center;
}
#hlavicka
{
padding: 10px;
border: 1px solid blue;
background: #dddddd;
}
#obsah
{
width: 90%;
margin:1em auto;
border: 1px solid blue;
text-align:left;
max-width: 1024px;
background: url(‚blueyellow.gif‘) top left repeat-y;
}
#levypanel
{
float: left;
width: 200px;
margin:0; padding:0;
}
#levypanel-obsah
{
margin:0;
padding: 0.5em 1em;
}
#hlavnipanel
{
margin:0 0 0 200px;
padding:0;
}
#hlavnipanel-obsah
{
margin:0;
padding: 0.5em 1em;
}
#paticka
{
padding: 10px;
border-top: 1px solid blue;
background: #dddddd;
}
hr.cleaner
{
clear:both;
display: none
}

XHTML

<html>
<body>
<div id=“obsah“>
<div id=“hlavicka“>
Zde se nachází hlavička…
</div>
<hr class=“cleaner“ />
<div id=“levypanel“>
<div id=“levypanel-obsah“>
Menu s pevnou šířkou…
</div>
</div>
<div id=“hlavnipanel“>
<div id=“hlavnipanel-obsah“>
Obsah s pevnou šířkou…
</div>
</div>
<hr class=“cleaner“ />
<div id=“paticka“>
Zde se nachází patička…
</div>
</div>
</body>
</html>

Předchozí článek Dvousloupcový layout s plovoucí šířkou obou panelů
Další článek Formuláře v CSS
Štítky: Články, Pro CSS: layout
Miroslav Kučera

Mohlo by vás také zajímat

Nejnovější

3 komentářů

  1. MrHappy

    Srp 11, 2010 v 10:16

    V layouty je mensi chyba, chybi zde osetreni (fix) na flow elementy, ktere mohou byt v hlavnim panelu a ktere hlavni panel nasledne rozbiji. Jedna se predevsim o oramovani hlavnihoPanelu.

    Oprava:
    #hlavnipanel-obsah by mel navic obsahovat (pokud jej mate ohraniceny rameckem etc.):
    overflow:auto; width:100%;

    viz.: http://www.quirksmode.org/css/clearing.html

    Odpovědět

  2. kopernik

    Říj 18, 2010 v 8:51

    tento layout je skvely ale pokud mate obsah v divu kratsi jak v divu levy panel, paticka se vam posune a menu vam preteka dolu. jak by se to dalo vyresit aby se oba panely posouvaly..diky za odpoved

    Odpovědět

  3. Matěj

    Pro 6, 2014 v 15:37

    Dobrý den,
    mám takový dotaz. Můžu použít tento design na svůj web?

    Odpovědět

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *