NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
Marek Šimon
Člen
Avatar
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
Avatar
Marek Šimon
Člen
Avatar
Marek Šimon:8.12.2015 20:03

http://jsfiddle.net/epbjzr5b/

 
Nahoru Odpovědět
8.12.2015 20:03
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovídá na Marek Šimon
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ář
Avatar
Marek Šimon
Člen
Avatar
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
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovídá na Marek Šimon
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ář
Avatar
Marek Šimon
Člen
Avatar
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:

  1. 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.
  2. Ani nastavenim marginu right sa mi neda eliminovat asi 10px medzera medzi koncom listy a hranicou stranky.
  3. 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
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovídá na Marek Šimon
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. :D
3. Dej místo toho left toto, to ti vycentruje element na střed:

margin: auto;
Editováno
Nahoru Odpovědět
9.12.2015 19:01
TruckersMP vývojář
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Marek Šimon
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.
Avatar
Marek Šimon
Člen
Avatar
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
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovídá na Marek Šimon
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ář
Avatar
Matyáš Procházka
Člen
Avatar
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č
Řešení problému
 
Nahoru Odpovědět
10.12.2015 9:36
Avatar
Marek Šimon
Člen
Avatar
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.