Diskuze: Top menu s tlacitkami

Naučíme tě pracovat na home-office.

Zjistit více...

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

Marek Šimon

Člen

Marek Šimon:8.12.2015 20:01

Ahojte, mam problem s tlacitkami v headeri.
HTML

<body>
    <header>
        <nav>
            <ul>
                <li><button>Uvod</button></li>
                <li><button>O mne</button></li>
                <li><button>Predstaveni</button></li>
                <li><button>Galerie</button></li>
                <li><button>Videa</button></li>
                <li><button>Kontakt</button></li>
            </ul>
        </nav>
    </header>
</body>

CSS

body {
    padding: 0px 0px;
    margin: 0px 0px;
}
header {
    padding: 0px 0px;
    margin: 0px 0px;
}
nav ul {
    list-style-type: none;
}
nav ul li {
    display: inline-block;
    padding: 0px 0px;
    margin: 0px 0px;
}

Jedna sa o to, ze neviem docielit toho, aby som mal tlacitka fixne pozicovane na vrchu stranky, ktore sa dotykaju okrajov stranky. Ako naprikald ma navigacne menu Facebook. Chcem to proste dat hore, suvisla vrstva vedla seba iducich tlacitok (akoby natlacene pri sebe), ktore budu mat fixnu poziciu. Skusal som uz cokolvek, ale vzdy mam proste 1-2cm tlacitka od vrchu stranky a od krajov.

Dakujem za kazdu radu.

Odpovědět

8.12.2015 20:01

Marek Šimon

Člen

Marek Šimon:8.12.2015 20:03

http://jsfiddle.net/epbjzr5b/

Nahoru Odpovědět

8.12.2015 20:03

Jan Lupčík

Tvůrce

Jan Lupčík:8.12.2015 20:11

Abys měl tlačítka, nemusíš to dávat do elementu button. Stačí to jen nastylovat dobře.
Na fixní pozici pak stačí jen nastavit elementu s menu:

position: fixed;
top: 0;
left: 0;
width: 100%;

Nahoru Odpovědět

8.12.2015 20:11

TruckersMP vývojář

Marek Šimon

Člen

Marek Šimon:8.12.2015 20:20

http://jsfiddle.net/epbjzr5b/3/
Akurat co s tym teraz? Neviem to hodit potom vedla seba, aby mi pokryvali pekne celu listu ako by som si predstavoval.

Nahoru Odpovědět

8.12.2015 20:20

Jan Lupčík

Tvůrce

Jan Lupčík:8.12.2015 20:28

Píšu elementu s menu, ne jednotlivé položce. Nastav to tedy elementu ul či nav.

Nahoru Odpovědět

8.12.2015 20:28

TruckersMP vývojář

Marek Šimon

Člen

Marek Šimon:9.12.2015 16:22

http://jsfiddle.net/epbjzr5b/4/

No, tak nakoniec som tam pouzil ten <nav> tag , aby som spojil tie elementy, ktore budu predstavovat tlacitka. S tym menu som to nejako nevedel.
Ale mam par veci:

Co mam zle alebo co mi chyba, ked musim pouzivat minusove hodnoty marginu na to, aby som tu listu s osadil uplne na okraje stranky a tam ich zafixoval? Pokial nedam minusove hodnoty, tak sa mi jednoducho spravi margin zhora, zprava a zlava a neda sa to odstranit, lebo ked dam napriklad margin-left: 0; tak to vlastne zostane kde je. Proste defaultne je akoby nastaveny margin, ktory je zhruba tych 50 pixelov zlava.
Ani nastavenim marginu right sa mi neda eliminovat asi 10px medzera medzi koncom listy a hranicou stranky.
Ked nastavim <article> a vypisem <header> a chcem to dat na stred stranky s pomocou left: 50% alebo inou metodou, tak sa mi rozhodi sirka stranky a viem v nej skcrollovat doprava a dolava.

Celkovo mam nejako problem s tym umiestnenim listy. To co je v kode v odkaze je uz pomenej docela dost, tak su tam aj blbosti, ktore tam nemaju byt. Je to dosledok toho, ze som skusal uz fakt hocico.

Nahoru Odpovědět

9.12.2015 16:22

Jan Lupčík

Tvůrce

Jan Lupčík:9.12.2015 19:01

1. Tímhle vynuluješ všemu margin a padding, vyřeší to tvůj problém (umisť to na začátek CSS kódu):

* {
  margin: 0;
  padding: 0;
}

2. Nechápu.
3. Dej místo toho left toto, to ti vycentruje element na střed:

margin: auto;

Editováno 9.12.2015 19:02

Nahoru Odpovědět

9.12.2015 19:01

TruckersMP vývojář

Honza Bittner

Tvůrce

Honza Bittner:9.12.2015 20:16

Koukni se na první 3 články v http://www.itnetwork.cz/…ni-webdesign, určo Ti to pomůže. :-)

Nahoru Odpovědět

9.12.2015 20:16

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Marek Šimon

Člen

Marek Šimon:9.12.2015 21:18

Toto je vysvetlenie k to tej dvojke, ktoru si nechapal. Napravo neviem spojit hranicu listy s pravym okrajom stranky, je tam par pixelova medzera a neviem sa toho zbavit. Mozno je to tym, ze pouzivam float: left; lebo display: inline-block; mi do toho nejako nesedi.

Ak viete s tymto poradit, tak teoreticky mam po probleme, lebo ten trik z jednicky mi pomohol

Urcite na to tie clanky skoncim, asi je problem to, ze som dokoncil len prvy serial v HTML/CSS

Nahoru Odpovědět

9.12.2015 21:18

Jan Lupčík

Tvůrce

Jan Lupčík:10.12.2015 6:23

Ten float už odstraň. A pak zkus

width: 100%;

Jinak nevím.

Nahoru Odpovědět

10.12.2015 6:23

TruckersMP vývojář

Matyáš Procházka

Člen

Matyáš Procházka:10.12.2015 9:36

1. Nastav nějakýmu elementu, např. headeru toto:

header {
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
}

Tento element bude pak fixní, tj. pořád na stejné pozici, ne vzhledem ke stránce, ale vzhledem k oknu prohlížeče. Bude úplně vlevo a úplně nahoře a bude 100 % široký.

V něm budeš mít nějaký další element například nav s tímto parametrem:

nav {
        display: inline-block;
}

navíc headeru nastavíš:

header {
        text-align: center;
}

Tím si zajistíš, že se nav bude chovat jako inline block a díky text-align se tudíž zarovná na střed vždy.
V navu pak můžeš mít odkazy, které budou mít float: left;

Vše najdeš zde: https://jsfiddle.net/oLr0qrna/

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

10.12.2015 9:36

Marek Šimon

Člen

Marek Šimon:10.12.2015 10:26

Dakujem krasne, funguje A je to aj jednoduchsie.

Nahoru Odpovědět

10.12.2015 10:26

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

Nejčastěji vyhledáváné

Diskuze: Top menu s tlacitkami