Black Friday Black Friday
Black Friday výprodej! Až 80 % extra bodů zdarma! Více informací zde
Avatar
Martin Singer:8. listopadu 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. listopadu 17:31
Avatar
Odpovídá na Martin Singer
Jan Jedlička:8. listopadu 21:27

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

 
Nahoru Odpovědět 8. listopadu 21:27
Avatar
Odpovídá na Jan Jedlička
Martin Singer:8. listopadu 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. listopadu 21:30
Avatar
Odpovídá na Martin Singer
Jan Jedlička:8. listopadu 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. listopadu 21:43
Avatar
Šimon Raichl
Redaktor
Avatar
Odpovídá na Jan Jedlička
Šimon Raichl:9. listopadu 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. listopadu 1:01
Avatar
Odpovídá na Šimon Raichl
Jan Jedlička:9. listopadu 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. listopadu 5:49
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:9. listopadu 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. listopadu 14:20
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:9. listopadu 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. listopadu 14:25
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 8 zpráv z 8.