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.

Aktivity

Ivet

Člen

Ivet:10.4.2014 20:56

Ahojky všem,

našla by se tu prosím dobrá duše, která by pomohla? Mám do školy udělat layout s 3 sloupci, hlavičkou a patičkou podle screenshotu co jsem dostala. Tak jak to mám na obrázku takhle to má být, až na ten prostřední sloupec no Ten bych měla dát tak aby byl furt uprostřed a byl odsazený margiem od stran Xpx. To mám taky. Ale zaboha ho nemůžu dostat mezi ostatní dva sloupce, aby se jeho šířka měnila s nimi a byl uprostřed. Furt mi to letí ke straně a když už to udělám aby byl tak jak má, tak na jiném rozlišení odhodí pravý sloupec pod něj. Mohl by mi prosím někdo poradit, nebo alespoň nějak nasměrovat? Nechci abyste za mě dělali úkol, jen potřebuju trochu popostrčit s tím prostředním sloupcem. Děkuju Iveta

Odpovědět

10.4.2014 20:56

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:10.4.2014 21:01

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.

Nahoru Odpovědět

10.4.2014 21:01

Neaktivní uživatelský účet

Richard Závodný

Člen

Richard Závodný:10.4.2014 21:01

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".

Editováno 10.4.2014 21:02

Nahoru Odpovědět

10.4.2014 21:01

Ivet

Člen

Ivet:10.4.2014 21:06

Minoru: To bych věděla jak na to, kdybych mohla dát sloupcům width v %. Levý a pravý MUSÍ mít 170px a s tím si nevím rady.

Nahoru Odpovědět

10.4.2014 21:06

Honza Bittner

Tvůrce

Honza Bittner:10.4.2014 21:08

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?

Nahoru Odpovědět

10.4.2014 21:08

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Ivet

Člen

Ivet:10.4.2014 21:09

Honza Bittner: Boční jsou fixní a má to být pomocí div. Mám to rozdělané v HTML5 a CSS3

Nahoru Odpovědět

10.4.2014 21:09

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:10.4.2014 21:10

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.

Nahoru Odpovědět

10.4.2014 21:10

Neaktivní uživatelský účet

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:10.4.2014 21:13

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%;
}

Nahoru Odpovědět

10.4.2014 21:13

Ivet

Člen

Ivet:10.4.2014 21:14

Minoru: Nevím co to má učitelka za nápady. Levý 170px obsah se má přizpůsobovat a pravý zas 170px. Ten prostředek prostě nemůžu nějak domyslet. Zbytek problém není.

Nahoru Odpovědět

10.4.2014 21:14

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:10.4.2014 21:15

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.

Nahoru Odpovědět

10.4.2014 21:15

Neaktivní uživatelský účet

Ivet

Člen

Ivet:10.4.2014 21:18

Minoru: Prostředek musí být, stejně jakou obsah u pravého a levého sloupce od krajů odsazen Xpx. A když to udělám, ta to prostě habruje.

Nahoru Odpovědět

10.4.2014 21:18

Honza Bittner

Tvůrce

Honza Bittner:10.4.2014 21:19

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...

Editováno 10.4.2014 21:21

Nahoru Odpovědět

10.4.2014 21:19

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Honza Bittner

Tvůrce

Honza Bittner:10.4.2014 21:25

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;
}

Nahoru Odpovědět

10.4.2014 21:25

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Ivet

Člen

Ivet:10.4.2014 21:26

Honza Bittner: Jo tááák. Děkuji, jsi zlato Hned zkusím a kdyžtak se s tím poperu. Opravdu moc děkuji.

A děkuji všem, co se ozvali a snažili se pomoc.

Nahoru Odpovědět

10.4.2014 21:26

Honza Bittner

Tvůrce

Honza Bittner:10.4.2014 21:29

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...

Nahoru Odpovědět

10.4.2014 21:29

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Ivet

Člen

Ivet:10.4.2014 21:36

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.

Nahoru Odpovědět

10.4.2014 21:36

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:10.4.2014 22:16

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.

Nahoru Odpovědět

10.4.2014 22:16

Honza Bittner

Tvůrce

Honza Bittner:10.4.2014 22:30

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...

Nahoru Odpovědět

10.4.2014 22:30

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Naučíme tě pracovat na home-office.

Zjistit více...

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 18 zpráv z 18.

Nejčastěji vyhledáváné

Diskuze: Layout se 3 sloupci