Diskuze – Lekce 19 - Fixní menu a pozicování v CSS

Zpět

Upozorňujeme, že diskuze pod našimi online kurzy jsou nemoderované a primárně slouží k získávání zpětné vazby pro budoucí vylepšení kurzů. Pro studenty našich rekvalifikačních kurzů nabízíme možnost přímého kontaktu s lektory a studijním referentem pro osobní konzultace a podporu v rámci jejich studia. Toto je exkluzivní služba, která zajišťuje kvalitní a cílenou pomoc v případě jakýchkoli dotazů nebo projektů.

Komentáře

Neaktivní uživatel

Člen

Neaktivní uživatel:15.7.2018 17:15

Nevím jestli jsem to špatně pochopil nebo to je opravdu špatně

Statická poz… …Všechny naše elementy mají nyní <b>fixní</b> pozici,

Jak vypadá s <b>fixní</b> pozicí víme, zkusme ji nyní nastavit pozici relativní…

nemá tam být statická?
Ale tohle je špatně určitě

Dodejm<b>ě</b> headeru vlastnost width…

Odpovědět

15.7.2018 17:15

Neaktivní uživatelský účet

Patrik Pastor

Člen

Patrik Pastor:25.2.2019 21:44

Může mi ptosím někdo vysvětlit toto:

article header{
width: 250px;
float: left;
position: static;
background: none;
}

hlavně, že kdybych změnil width (např zvětšil o 100px) toho headeru, tak se to rozsype cele. A ja může mít text (<header><h1>O MĚ</h1></header>) - nadpis šířku?? text nemá snad šířku ne? nebo se ten nadpis roztáhne doprava na okraj toho headeru? Pak by ten nadpis byl float: right ne? spoustu otázek ale v seriálu žádna odpoveď, předem díky tedy za ní.

Odpovědět

25.2.2019 21:44

Matěj Bína

Člen

Matěj Bína:5.3.2019 19:20

Tohle je hlavička článku a její šířka spolu s šířkou <section> dává těch magických doporučených 960 px. Stačí pixelík navíc a už se to nevejde do centrovače (když zvýšíš pixely tam, všechno funguje).

Nadpis je blokový element a defaultně se roztáhne na celou šířku rodiče (proto na něm solidně funguje centrování textu). A i kdyby nebyl, šířku 250 nastavujeme headeru, což je takový nový div se sémantickým významem, pokud jsem to správně pochopil.

To s float: right nějako nepobírám. Zkoušel jsem si s ním hrát úplně na začátku tutoriálu, ale to už bylo moc dávno, abych si pamatoval, jak se ty bloky chovaly.

Editováno 5.3.2019 19:20

Odpovědět

5.3.2019 19:20

Marek Šebek

Tvůrce

Marek Šebek:26.6.2019 14:19

Ahoj, mám menší problém.
Po "obalení" headeru i section do centrovace se header posune do středu nahoru nad section. Je zde nějaké řešení aby se přizpůsobil header rozlišení a zároveň se necpal nad section?

Odpovědět

26.6.2019 14:19

Jaroslav Smrž

Tvůrce

Jaroslav Smrž:26.6.2019 17:31

Jak se má header přizpůsobit rozlišení??? Nechápu otázku. V header máš pouze nadpis.
Jak vypadá CSS třída pro centrovac?
Header se nikam necpe. Je logické, že když ho máš v jednom divu nad section, tak že bude nad ní, když nemáš nastavený float

Odpovědět

26.6.2019 17:31

/* Life runs on code */

Marek Šebek

Tvůrce

Marek Šebek:26.6.2019 18:38

Špatně jsem položil otázku. Myslel jsem aby při zoom apod. se stále centroval a nezůstával na jednom místě. Na fotce jde vidět bez centrovac
třída pro centrovac:

#centrovac {
    margin: 0px auto;
    width: 960px;
}

body {
        font: 14px verdana;
        margin: 0px;
        background: url('pozadi_sede.png') #1c2228;
        min-width: 960px;
}
h2, h3, h4, h5, h6 {
    text-align: center;
    color: #0a294b;
    font-family: arial;
    text-shadow: 3px 3px 7px #666666;
}
h2 {
    font-size: 1,7em
}
h1{
    font-size: 2em;
    font-weight: normal;
    text-align: center;
    text-shadow: 2px 2px 1px #0a294b;
    color: white;
}
#centrovac {
    margin: 0px auto;
    width: 960px;
}
#logo {
    background: url('logo.png') no-repeat;
    width: 250px;
    height: 60px;
    float: left;
    margin: 7px 0px 0px 20px;
}
#logo h1 {
    margin: 14px 0px 0px 10px;
}
nav ul {
    margin: 0px;
    list-style-type: none;
}
nav ul li {
    float: left;
    padding: 0px 25px;
    margin: 0 5px;
    font-size: 17px;
    height: 73px;
    line-height: 4,3em;
}
nav ul li:hover, .aktivni {
    background: #ffbb00;
    box-shadow: 0px 0px 5px black;
}
nav a {
    color: white;
    text-decoration: none;
}

.centrovany {
    text-align: center;
}
header {
    height: 73px;
}
article {
    background: url("noisy_texture.png") #4366f2;
    padding: 30px 0px;
}
article header {
    width: 250px;
    float: left;
}
article section {
    width: 666px;
    float: left;
    background: white;
    border: 10px inset #006797;
    box-shadow: 2px 2px 7px #1c2228;
    padding: 20px;
}
.cistic {
    clear: both;
}
.vlevo {
    float: left;
}
footer {
    height: 40px;
    color: white;
    margin: 20px 0 0 30px
}
footer a {
    color: #ffbb00;
    text-decoration: none;
}

Odpovědět

26.6.2019 18:38

Jaroslav Smrž

Tvůrce

Jaroslav Smrž:26.6.2019 19:11

Pořád nechápu, co myslíš. Pokud myslíš chování při zmenšení okna nebo při prohlížení na mobilu, tak tomu se říká responsivita. Je třeba nastavit pozicování elementů při různých šířkách displaye - tzv breakpointy. Ty se nastavují v CSS pomocí @media. Další a mnohem schůdnější možností je použití Bootstrap frameworku, který už vše obsahuje. Více na https://getbootstrap.com/…ntroduction/

Editováno 26.6.2019 19:11

Odpovědět

26.6.2019 19:11

/* Life runs on code */

Jaroslav Smrž

Tvůrce

Jaroslav Smrž:26.6.2019 19:20

Obsah tvá stránky by se pak dal s pomocí Bootstrap napsat nějak takto:

<div class="pozadi-modre">
        <div class="container">
                <div class="row">
                        <div class="col-md-4">
                                <h1 class="text-center">>O mne</h1>
                        </div>

                        <div class="col-md-8">
                                <div class="pozadi-bile">
                                        <p>Zde bude samotný obsah</p>
                                </div>
                        </div>
                </div>
        </div>
</div>

Odpovědět

26.6.2019 19:20

/* Life runs on code */

Marek Šebek

Tvůrce

Marek Šebek:26.6.2019 19:42

Zjednodušeně bych chtěl dosáhnout toho, co je v této lekci v: "Šířka pole pod článkem".
Jenže když přidám centrovac tak se mi stránka rozhodí z původní pozice, jak je vidět na fotkách výše. Ještě přidávám celý html kód, protože opravdu nevím v čem je chyba. Omlouvám se, jsem začátečník a bohužel nevidím, kde je chyba, protože jsme porovnával html a css moje s tím, co je zde ke stažení a zdají se mi totožné (samozřejmě kromě obrázků apod.).

HTML s použitým centrovac zde:

<!doctype html>
<html lang="cs-cz">


<head>
        <meta charset="utf-8"/>
    <link rel="stylesheet" href="zaklady.css" type="text/css" />
    <title>Markovo Portfolio</title>
</head>
<body>

    <header>
        <div id="logo"><h1>Marek</h1></div>
    <nav>
        <ul>
            <li class="aktivni"><a href="#">Domů</a></li>
            <li><a href="#">O mně</a></li>
            <li><a href="#">Dovednosti</a></li>
            <li><a href="#">Reference</a></li>
            <li><a href="#">Kontakt</a></li>
        </ul>
    </nav>
</header>

<article>
   <div id="centrovac">
    <header>
        <h1>O mně</h1>
    </header>

    <section>
            <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

            <p class="centrovany"><img src="nb1.png" alt="notebook" /></p>
            <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>
            <p>TEXT TEXT TEXT</p>
                <div class="cistic"></div>

        <h2><p>Dovednosti</p></h2>
            <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>
    </section>

    <div class="cistic"></div>
</div>
</article>
<footer>
    Vytvořil &copy;Marek pro sebe
</footer>
</body>
</html>

Editováno 26.6.2019 19:44

Odpovědět

26.6.2019 19:42

Marek Šebek

Tvůrce

Marek Šebek:28.6.2019 14:52

Nakonec tedy vyřešeno. Problém byl v tloušťce borderu.
Díky za snahu pomoct mi :-)

Odpovědět

28.6.2019 14:52

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

Nejčastěji vyhledáváné

Diskuze – Lekce 19 - Fixní menu a pozicování v CSS