| Autor | Zpráva | ||
|---|---|---|---|
| Huppicek Profil |
Zdravím, potřeboval bych pomoct. Problém je v tom, že menu se odsazuje od levé strany o pár pixelů. Menu se odsazuje, až při hoveru
CSS #menu
{
width: 1040px;
margin-left: -10px;
background-color: #4c4c4c;
}
.left-corner,
.right-corner {
display:block;
width: 0px;
height: 0px;
border-style: solid;
position: relative;
float: left;
opacity: 0.58;
filter:alpha(opacity=58);
}
.left-corner {
border-color: transparent #888 transparent transparent;
border-width: 0 9px 9px 0;
float: left;
left: 1px;
}
.right-corner {
border-color: #888 transparent transparent transparent;
border-width: 9px 9px 0 0;
float: right;
right: 1px;
}
#menu ul li
{
display: inline-block;
}
#menu ul li a
{
border-right:1px solid #666;
padding: 16px 30px 16px 30px;
line-height: 50px ;
font-size: 15px;
text-decoration: none;
color: white ;
}
#menu ul li a:hover
{
background-color: #707070;
} |
||
| Tomáš123 Profil |
#2 · Zasláno: 9. 7. 2014, 18:04:18
Huppicek:
Nevidím v tvojom CSS problém... Skús do selektoru #menu ul li a:hover pridať vlastnosti padding: 0; a margin: 0;. Ak to nepomôže, vlep svoj HTML a CSS kód sem (kod.djpw.cz).
|
||
| jenikkozak Profil |
#3 · Zasláno: 9. 7. 2014, 18:11:16
Prosím o odkaz na živou ukázku.
|
||
| Huppicek Profil |
#4 · Zasláno: 11. 7. 2014, 10:37:24
|
||
| lionel messi Profil |
Huppicek:
Nevidím tam žiadny tebou popísaný problém (v najnovšom FireFoxe) a to ani pri hoveri ktorejkoľvek položky, nie je to skôr problém prehliadača? |
||
| Huppicek Profil |
#6 · Zasláno: 11. 7. 2014, 11:05:23
lionel messi:
V IE a Chromu, to prostě při hoveru odsazuje tlačítko menu od levé strany o 4px |
||
| Bubák Profil |
#7 · Zasláno: 11. 7. 2014, 12:24:17
Huppicek:
Mám tušení, že ve skutečnosti jde o zviditelnění mezery mezi inline-block položkami menu a ke zviditelnění mezery dojde kvůli nastavení barvy pozadí odkazu. |
||
| CZghost Profil |
Huppicek:
Podle toho, co píše Bubák, bych zkusil položkám menu nastavit výchozí blokový stav a float. Následně bych hned za menu clearoval. Tady je řešení bez zanesení kódu čističem: menu {
zoom: 1; /* Zapnutí hasLayoutu pro prohlížeče IE 8 a starší */
}
menu:after {
content: "*"; /* Pseudoelement musí mít nějaký obsah pro clearování */
height: 0; /* Vynulování výšky */
visibility: hidden; /* Zneviditelnění obsahu */
clear: both; /* Nejdůležitější, samotné clearování */
}
menu li {
display: block; /* Blokový prvek, standardní nastavení, nemusí zde být */
float: left; /* Položky menu jsou plovoucí, tudíž budou hezky za sebou a nenechají žádnou mezeru */
} |
||
| Bubák Profil |
#9 · Zasláno: 11. 7. 2014, 15:24:45
CZghost:
„display: block; /* Blokový prvek, standardní nastavení, nemusí zde být */“ Upřesním, LI je list-item, což je vlastně blok s odrážkou. Pokud má LI v CSS deklarovaný jiný display, než list-item, odrážky zmizí. Jako vhodnější pro odstranšní odrážek považuji deklaraci list-style: none; případně ukecanější list-style-type: none; pro menu/seznam nebo položky menu.
|
||
| CZghost Profil |
#10 · Zasláno: 11. 7. 2014, 15:44:01
Bubák:
No vidíš, na to jsem zapomněl :-) Dobrý postřeh :-) |
||
| Huppicek Profil |
#11 · Zasláno: 11. 7. 2014, 19:44:55 · Upravil/a: Huppicek
CZghost:
Ikdyž jsem to předělal, tak problém stále stejný :( Ten float to opraví, ale potom se mi rozhází ty cornery. A chci se zeptat na ten clear, moc to nechápu. Jestli by mi to mohl někdo vysvětlit. Děkuji |
||
| Tomáš123 Profil |
#12 · Zasláno: 11. 7. 2014, 21:07:09
Huppicek:
Keď nejakému prvku nastavíš float, snaží sa doplávať čo najďalej doprava alebo doľava (to asi vieš), ale zároveň sa prvok vyjme z toku dokumentu, takže nadradený element sa správa, akoby v ňom nič nebolo. Využitie vlastnosti clear môžeš spozorovať vtedy, keď máš jeden obaľovací div (aby si to správne videl, nastav mu nejaké pozadie), v ktorom máš 2 ďalšie, plávajúce, prvky. Ak nepoužiješ clear, pozadie neuvidíš, ak ho použiješ, pozadie uvidíš. Prečo? Clear je niečo ako neviditeľná bariéra (spravidla sa radí za plávajúce prvky), ktorá nadradenému elementu dá vedieť, že v ňom niečo je.
Malá ukážka: Bez použitia vlastnosti clear
S použitím vlastnosti clear
|
||
| Huppicek Profil |
#13 · Zasláno: 11. 7. 2014, 21:37:57
Děkuji chápu, moc pěkný návod :)
|
||
|
Časová prodleva: 1 měsíc
|
|||
| Huppicek Profil |
#14 · Zasláno: 16. 8. 2014, 11:38:08
Už to mám celé hotové, ale to menu mě pořád zlobí. Když tam nedám ty cornery, tak se menu pěkně zarovná doleva, ale když je tam dám, tak menu nedojede až úplně doleva a zarazí se :[. Viz ukázka:
http://kod.djpw.cz/wyeb |
||
| Tomáš123 Profil |
Huppicek:
Celému menu nastav position: relative; (týmto deklaruješ počiatok súradnicového systému pre vnorené prvky s absolútnym poziciovaním)...Vo vlastnostiach pre div.left-corner nahraď vlastnosť float: left vlastnosťou position:absolute a pridaj hodnoty top: xxpx; a left: xxpx... To isté urob aj na pravej strane s tým rozdielom, že odsadenie bude deklarovať sprava.
Obtekaním ( float) ti to nefungovalo preto, lebo prvá položka menu obtekala div.left-corner. Správne nastavenie clear-u by to možno vyriešilo (v tvojom prípade bolo potrebné obidva div-y (left-corner a right-corner) vypísať až za div-om navigácie (ukážka - nechcelo sa mi to presne poziciovať (určitú rolu v zlej pozícii trojuholníkov hraje aj tvoje marginom posunuté menu))), ale v tomto prípade sa mi absolútne poziciovanie javí ako lepšie riešenie.
|
||
|
Časová prodleva: 10 let
|
|||
0