Autor Zpráva
Prefin
Profil
Ahoj všichni
Pokouším se udělat menu, které bude připnuté k středu horní hrany prohlížeče, ale nějak se mi to pořád nedaří.
V tomhle provedení je přilepené k levému okraji:
.menu {
    position: fixed;
    top: 0px;
    width: 100%;
    margin: 0 auto;
    text-align:center;
}
ul, li {
     margin: 0 auto;
     padding: 0;
}
.cl {
      clear: both;
}
ul.horni_menu {
     font-size: 18px;
     font-family: sans-serif;
}
ul.horni_menu li {
      list-style-type: none;
}
ul.horni_menu li.navigace {
     float: left;
     width: 150px;
     height: 70px;
     margin-right: 4px;
     margin-bottom: 5px;
}
ul.horni_menu li.navigace a {
     display: block;
     width: 150px;
     height: 70px;
     line-height: 70px; /* svisle centrovani */
     text-align: center; /* vodorovne centrovani */
     background: url(../img/pozadi_menu.png);
     color: white;
     font-weight: bold;
     text-decoration: none;
     font-style: italic;
}
ul.horni_menu li.navigace a:hover {
     background-image: url(../img/pozadi_menu_hover.png);
     color: #FFFF33;
     border-color: #000;
}
<div class="menu">
        <ul class="horni_menu">
                 <li class="navigace"><a href="#">Home</li>
                 <li class="navigace"><a href="#">Podmínky</a></li>
                 <li class="navigace"><a href="#">Formulář</a></li>
                 <li class="navigace"><a href="#">Kontakt</a></li>
                  <li class="cl"></li> 
        </ul>
</div>
Potřeboval bych poradit, kde dělám chybu.
Díky
Str4wberry
Profil
Chcete-li centrovat pomocí margin: auto, je třeba uvést šířku.

Živá ukázka
margin
Profil *
Str4wberry:
Chcete-li centrovat pomocí margin: auto, je třeba uvést šířku.
Nebo použít display: table; což funguje v IE8 a novějších. V tomto případě má menu pevnou šířku, doporuřuji použít pevnou šířku i pro horni_menu.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: