Autor Zpráva
filgang
Profil
Zdravím mám problém zarovnat menu na střed . Tady je moje jednoduché menu, prosím pomůžete mi ?

<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0 ;
padding:0

overflow:hidden;
}
li
{
float:left;

}
a:link,a:visited
{
display:block
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#C80000 ;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#FFCC33;
}


</style>
</head>

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">Zednictví</a></li>
<li><a href="#contact">Sport</a></li>
<li><a href="#about">Budoucnost</a></li>
</ul>
</body>
</html>

Moderátor jenikkozak: Vkládej prosím kódy mezi značky [pre] a [/pre] (stačí kliknout na ).
Taurus
Profil
Stačilo trochu hledat... pokusy.1-webdesign.cz/centrovany-float.html
filgang
Profil
[#1] filgang
Díky :) Taurus,
margin
Profil *
Jak má menu vypadat?
Ptám se, protože na řádku 19 deklaruješ menu jako blokové a na dalším řádku dáváš odkazům šířku, na řádku 24 dáváš odkazům padding. Nic z toho nefunguje kvůli chybějícímu středníku na konci řádku 19.

Pokud doplníš chybějící středník, budou mít všechny položky menu stejnou šířku, díky tomu půjde šířku menu jednoduše spočítat, šířku deklarovat pro UL a UL vycentrovat.
width položky je 120px, k tomu pravý a levý padding 2×4px, vyjde 128px, takže 4 položky zabírají 512px
ul
    {
  list-style: none;
  margin: auto;
  padding: 0;
  width: 512px;
}

Pokud na stránce nemáš, tak jako zde !doctype, tak se menu nevycentruje v IE. Stačí doplnit na úplně první řádek !doctyle pro standardní režim, třebas tento:
<!DOCTYPE html>
filgang
Profil
Mám ještě dotaz mám to takhle, ale nezarovná se mi to úplně na střed . Omlouvám se za dotaz, ale jsem nováček.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="cs">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="cs" />
        <style>
ul {
    margin: 1 auto;
    display: table;
}
li {
    display: table-cell;
}
a {
    float: left;
    padding: 5px 105px;
    color: #fff;
    font-weight:bold;
    border-right: 1px solid #fff;
    background: #C80000;
    text-decoration: none;
}
a:hover {
    background: #FFCC33;
}
        </style>
        <!--[if lte IE 7]>
        <style>
div {
    text-align:center;
}
ul {
    display: inline-block;
}
ul {
    display: inline;
}
ul li {
    float: left;
}
        </style>
        <![endif]-->
        <title> Centrovaný float
        </title>
    </head>
    <body>
        <div>
            <ul>
                <li>
                <a href="#">Home</a></li>
                <li>
                <a href="#">Zednictvi</a></li>
                <li>
                <a href="#">Sport</a></li>
                <li>
                <a href="#">Budoucnost</a></li>
            </ul>
        </div>
    </body>
</html>
margin
Profil *
Tak to zkoušíš v IE6 nebo IE7, nebo ne vyšší verzi IE, ale přepnuté do režimu IE7. V ostatních prohlížecích zůstane menu vlevo, protože sis ho na řádku 8 rozvrtal.

Až to spravíš, tak zruš odsazení seznamu.
filgang
Profil
Mohl bys mi to opravit ? http://jsfiddle.net/MF8cX/
margin
Profil *
Jediná hodnota v CSS, kterou je možné psát bez jednotky, je 0, takže margin: 0 auto; je správně, ale margin: 1 auto; je (skoro) totéž, jako margin: nesmysl auto; a nefunguje, správný zápis je:
margin: 1px auto;
Seznam má výchozí levé odsazení 40px, v některých prohlížečích je odsazení marginem, ale ten přepisuješ na "auto". Ve většině prohlížečů je odsazení paddingem, stačí ho vynulovat přidáním pravidla pro seznam, stačilo by vynulovat levý padding, ale zápisu pro vynulování všech paddingů se dává přednost, pravděpodobně proto, že je na zápis kratší (a jistota ke kulomet):
padding: 0;

Výsledek (dal jsem do HTML podmíněný komentář se styly pro starší IE, v jsfiddle jiná možnost připojení CSS strze podníněný komentář není)
http://jsfiddle.net/MF8cX/5/
http://fiddle.jshell.net/MF8cX/5/show/


filgang:
Stále mi dlužíš odpověď, jak má menu vypadat, mají mít položky menu šířku podle obsahu, nebo mají být všechny položky menu stejně široké? Pokud jsou položky menu stejně široké, jde menu vycentrovat podstatně jednodušeji, viz výše[#4].

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: