Autor Zpráva
Filipos
Profil
Dobrý den,

našel jsem zde na fóru, jak vycentrovat horizontální floatované menu, ale neumím vyřešit problém s přetečením floatovaných odkazů doprava přes nadřazený div při zoomu v Chromu na 250%.

Rád bych, aby se odkazy, které se už nevejdou do rozmezí, posunuly na další řádek.

Věděl by někdo, prosím?

Příklad zde: testovac.wz.cz
visionic
Profil *
Ahoj.

Živá ukázka
Filipos
Profil
Děkuji :)

Edit: Ješte dotaz, jakou funkci má position: relative u divu "full"?
visionic
Profil *
Asi to vyzní blbě, ale když ji dáš pryč, tak se nic moc neděje, já ji tam dávam ze zvyku :D.
Filipos
Profil
Dobře, a existuje způsob, jak to celé menu vycentrovat horizontálně v nadřazeném divu? Nefunguje už ul{display:table} a li{display:table-cell} a na floatovaný div ani margin:0 auto....

EDIT: Tak jsem si s tím trochu pohrál a našel jsem provizorní řešení...Sice zřejmě ne profi, ale alespoň se o něj podělím.

HTML:
<body>

      <div class="menu">
              
          <div class="menu-wrap">  

            <div class="menu-wrap2">
              
              <ul>
                <li><a class="item-first" href="">ODKAZ</a></li>
                <li><a href="">ODKAZ</a></li>
                <li><a href="">ODKAZ</a></li>
                <li><a href="">ODKAZ</a></li>
                <li><a href="">ODKAZ</a></li>
                <li><a href="">ODKAZ</a></li>
                <li><a href="">ODKAZ</a></li>
                <li><a href="">ODKAZ</a></li>
                <li><a class="item-last" href="">ODKAZ</a></li>
              </ul>

            </div>  
              
             
          </div>

      </div> 

      <div class="content">
        
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi deserunt, delectus amet asperiores tenetur corporis veniam. Facere, rerum non, hic quam ipsa magni in earum odio labore quod dolorum accusantium vel eum recusandae provident totam sequi dolor adipisci accusamus explicabo.</p>

      </div>
      
  </body>

CSS:
*{
    margin: 0;
    padding: 0;
    font-family: Helvetica;
}

.menu{
    width: 960px;
    max-width: 100%;
    margin: 50px auto 0 auto;
    position: relative;
    text-align: center;
}

.menu-wrap{
    width: 100%;
    margin: 0 auto;
}

.menu-wrap2{
    width: 100%;
    max-width: 100%;
    background: red;
    float: left;
}

.menu ul{
    width: 89%;
    max-width: 100%;
    background: blue;
    list-style: none;
    margin: 0 auto;    
}

.menu li{
    text-decoration: none;
    padding: 20px 0;
    float: left;
    margin-bottom: -1px;
}

.menu a{
    background: rgb(13,13,14);
    padding: 20px;
    margin-right: -1px;
}
Tomáš123
Profil
Filipos:
Nefunguje už ul{display:table}
Prečo by nie? Živá ukázka

Čo sa týka kódu, je zbytočné nastaviť prvku zároveň obtekanie aj plnú šírku. Obdobne tak, zbytočne automatickým marginom centrovať prvok so šírkou 100%.

Nie je dobrou praxou vyrovnávať pozíciu prvku zápornými marginami. Radšej odstrániť príčinu, skúsiť inú metódu (viď ukážku). Nepodarilo sa mi odhaliť príčinu vzniku jednopixelového rozdielu výšok.

visionic:
ale když ji dáš pryč, tak se nic moc neděje,
Presnejšie sa nedeje vôbec nič a relatívna pozícia je v tomto kóde zbytočne.
Filipos
Profil
Díky Tomáši!

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: