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

Michal Krajčovič

Člen

Michal Krajčovič:11.7.2014 18:07

to s tým zoskupovaním tlačidiel pod seba som vyriešil tak, že som dal headeru v menu id aby to nemalo vplyv na header v article a v css dal min-width na 960px
html:

<header id="menu">
        ...
</header>

css:

#menu {
        height: 73px;
        position: fixed;
        top: 0px;
        background: url('blablabla') #blabla;
        min-width: 960px;
}

Editováno 11.7.2014 18:07

Odpovědět

11.7.2014 18:07

Tomáš123

Člen

Tomáš123:4.4.2015 13:02

Ahoj, v článku máš dve chyby:

Vlastnosti up a dows neexistujú. Používajú sa tam top a bottom
Vo vysvetľovaní statickej pozície si asi nechtiac spomenul fixnú vo vete: "Všechny naše elementy mají nyní fixní pozici".

Odpovědět

4.4.2015 13:02

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

Marek Šimon

Člen

Marek Šimon:7.12.2015 19:25

Ahojte, neviem kam som to mal dat, tak to pisem do casti s pozicovanim a menu.
Mam problem s tlacitkami. Vytvoril som si tlacitka pomocou "button" a dal som im :hover atp. Chcem aby boli (tak isto ako background img) pozicne FIXED, aby ked scrollujem na stranke sa mi obrazok a tie tlacitka nehybali.
Problem nastava v tom, ze neviem ako ich dat vedla seba, skusil som float: left; a nefunguje to. Iba v pripade, ze zmenim position na inu hodnotu ako fixed. Neviete mi s tym pomoct, prosim?

Odpovědět

7.12.2015 19:25

Jiří Jeřábek (thechorcheecz)

Člen

Jiří Jeřábek (thechorcheecz):7.12.2015 19:51

Zdravím, můžeš použít

display: inline-block;

například takto

nav ul li
{
display: inline-block;
}

Odpovědět

7.12.2015 19:51

Marek Šimon

Člen

Marek Šimon:7.12.2015 20:04

v css to mam takto

.button {
    width: 200px;
    transition-duration: 0.5s;
    border: 1px solid black;
    font-size: 30px;
    border-radius: 130px;
    position: fixed;
    padding: 15px 25px;
    background-color: white;
    color: black;
    text-align: center;
    margin: 20px;
    display: inline-block;
}
.button:hover {
    background-color: black;
    color: white;
}

V html to mam takto

<button class="button">Galerie</button>
<button class="button">O mne</button>

A ani po pouziti toho inline-blocku to nefunguje.

Odpovědět

7.12.2015 20:04

Marek Šimon

Člen

Marek Šimon:7.12.2015 20:15

Teraz som skusal na w3schools ten online edit, kde maju tu aplikaciiu, kde si mozes kod vyskusat a menit ho a ked som pridal

position: fixed;

tak mi to tiez sa vsetko prekryvalo cez seba ako v mojom pripade. Takze to bude nieco s tym position.

Odpovědět

7.12.2015 20:15

Marek Šimon

Člen

Marek Šimon:7.12.2015 20:25

tak prepacte za treti post, ale uz som to vyriesil. Ked davam position: fixed; do .button, tak vlastne rusim akekolvek ine vlastnosti umiestnenie ake tam pridam.
Takze som vytvoril dalsie atributy .position1 a .position2 a 1 som pridal iba fixed poziciu a druhemu som dal hodnoty top: 100px a position: fixed;
Teraz sa to zobrazuje ako ma

Odpovědět

7.12.2015 20:25

Jiří Jeřábek (thechorcheecz)

Člen

Jiří Jeřábek (thechorcheecz):7.12.2015 20:26

Nevím, jestli to úplně chápu dobře, každopádně příště lepší založit novej příspěvěk na fórum
zde je to http://jsfiddle.net/pt0qv8oo/

Odpovědět

7.12.2015 20:26

Marek Šimon

Člen

Marek Šimon:7.12.2015 21:19

O tolko jednoduchsie ako som to ja robil... dakujem Aj ked som sa potom nakoniec rozhodol to dat pod seba tie tlacitka, tak som to dal do div s atributom width: 200px a uz su pekne pod sebou

Odpovědět

7.12.2015 21:19

Jakub Vanek

Člen

Jakub Vanek:10.4.2016 12:50

Zdravím, chtěl jsem se zeptat, nevím proč, ale header se mi zobrazuje nad section ale né vedle ní tak jak je v příkladu, lámu si nad tím hlavu a nemůžu na to přijít proč. poradil by někdo?
HTML:

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

                <section>
                        <p>Vítejte na mém prvním webu, psát weby se teprve učím, ale myslím, že mi to docela jde.</p>
                <p class="centrovany">

                </p>

                        <p><img src="obrazky/avatar.png" alt="Programátor HoBi" class="vlevo" style="border-radius: 500px" />Jmenuji se Jakub Vanek a je mi 20 let. Chodím už do práce, jsem zaměstnaný jako kontrolor kvality v Treboplastu.</p>
                <p>Rád poslouchám hudbu a někdy (hlavně v létě) i sportuju.</p>
                <div class="clear"></div>
                <p>Mým hlavním koníčkem (a doufám že jednou i zaměstnáním) je <strong>programování</strong>!</p>

                <p>Tato stránka je vytvořena podle HTML tutoriálů na <a href="http://www.devbook.cz" target="_blank">devbooku</a>.</p>
                </section>
                <div class="clear"></div>
        </div>
</article>

CSS:

header {
        height: 74px;
}
.centrovany {
        text-align: center
}
article {
        background: url('obrazky/bg.png');
        padding: 30px 0px;
}
article header {
        width: 250px;
        float: left;
}
article section {
        width: 706px;
        float: left;
        background: white;
        border: 2px solid #006797;
        border-radius: 10px;
        box-shadow: 2px 2px 5px #1c2228;
        padding: 20px;
}
.clear {
        clear: both
}
#center {
        margin: 0px auto;
        width: 960px;
}
.vlevo {
        float: left;
}

https://ctrlv.cz/Dc0v

Odpovědět

10.4.2016 12:50

<keep it simple />

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