Diskuze: Neroztahuje se mi sloupec s navigací vlevo podle obsahu sloupce vpravo

cervin.marcel

Člen

cervin.marcel:9.6.2015 20:43

Ahoj všichni s velkou trpělivostí.
Měl bych první problém (nebojte se, že by jste se mnou ztratili kontakt, budu mít později i další problémy).

Začal jsem dělat web podle layoutu HTML5. Jenže se mi nedaří levý sloupec, kde je menu, aby se plynule natahoval podle délky textu ve sloupci vpravo.

Chtěl jsem to vyřešit vloženým opakujícím obrázkem (proužkem) jako dříve, ale zde mi to nefunguje. Po celodenním sezení se mi to nepodařilo nikde vyhledat a metodou pokus - omyl udělat.

Mohu poprosit zdejší guru o pomoc? Přikládám očesaný soubory, aby tam nepřekážely v orientaci další věci.
Děkuji
Marcel

Odpovědět

9.6.2015 20:43

Jan Lupčík

Tvůrce

Jan Lupčík:9.6.2015 20:54

Ten kód je kde? A nějaká ukázka, jak to teď vypadá a jak to chceš? Je to online?

Nahoru Odpovědět

9.6.2015 20:54

TruckersMP vývojář

cervin.marcel

Člen

cervin.marcel:9.6.2015 21:01

Onlouvám se, ale asi jsem to špatně vložil
je to zde (já se to naučím)

http://www.itnetwork.cz/dev-lighter/596

Editováno 9.6.2015 21:01

Nahoru Odpovědět

9.6.2015 21:01

Jan Lupčík

Tvůrce

Jan Lupčík:9.6.2015 21:28

Nepoužívej moc id, ale místo toho atributy (tj. místo <div id="footer"> <footer> apod.).
Atributy v menu bys mohl dát do <ul> a pak každý jednotlivý do <li> - lépe se to styluje.
Řešení: dej si ty dva sloupce do nějakého divu a nastav oboum sloupcům height: 100%.

Nahoru Odpovědět

9.6.2015 21:28

TruckersMP vývojář

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:9.6.2015 21:44

Víš, co je to atribut?

// V html

Editováno 9.6.2015 21:45

Nahoru Odpovědět

9.6.2015 21:44

Neaktivní uživatelský účet

cervin.marcel

Člen

cervin.marcel:9.6.2015 22:29

Děkuji moc za reakce.
upravil jsem to podle připomínek, ale nezadařilo se mi. Vkládám nový upravený kód

http://www.itnetwork.cz/dev-lighter/597

Tak nevím??? proč mi to nejde

PS. atribut je to jak se má tag chovat, jak má vypadat (tak v tom žiju) - šířka, výška, zarovnání,...

Editováno 9.6.2015 22:30

Nahoru Odpovědět

9.6.2015 22:29

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:9.6.2015 22:36

Přesně tak, proto se IT Mana ptám, jestli ví, co to vůbec je.

K tvému problému, chtěl jsi něco takového?
https://jsfiddle.net/an7n895n/2/

Editováno 9.6.2015 22:39

Nahoru Odpovědět

9.6.2015 22:36

Neaktivní uživatelský účet

cervin.marcel

Člen

cervin.marcel:9.6.2015 22:55

Jéééééé - já si nevšiml koho jsi se ptal s těmi atributy. Proto jsem odpovídal já.
Tak to od tebe funguje, tak jak jsem si to představoval. Teď jdu prozkoumat v čem je rozdíl v tom mým a v tom tvým.
Děkuji a přeji hezký večer.
Marcel

Nahoru Odpovědět

9.6.2015 22:55

cervin.marcel

Člen

cervin.marcel:9.6.2015 23:36

Tak jsem zjistil problém.
Když vložím na začátek
<!DOCTYPE html>
tak mi to dole celé rozhodí a nefunguje to.

Editováno 9.6.2015 23:37

Nahoru Odpovědět

9.6.2015 23:36

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:10.6.2015 10:09

To by se nemělo stát Něco bude špatně, tohle by mělo zaručeně fungovat

Nahoru Odpovědět

10.6.2015 10:09

Neaktivní uživatelský účet

cervin.marcel

Člen

cervin.marcel:10.6.2015 10:23

Vyzkoušel jsem to i v jiných prohlížečích a i na jiných PC a výsledek je stejný.
Pokud zadám i starší deklaraci - toto: též stejný výsledek
<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Nahoru Odpovědět

10.6.2015 10:23

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:10.6.2015 10:59

To mi nic neřekne, ukaž nám znovu kód.

// Nebo lépe, nahraj to na nějaký web a pošli adresu

Editováno 10.6.2015 11:00

Nahoru Odpovědět

10.6.2015 10:59

Neaktivní uživatelský účet

cervin.marcel

Člen

cervin.marcel:10.6.2015 14:05

zasílám kód (děkuji)
http://www.itnetwork.cz/dev-lighter/599

Nahoru Odpovědět

10.6.2015 14:05

Tomáš123

Člen

Tomáš123:10.6.2015 17:24

Element <style> patrí do hlavičky. V <body> nemá čo hľadať. Mimochodom, viacero riešení s rovnako vysokými stĺpcami máš na webe http://jecas.cz/…soke-sloupce. Pozri si to a skús podľa toho niečo vytvoriť. Potom ti to prípadne opravíme.

Doctype zjednocuje vykresľovanie stránky naprieč prehliadačmi, takže o rozhodení by sme nemali hovoriť. Vážnu chybu, ktorá by to spôsobovala, teda okrem nesprávnej pozície elementu <style>, nevidím.

Mimochodom... Kde máš ten prvok, ktorý má tvoriť druhý stĺpec? Je tam iba jedna sekcia.

Nahoru Odpovědět

10.6.2015 17:24

Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:10.6.2015 18:31

Sekce je druhý sloupec, první "sloupec" je menu

Nahoru Odpovědět

10.6.2015 18:31

Neaktivní uživatelský účet

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:10.6.2015 18:31

Jak bylo řečeno, style musí být v hlavičce

Nahoru Odpovědět

10.6.2015 18:31

Neaktivní uživatelský účet

cervin.marcel

Člen

cervin.marcel:10.6.2015 21:04

Děkuji, to byl můj přehmat s těmi styly, že jsem je nakopíroval do špatného místa (normálně nechávám styly v externím souboru), ale i tak to nemění nic na tom, že po vložení <!DOCTYPE html> se spodek levého sloupce rozsype.

Tomáš123. určitě zajimavý návod, já ale chci vytvořit layout podle specifikace HTML5, po novu

Editováno 10.6.2015 21:04

Nahoru Odpovědět

10.6.2015 21:04

Tomáš Maňhal

Člen

Tomáš Maňhal:10.6.2015 21:20

Co konkrétně se rozsype Tobě? U mě vypadá takto po doplnění html doctype:

Nahoru Odpovědět

10.6.2015 21:20

cervin.marcel

Člen

cervin.marcel:10.6.2015 22:07

Děkuji za odpověď,
zmizí mi v levém sloupci obarvení pozadí a obrysu až dolu k patičce (podle délky obsahu ve sloupci pravém)

Nahoru Odpovědět

10.6.2015 22:07

Tomáš Maňhal

Člen

Tomáš Maňhal:10.6.2015 22:45

Podle mě je to tím, že jsi to nastyloval pouze pro navigaci, to znamená, že se ukončí působnost za poslední položkou navigace :-) ...shchválně vyzkoušej přidat do menu položky další a uvidíš to v praxi.

Pokud to chceš mít s tím ohraničením až dolů, tak jedině že bys to obalil do divu a ten pak nastyloval podle potřeby.

Nahoru Odpovědět

10.6.2015 22:45

cervin.marcel

Člen

cervin.marcel:10.6.2015 23:17

děkuji za reakci

to jsem zkoušel, ale nepodařilo se mi to (ale rád bych to vyzkoušel, jen mi to nejde)
tím, ale zruším čistý zápis formátu v HTML5

Nahoru Odpovědět

10.6.2015 23:17

Tomáš Maňhal

Člen

Tomáš Maňhal:11.6.2015 0:45

Během zítřka se na to podívám blíže :-) Určitě to vyřešíme :-)

Nahoru Odpovědět

11.6.2015 0:45

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:11.6.2015 1:14

Div není proti HTML5 specifikaci. Naopak je dost často potřeba. HTML5 není o tom, že div nahradíme novými tagy, o to tam primárně nejde.

Editováno 11.6.2015 1:15

Nahoru Odpovědět

11.6.2015 1:14

Neaktivní uživatelský účet

cervin.marcel

Člen

cervin.marcel:11.6.2015 7:59

tomasmanhal děkuji

Nahoru Odpovědět

11.6.2015 7:59

Tomáš Maňhal

Člen

Tomáš Maňhal:11.6.2015 8:24

Přidej do <style>:

html, body {
    height: 100%;
    width: 100%;
    padding:0px;
    margin: 0px;
}

Je to z důvodu, že elementy podřízené hlavním "html, body" potřebují mít z čeho dědit velikost v % .Takže navigaci a section pak nastavíš výšku dle potřeby. Nesmíš jim dát 100%, protože by Ti zmizela patička mimo monitor. Dej jim třeba 80% abys to viděl. Celkový kód pak vypadá takhle:

<!DOCTYPE html>
<html lang="cs">
<head>
<link rel="stylesheet" type="text/css" href="css/hlavni.css">
<meta charset="utf-8">

</head>
<body>
    <header>
        <h1>Moje hlavička webových stránek</h1>
    </header>
<style>
html, body {
    height: 100%;
    width: 100%;
    padding:0px;
    margin: 0px;
}

header {
    background-color:white;
    color:navy;
    text-align:center;
    padding:5px;
    border:2px solid navy;
}
nav {
    line-height:30px;
    background-color:#eeeeee;
    width:150px;
    height: 80%;
    float:left;
    padding:5px;
    border-left: 2px solid navy;
    border-right: 2px solid navy;
    border-top: 0px;
    border-bottom: 0px;
}
section {
    height: 80%;
    width:650px;
    float:left;
    padding:1px;


}
footer {
    background-color:#151b8d;
    color:white;
    clear:both;
    text-align:center;
    padding:10px;
    border:2px solid navy;
}

ul {
    list-style:none;
}


</style>

    <nav>
        <ul>
            <li><a href="html\1926-1930.html">1. generace</a></li>
            <li><a href="html\1931-1935.html">2. generace</a></li>
        </ul>
    </nav>

    <section>
    <h1>Úvodní kapitoly</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget massa libero. Vestibulum ex purus, posuere ut vestibulum quis, vestibulum sed nibh. Maecenas auctor dolor enim, sit amet mattis nunc ultricies ac. Duis in suscipit massa, in egestas neque. Morbi in lectus sagittis, sollicitudin mi a, cursus velit. Curabitur in accumsan lorem. Aenean quis condimentum metus. Nunc dignissim pulvinar congue. Donec non iaculis eros. Nunc lobortis rutrum est a eleifend. Maecenas rutrum in augue at ultrices. In fermentum ligula a ipsum matti</p>
        <p>s feugiat velit eu mi dictum blandit. Ut a ipsum non eros semper lacinia ac ut elit. Nam gravida sem non enim iaculis aliquet. Praesent dignissim consequat libero nec mollis. Vivamus scelerisque et dolor eget eleifend. Duis pulvinar urna ac erat semper, at faucibus enim maximus. Sed sit amet odio tincidunt, tincidunt lacus in, aliquam quam. Pellentesque mollis, nibh eget ornare dictum, erat quam viverra orci, non gravida ante ligula nec ligula. Nam varius, lacus sit amet vulputate dignissim, arcu eros congue libero, eu facilisis justo tellus dictum nunc. Vivamus lacinia lacus eget vestibulum ullamcorper.</p>
    </section>

    <footer>
        Zde je dole
    </footer>
</body>
</html>

Nahoru Odpovědět

11.6.2015 8:24

cervin.marcel

Člen

cervin.marcel:11.6.2015 9:08

Moc Ti děkuji. Je to dobré.

Nahoru Odpovědět

11.6.2015 9:08

Tomáš Maňhal

Člen

Tomáš Maňhal:11.6.2015 9:14

Je to spíš takové provizorní řešení :-) Jinak co se týče těch divů, tak se jim stejně nevyhneš. Do HTML5 patří, ale to časem poznáš ;-)

Nahoru Odpovědět

11.6.2015 9:14

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:11.6.2015 9:49

Jenom ten styl by ještě měl být v hlavičce, až se bude řešit, proč to nejde

Nahoru Odpovědět

11.6.2015 9:49

Neaktivní uživatelský účet

Tomáš Maňhal

Člen

Tomáš Maňhal:11.6.2015 10:36

Jo jo, úplně jsem to přehlédnul :-)

Nahoru Odpovědět

11.6.2015 10:36

cervin.marcel

Člen

cervin.marcel:11.6.2015 12:44

Aha, jak to provizorní řešení? Já nerad dělám něco provizorního, pokud to mohu udělat jinak a nejlépe. Abych potom později nenarazil na problém.
Vycházím ze zde a na google okoukaných návodů a chtěl bych se to naučit hned zkraje dobře. A hlavně bez kompromisů, když to řešit jde hned přímo.

Nahoru Odpovědět

11.6.2015 12:44

Tomáš Maňhal

Člen

Tomáš Maňhal:11.6.2015 13:17

Na žádné problémy bys narazit neměl. Jen prostě až půjdeš teorií dále, responzivitou a dalšími aspekty, tak budeš do kódu dále zasahovat :-) Takže určitě ve finále nezůstane v této podobě :-) A nemusíš se toho v žádném případě bát, ba naopak :-)

Jako první se podívej na meta tagy, jejich použití, význam a tak dále, potom přijde na řadu pokročilá navigace, layout stránky, responzivita, pak to celé zabalíš do hezkého CSS kabátku, budeš přidávat JavaScript a mnoho dalšího :-)

Zjistíš, že tohle téma je natolik rozsáhlé, že se stávající verzí webu si ani zdaleka nevystačíš a budeš chtě nechtě muset do kódu zasahovat, protože ne vždy vše funguje jak má, každý prohlížeč se také chová jinak, budeš řešit kolize elementů, jejich pozicování.

Je toho zkrátka mnoho a ty jsi na úplném začátku :-) Ale začal jsi dobře, což se nedá říct o mnohých před Tebou, kteří u nás hledali radu :-)

Nahoru Odpovědět

11.6.2015 13:17

Tomáš123

Člen

Tomáš123:11.6.2015 17:44

"já ale chci vytvořit layout podle specifikace HTML5, po novu"
Zvykni si, že nie všetky dobré materiály stoja na HTML5. Mohli byť vyrobené skôr, ale platia stále. V tomto konkrétnom prípade som ti chcel ukázať, akými všelijakými spôsobmi sa dá želaný výsledok dosiahnuť, nie primäť ťa skopírovať celý kód. Takže, ak ťa to zaujíma, pekne sa tam vráť a prečítaj si to. HTML5 je stále HTML.

Nahoru Odpovědět

11.6.2015 17:44

Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.

cervin.marcel

Člen

cervin.marcel:11.6.2015 20:52

Skvělé, děkuji, jdu dál na sobě makat.
Ještě jednou Vám pánové děkuji. A už se těšte, ještě o mě uslyšíte

Nahoru Odpovědět

11.6.2015 20:52

cervin.marcel

Člen

cervin.marcel:14.6.2015 7:49

Ahoj
tak jsem tu zas.
Přišel jsem na problém. Když do části "<section>" v předešlém příkladu začnu přidávat obsah, tak se mi neroztahuje sloupec s obsahem a neposunuje hlavička, ale přeleje se to přes.
Děkuji za pomoc

Nahoru Odpovědět

14.6.2015 7:49

Tomáš123

Člen

Tomáš123:15.6.2015 18:12

Namiesto natvrdo deklarovaného height použi vlastnosť min-height. Pozor ale na to, aby mali všetky nadradené prvky deklarované height: 100%. Vlastnosť min-height totiž dopočítava výšku z absolútnej hodnoty... Min-height: 100% z neznámej hodnoty pochopiteľne nefunguje. Ak niečo nebude fungovať, pridaj prosím aj kód napríklad v http://jsfiddle.net/.

Nahoru Odpovědět

15.6.2015 18:12

Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.

cervin.marcel

Člen

cervin.marcel:16.6.2015 11:35

Tak jsem to sem uložil

http://jsfiddle.net/ezbhyp33/

nyní se mi již hlavní sekce roztahuje podle vloženého obsahu, ale nemění se mi to ohraničení a stínování (podbarvení menu) v oblasti levého sloupce
a když začnu zmenšovat (měnit šířku prohlížeče) okno, tak se mi potom i hlavní obsah rozpadne (skočí dolu

děkuji moc

Nahoru Odpovědět

16.6.2015 11:35

Tomáš123

Člen

Tomáš123:16.6.2015 16:27

Na to, ako dosiahnuť rovnako vysokých stĺpcov som ťa odkázal vyššie. Sú tam popísané snáď všetky známe metódy.

Chceš, aby sa po zmenšení na určitý limit stránka prestala zužovať a objavil sa horizontálný posuvník? V takom prípade stačí obaľovaciemu prvku nastaviť min-width: __px;

Asi najlepším riešením výzorovo dosiahnuť rovnako vysoké stĺpce je použiť obrázok (je to tam popísané). Doporučujem ti niečo také vytvoriť. Chcem, aby si si to najprv skúsil sám a až potom sa prípadne pýtal na to, čomu nerozumieš. Vytvoriť hotové riešenie nemá zmysel.

Nahoru Odpovědět

16.6.2015 16:27

Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.

Nejčastěji vyhledáváné

Diskuze: Neroztahuje se mi sloupec s navigací vlevo podle obsahu sloupce vpravo