Nové výhodné předplatné namísto kreditů je tu! Více informací. Upravili jsme také naše provozní podmínky.
NOVINKA: Staň se datovým analytikem a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:
Avatar
Martin Singer
Člen
Avatar
Martin Singer:8.11.2018 17:31

Ahoj, učím se html a css teprve týden a nevím si rady s tím, jak vycentrovat navigacni menu spolu s ikonou do středu, aby to na středu zůstalo i při změně velikosti okna. Struktura je takováto:

<body>
...
<header>
...
<div (s obrazkem)><h1>nad­pis</h1></div>
...
<nav>
<ul>
</ul>
</nav>
...
</header>
...
</body>

Jde mi to to, abych mohl mít po minimalizaci okna stále ikonku v divu fixně a s tím i menu.

Snad jsem to vysvětlil pochopitelně.

Zkusil jsem: Zkoušel jsem přenastavit margin u všech možných částí, ale prostě mi to tam neleze.

Chci docílit: Zarovnat navigační menu s obrázkem na střed (aby tomu neuškodila minimalizace okna).

 
Odpovědět
8.11.2018 17:31
Avatar
Jan Jedlička
Člen
Avatar
Odpovídá na Martin Singer
Jan Jedlička:8.11.2018 21:27

Ahoj ty chces mit obrazek a vedle nadpis a menu polozky? Chapu to dobre

 
Nahoru Odpovědět
8.11.2018 21:27
Avatar
Martin Singer
Člen
Avatar
Odpovídá na Jan Jedlička
Martin Singer:8.11.2018 21:30

Ahoj, přesně tak. A to vše potřebuju mít zarovnáný na střed i při změně velikosti okna.

 
Nahoru Odpovědět
8.11.2018 21:30
Avatar
Jan Jedlička
Člen
Avatar
Odpovídá na Martin Singer
Jan Jedlička:8.11.2018 21:43

ja bych to napsal

HTML:

<body>
  <header>
    <div class="logo"></div><h1>Nadpis</h1>
    <ul>
      <li>první</li>
      <li>druhy</li>
      <li>třetí</li>
      <li>čtvrty</li>
    </ul>
  </header>

CSS:

header {
height: 70px;
width: 100%;
text-align: center;
}
.logo {
    display: inline-block;
    width: 70px;
    background: url(1.jpg);
    height: 70px;
}
h1 {
        display: inline;
}
ul {
        display: inline;
}
li {
        display: inline;
}
 
Nahoru Odpovědět
8.11.2018 21:43
Avatar
Šimon Raichl
Tvůrce
Avatar
Odpovídá na Jan Jedlička
Šimon Raichl:9.11.2018 1:01

Podle me je lepsi pouzit flexbox

header {
    width: 100%;
    display: flex;
    justify-content: center;
}
.logo {
    width: 70px;
    height: 70px;
    background: url(1.jpg);
}
ul {
    display: flex;
    flex-wrap: wrap;
}
li {
    margin: 8px;
    list-style-type: none;
    align-self: center;
}
 
Nahoru Odpovědět
9.11.2018 1:01
Avatar
Jan Jedlička
Člen
Avatar
Odpovídá na Šimon Raichl
Jan Jedlička:9.11.2018 5:49

Ten bych radeji pouzil taky, ale jak psal ze je u zacatku tak jsem nevedel jestli tohle doporucovat.

 
Nahoru Odpovědět
9.11.2018 5:49
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:9.11.2018 14:20 
<style>
header
  {margin:0 auto; width:400px;}
header div, header h1, header ul, header li
  {display:inline;}
</style>

  <header>
    <div class="logo"></div><h1>Nadpis</h1>
    <ul>
      <li>první</li>
      <li>druhy</li>
      <li>třetí</li>
      <li>čtvrty</li>
    </ul>
  </header>
 
Nahoru Odpovědět
9.11.2018 14:20
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:9.11.2018 14:25

https://jsfiddle.net/xprnseqv/
jen toto navic:

<style>
body
  {width:600px;}

Zkus se podivat na bootstrap nez zacnes vymyslet vlastne reseni https://getbootstrap.com/ .

 
Nahoru Odpovědět
9.11.2018 14:25
Avatar
Neaktivní uživatel
Člen
Avatar
Neaktivní uživatel:26.11.2018 11:06

Jestli jsi u začátků. Určitě si projdi základy HTML a CSS tady z IT-networku, kde jsem začínal i já pak se koukni na technologie jako je framework Bootstrap, jak zmiňoval Peter Mlich, je to fakt super věc pro začátečníky. Taky jsem na to přešel hned, jak jsem chtěl dělat jeden z prvních webů. Dá ti to spoustu informací. Pochytíš na tom kupu věcí, které ti třeba nebyly jasné. A nebo pokud by jsi nechtěl pracovat na frameworku (ale ze začátku je to sebevražda to nepoužít, když chceš hezký web "bez znalostí") tak koukni na Flexbox ( FlexBox - itnetwork ) / (css - tricks). Na tom teď frčím já a je to naprosto boží. Ale bootstrap bych ti hodně doporučoval. Hned jak si projdeš nějaké základy a pokud by jsi chtěl dělat nějakou prezentační stránku pro někoho i kdyby zadarmo tak koukni na ten bootstrap (maj to vymazlené), pokud nebudeš řešit optimalizace rychlosti je to bomba (na malých projektech optimalizaci ani moc řešit nemusíš. Jen taková rada do budoucna... pohlídej si kolik načítáš obrázků na jedné stránce a aby neměli zbytečně veliké rozlišení a aby nebyly příliš velké na paměť).
A ještě taková malinkatá rada na závěr. Pokud budeš dávat nějaké tasky sem tak se nestyď za kód, ty co ti budou chtít poradit ti hlavu neutrhnou :) a zkus třeba i tohle pro postování zdrojáků : CodePen

Nahoru Odpovědět
26.11.2018 11:06
Neaktivní uživatelský účet
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 9 zpráv z 9.