Avatar
cervin.marcel:

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
Avatar
IT Man
Redaktor
Avatar
Odpovídá na cervin.marcel
IT Man:

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
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
cervin.marcel:

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  +1 9.6.2015 21:01
Avatar
IT Man
Redaktor
Avatar
Odpovídá na cervin.marcel
IT Man:
  1. Nepoužívej moc id, ale místo toho atributy (tj. místo <div id="footer"> <footer> apod.).
  2. Atributy v menu bys mohl dát do <ul> a pak každý jednotlivý do <li> - lépe se to styluje.
  3. Řešení: dej si ty dva sloupce do nějakého divu a nastav oboum sloupcům height: 100%. :)
Nahoru Odpovědět  -2 9.6.2015 21:28
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na IT Man
Jiří Gracík:

Víš, co je to atribut?

// V html

Editováno 9.6.2015 21:45
Nahoru Odpovědět  +1 9.6.2015 21:44
Creating websites is awesome till you see the result in another browser ...
Avatar
Odpovídá na Jiří Gracík
cervin.marcel:

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
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na cervin.marcel
Jiří Gracík:

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
Creating websites is awesome till you see the result in another browser ...
Avatar
Odpovídá na Jiří Gracík
cervin.marcel:

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
Avatar
Odpovídá na Jiří Gracík
cervin.marcel:

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
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na cervin.marcel
Jiří Gracík:

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

Nahoru Odpovědět 10.6.2015 10:09
Creating websites is awesome till you see the result in another browser ...
Avatar
cervin.marcel:

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
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na cervin.marcel
Jiří Gracík:

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
Creating websites is awesome till you see the result in another browser ...
Avatar
Tomáš123
Člen
Avatar
Odpovídá na cervin.marcel
Tomáš123:

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.
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Tomáš123
Jiří Gracík:

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

Nahoru Odpovědět 10.6.2015 18:31
Creating websites is awesome till you see the result in another browser ...
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na cervin.marcel
Jiří Gracík:

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

Nahoru Odpovědět 10.6.2015 18:31
Creating websites is awesome till you see the result in another browser ...
Avatar
cervin.marcel:

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
Avatar
tomasmanhal
Člen
Avatar
Odpovídá na cervin.marcel
tomasmanhal:

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

Nahoru Odpovědět 10.6.2015 21:20
Kdyby nám dodali k životu zdrojový kód, vše by bylo jednodušší...
Avatar
cervin.marcel:

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
Avatar
tomasmanhal
Člen
Avatar
Odpovídá na cervin.marcel
tomasmanhal:

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
Kdyby nám dodali k životu zdrojový kód, vše by bylo jednodušší...
Avatar
cervin.marcel:

děkuji za reakci

  1. to jsem zkoušel, ale nepodařilo se mi to (ale rád bych to vyzkoušel, jen mi to nejde)
  2. tím, ale zruším čistý zápis formátu v HTML5
 
Nahoru Odpovědět 10.6.2015 23:17
Avatar
tomasmanhal
Člen
Avatar
Odpovídá na cervin.marcel
tomasmanhal:

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
Kdyby nám dodali k životu zdrojový kód, vše by bylo jednodušší...
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na cervin.marcel
Jiří Gracík:

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
Creating websites is awesome till you see the result in another browser ...
Avatar
tomasmanhal
Člen
Avatar
Odpovídá na cervin.marcel
tomasmanhal:

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  +1 11.6.2015 8:24
Kdyby nám dodali k životu zdrojový kód, vše by bylo jednodušší...
Avatar
Odpovídá na tomasmanhal
cervin.marcel:

Moc Ti děkuji. Je to dobré.

 
Nahoru Odpovědět 11.6.2015 9:08
Avatar
tomasmanhal
Člen
Avatar
Odpovídá na cervin.marcel
tomasmanhal:

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  +1 11.6.2015 9:14
Kdyby nám dodali k životu zdrojový kód, vše by bylo jednodušší...
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na tomasmanhal
Jiří Gracík:

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  +1 11.6.2015 9:49
Creating websites is awesome till you see the result in another browser ...
Avatar
tomasmanhal
Člen
Avatar
Odpovídá na Jiří Gracík
tomasmanhal:

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

Nahoru Odpovědět  +1 11.6.2015 10:36
Kdyby nám dodali k životu zdrojový kód, vše by bylo jednodušší...
Avatar
cervin.marcel:

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
Avatar
tomasmanhal
Člen
Avatar
Odpovídá na cervin.marcel
tomasmanhal:

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
Kdyby nám dodali k životu zdrojový kód, vše by bylo jednodušší...
Avatar
Tomáš123
Člen
Avatar
Odpovídá na cervin.marcel
Tomáš123:

"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.
Avatar
Odpovídá na Tomáš123
cervin.marcel:

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 :D

 
Nahoru Odpovědět 11.6.2015 20:52
Avatar
cervin.marcel:

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
Avatar
Tomáš123
Člen
Avatar
Odpovídá na cervin.marcel
Tomáš123:

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.
Avatar
Odpovídá na Tomáš123
cervin.marcel:

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
Avatar
Tomáš123
Člen
Avatar
Odpovídá na cervin.marcel
Tomáš123:

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.
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 37 zpráv z 37.