Avatar
Marek Šimon
Člen
Avatar
Marek Šimon:

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
IT Man
Redaktor
Avatar
Odpovídá na Marek Šimon
IT Man:

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

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
IT Man
Redaktor
Avatar
Odpovídá na Marek Šimon
IT Man:

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

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
IT Man
Redaktor
Avatar
Odpovídá na Marek Šimon
IT Man:

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 9.12.2015 19:02
Nahoru Odpovědět  +1 9.12.2015 19:01
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Marek Šimon
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Marek Šimon
Člen
Avatar
Marek Šimon:

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
IT Man
Redaktor
Avatar
Odpovídá na Marek Šimon
IT Man:

Ten float už odstraň. A pak zkus

width: 100%;

Jinak nevím.

Nahoru Odpovědět 10.12.2015 6:23
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
Matyáš Procházka:

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í
+1 bodů
Řešení problému
 
Nahoru Odpovědět  +1 10.12.2015 9:36
Avatar
Marek Šimon
Člen
Avatar
Marek Šimon:

Dakujem krasne, funguje :) A je to aj jednoduchsie.

 
Nahoru Odpovědět  +1 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.