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
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
Prosím o odkaz na živou ukázku.
Huppicek
Profil
jenikkozak:

Zde je živá ukázka:

http://kod.djpw.cz/nkeb
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
lionel messi:

V IE a Chromu, to prostě při hoveru odsazuje tlačítko menu od levé strany o 4px
Bubák
Profil
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
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
Bubák:
No vidíš, na to jsem zapomněl :-) Dobrý postřeh :-)
Huppicek
Profil
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
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
Děkuji chápu, moc pěkný návod :)
Huppicek
Profil
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.

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: