Avatar
Ivet
Člen
Avatar
Ivet:

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
Avatar
Inoue Yūki
Redaktor
Avatar
Inoue Yūki:

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
Avatar
Richard Závodný:

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  -2 10.4.2014 21:01
Avatar
Ivet
Člen
Avatar
Ivet:

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
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Ivet
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Ivet
Člen
Avatar
Ivet:

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
Avatar
Inoue Yūki
Redaktor
Avatar
Odpovídá na Ivet
Inoue Yūki:

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  -1 10.4.2014 21:10
Avatar
Odpovídá na Ivet
Michal Žůrek (misaz):

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  -1 10.4.2014 21:13
Nesnáším {}, proto se jim vyhýbám.
Avatar
Ivet
Člen
Avatar
Ivet:

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
Avatar
Inoue Yūki
Redaktor
Avatar
Odpovídá na Ivet
Inoue Yūki:

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  -1 10.4.2014 21:15
Avatar
Ivet
Člen
Avatar
Ivet:

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
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Ivet
Honza Bittner:

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  +1 10.4.2014 21:19
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Honza Bittner
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Ivet
Člen
Avatar
Ivet:

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
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Ivet
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Ivet
Člen
Avatar
Odpovídá na Honza Bittner
Ivet:

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  +1 10.4.2014 21:36
Avatar
Michal Žůrek (misaz):

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
Nesnáším {}, proto se jim vyhýbám.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
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.