Autor Zpráva
bleak
Profil *
Zdravím vás,
potřebuji vytvořit horizontální menu s možností nastavení výšky jednotlivých elementů menu. Mám toto:

<div id="body">
<div id="wrapper" style="text-align:center;margin-left:auto;margin-right:auto">
<div class="menu" style="float:left;display:block">Hlavní stránka</div>
<div class="menu" style="float:left;display:block">Informace</div>
<div class="menu" style="float:left;display:block"><input type="text" name="search"></div>
</div>
</div>

a potřebuji plovoucí elementy menu (musí být vedle sebe na řádku) zarovnat na střed body. Když použiju u položek menu display:inline, tak zarovnání umím, ale potom nejde elementům nastavit výška.
Prosím o tipy jak to provést.
BaTeCzKo
Profil
Mozna nastavit wrapperu sirku a margin: 0 auto; (a na body text-align:center;)
Railbot
Profil
(a na body text-align:center;)
To je nutné jen pokud je IE v quirku.
bleak
Profil *
Mozna nastavit wrapperu sirku a margin: 0 auto; (a na body text-align:center;)

Děkuji za odpovědi. Když nastavím wrapperu šířku, tak centruji wrapper vůči body. Šířku wrapperu však neumí určit, protože počet položek menu je proměnný. Potřeboval bych spíše wrapper šířky 100% a plovoucí elementy položek menu centrovat vůči wrapperu.
Normálními postupy to asi nejde, na netu jsem našel poněkud krkolomné řešení zde, toto se však chová podivně, když chci do elementu vložit vstupní pole. Tak jsem zkoušel, jestli někdo nezná lepší trik :-)
habendorf
Profil
Nějak to celé nechápu. Menu bez linků? K čemu všechny ty divy? Proč display:block, když je to floatované?

Jinak flooatované elementy takhle samozřejmě nevycentruješ. Řešení je hned několik. Třeba poslat to do quirku. Nebo nastavit pro <a> line-height a padding.
Plaváček
Profil
bleak

když chci do elementu vložit vstupní pole

Jaké vstupní pole? Řešení z CSSplay je možná trochu krkolomné, ale funkční a skoro bych řekl jediné možné.
Plaváček
Profil
bleak

Jo, a nemusíš přece používat float, ne?
habendorf
Profil
Jo, a nemusíš přece používat float, ne?

No to je to co mu píšu. Nebo nastavit pro <a> line-height a padding.
Plaváček
Profil
habendorf

Jasně.
bleak
Profil *
Děkuji za tipy, došel jsem k řešení, které přikládám níže. Chová se to stejně v MSIE i Mozille, i vstupní pole pro vyhledávání je stejné a je to centrované :-)

CSS
.navbar{
text-align:center;
width:100%;
border:1px solid green;
height:30px;
}

.menu{
display:inline;
}

.menu a{
line-height:30px;
padding-top:5px;
padding-bottom:6px;
}

.menu a:hover{
background-color:red;
}

HTML
<div id="main">
<div class="navbar">
<div class="menu"><a href="">Hlavní stránka</a></div>
<div class="menu"><a href="">Informace</a></div>
<div class="menu"><input type="text" name="search"></div>
</div>
</div>
habendorf
Profil
No dobrý, jen ty divy jsou úplně zbytečný. Můžeš přece stylovat rovnou <a>.
Toto téma je uzamčeno. Odpověď nelze zaslat.