Autor Zpráva
šulo
Profil *
Zdravím,

mám problém s menu, konkrétne ide o hover:

Takto by to malo vyzerať:


ale vyzerá to takto:


Tu je kód HTML:
<div id="menu">
  
  <div id="lava"></div>
  
  <div id="stred">
  
  <ul class="zoznam">
  <li><a href="#">home</a></li>
  <li><a href="#">about us</a></li>
  <li><a href="#">solutions</a></li>
  <li><a href="#">partners</a></li>
  <li><a href="#">consulting</a></li>
  <li><a href="#">contact us</a></li>
  </ul>
  
  </div>
  
  <div id="prava"></div>
  
  </div>


CSS:
#menu {
       height:47px;
       float:left;
       margin-top:5px;
       width:100%;
       }
       
#lava {
       background:url("nav-box-left.gif") no-repeat;
       width:11px;
       height:47px;
       float:left;
       }
       
#stred {
        background:url("nav-box-bg.gif") repeat-x;
        height:47px;
        float:left;
        }
        
#prava {
        background:url("nav-box-right.gif") no-repeat;
        height:47px;
        width:22px;
        }
        
.zoznam  {
            margin-top:15px;
            list-style-type:none;
            margin-left:-75px;
            margin-right:5px;
            display:block;
            }
        
.zoznam li {
            float:left;
            margin-left:100px;
            display:block;
            }

#menu a {
              color:#ffffff;
              text-decoration:none;
              font-size:11px;
              text-transform:uppercase;
              font-weight:bold;
              display:block;
              }
              
#menu a:hover {
                 background:url("nav-act.gif") left top repeat-x;
                 display:block;
                 height:47px;
                 }


nevie niekto, ako to spraviť aby to vyzeralo ako na tom prvom obrázku?

Dakujem
panther
Profil
šulo:
odkaz by byl lepší než tuna kódu, který v takovém množství působí nepřehledně.

Vidím, že položky jsou stejně velké, nastav jim tedy rozměr a odkazům uvnitř display: block;
šulo
Profil *
panther:
mám to uložené v PC

rozmer aj display:block som nastavil, ale nepomohlo to
Bubák
Profil
Abych řekl pravdu, kód tvého menu je zmatený a nechápu, jestli se pokoušíš o menu se stejně širokými položkami, nebo se má šířka položek měnit podle délky textu.

Zkus se inspirovat tímto: http://teststranek.kvalitne.cz/menu7.1/
Pokud ti to nepomůže, dej odkaz na živou ukázku.
šulo
Profil *
Bubák:
pokúšam sa o menu s rovnako širokými položkami

tu je odkaz: http://testujemsvojestranky.xf.cz/
Bubák
Profil
Do příkladů použijte interní styl
Kouknu na to, ale zbytečně zdržuješ.
Davex
Profil
U "zoznam" si nehraj s marginem a radějí použij padding u odkazu.
Bubák
Profil
Davex:
radějí použij padding u odkazu.
Já dávám přednost kombinaci height a line-geight.
Krom toho nevidím u položek deklarovat šířku, takže položky nemohou být stejně široké. Nechce to úpravy CSS, ale pro menu napsat komplet nové CSS.
šulo
Profil *
Bubák:
ok, vďaka, idem to skúsiť..

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: