| 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 * |
#2 · Zasláno: 12. 9. 2016, 16:50:23
Ahoj.
Živá ukázka |
||
| Filipos Profil |
Děkuji :)
Edit: Ješte dotaz, jakou funkci má position: relative u divu "full"? |
||
| visionic Profil * |
#4 · Zasláno: 12. 9. 2016, 21:15:17
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 |
#6 · Zasláno: 13. 9. 2016, 19:10:17
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 |
#7 · Zasláno: 13. 9. 2016, 19:51:58
Díky Tomáši!
|
||
|
Časová prodleva: 8 let
|
|||
0