Diskuze: Layout se 3 sloupci
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Člen

Zobrazeno 18 zpráv z 18.
//= Settings::TRACKING_CODE_B ?> //= Settings::TRACKING_CODE ?>
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
Ahoj. Děj všem sloupcům
procentovou šířku - tím by si měla zajistit pevnou pozici "vedle sebe",
namísto "skákání pod sebe". Pak jim dej plovoucí vlastnosti a nezapomeň
vyčistit. Doufám, že jsem odpověděl na tvůj dotaz.
To už ve škole fakt neví co by vás naučily nebo co?
Jinak se podívej zde je tu plno tutoriálů.
Moje přísloví praví "Program dělá to co naprogramujete, ne to co chcete".
Má to být v tabulce, nebo divy?
Mají být ty boční divy fixní?
V jakých jazycích (HTML a CSS - verze) to máš mít?
Hmm... tak jestli musí mít 170px tak ti logicky všechno skočí pod sebe, když má monitor menší rozlišení. Možná pomocí media queries nastylovat pro menší displaye. Jinak si budeš muset vystačit prvky pod sebou. Ostatně v praxy se to tak dělá. Například na větších displayích máš menu a obsah vedle sebe a na mobilu pod sebou.
do html prdneš 5 (nebo kolik jich potřebuješ) divů, nastavíš jim
position:absolute;
pak nastavíš body a :rootu velikosti na 100%;
body, :root {
width: 100%;
height: 100%;
}
no a pka nastavíš procenty top, left, width, bottom, přesně podle toho jak potřebuješ.
Například:
#div1{
top:20%;
left:20%;
width: 60%;
height: 70%;
}
Tak prostředek už nemusíš nijak řešit, když ti to ty boční vyplní, ne? Prostředek už si vezme místo, které potřebuje.
Pokud mají býti boční fixní tak je to úplně triviální...
<body>
<div id="levy"> ... </div>
<div id="obsah"> ... </div>
<div id="pravy"> ... </div>
</body>
Teď si nastavíš #levy a #pravy na
hodnoty tak, aby byly fixní.
Ukázka pro #left:
#left
{
height: 100%;
width: 170px;
left: 0;
right: 0;
position: fixed;
}
/* musis mit nastavenou sirku pro body a html na 100% */
html, body
{
height: 100%;
}
A takto se ti hezky zafixuje #levy se 100% výškou. Obdobně to uděláš s #right - jen vyměníš left za right.
Div #obsah poté bude v body "sám normální". Tudíž, pokud nastavíš správně nastavíš margin a šířku ponecháš na auto tak se docílí žádaného efektu.
#obsah
{
margin: 0 170px;
}
A mělo by to vše fungovat...
Ještě bude lepší pokud tam napíšeš i tu šířku na auto, kdyby se ti
náhodou něco dědilo či překrývalo tak by to mohlo rozhodit...
#obsah
{
margin: 0 170px;
width: auto;
}
Není zač, zkus to a napiš
Kdyžtak: odpovídá se klikem na tlačítko ODPOVĚDĚT, které je
vespod na každém komentáři...
Tak: {margin: 0 170px; width: auto;} bylo přesně to, co mi tam chybělo. Tedy přesněji, neměla jsem tam těch 170px já tam měla margin: 0 auto; Moc děkuji za pomoc.
Suma sumárum. Jde to řešit více způsoby, buď jak jsem navrhoval já všechno absolutno-relativně. Nebo jako hobi s marginem. A nebo lze použít i metoda calc. Tu nezmiňoval nikdo.
#prostredek {
width: calc(100% - 350px);
}
Rozhodně tu ale nemusíte mínuskovat každý druhý post.
Způsob CALC není moc dobrý, není totiž podporovaný všude. Takže to bych nedoporučoval.
Způsob s procenty není také moc dobrý pokud máš zadané ty fixní sloupce jako se šířkou v px...
Zobrazeno 18 zpráv z 18.