NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
S účinností od 26. 3. jsme aktualizovali Zásady zpracování osobních údajů – doplnili jsme informace o monitorování telefonických hovorů se zájemci o studium. Ostatní části zůstávají beze změn.
Avatar
Ivet
Člen
Avatar
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
Avatar
Neaktivní uživatel
Tvůrce
Avatar
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
Avatar
Richard Závodný
Člen
Avatar
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
Avatar
Ivet
Člen
Avatar
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
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Ivet
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.
Avatar
Ivet
Člen
Avatar
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
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Ivet
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
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Ivet
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
Avatar
Ivet
Člen
Avatar
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
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Ivet
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
Avatar
Ivet
Člen
Avatar
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
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Ivet
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.
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Honza Bittner
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.
Avatar
Ivet
Člen
Avatar
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
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Ivet
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.
Avatar
Ivet
Člen
Avatar
Odpovídá na Honza Bittner
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
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
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
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
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.
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.