block menu v xhtml - poradna.net

problem: zmena pozadia bunky pri mouse over

mam problem s nadefinovanim menu v css tak aby sa to spravne zobrazovalo:

.menu { background-color: #C9DBFC; border-color:#0A3EA4; border-width:1px; border-style:solid }
.menu a{ background-color: #C9DBFC; border-color:#0A3EA4; border-width:0px; border-style:solid }
.menu a:hover{ background-color: #000000; display:block;}

v html mi to cez tabulky pri pevne nadefinovanom width bunky samozrejme nerobilo blbosti ale teraz ked je to vsetko cez css tak pri mouse over to skoci pod tu bunku a blika to jak salene, najskor som si myslel ze je to kvoli tomu ze mam v lavej casti bunky obrazok ale dal som ho het a aj tak to zle zobrazovalo.. ako teda nadefinovat zobrazovanie bloku v css v takomto pripade aby to zobrazilo spravne v danej bunke menu

Předmět	Autor	Datum
Skús nastaviť "display: block" pre ".menu a". los 12.02.2006 22:20	los	12.02.2006 22:20
tak to mi z pekneho menu v jednom riadku: item1 item2 item3 item4 spravi: item1 item2 item3 item4… drevokocur 12.02.2006 22:26	drevokocur	12.02.2006 22:26
Tak prečo dávaš "display: block" na "a:hover"? Určite nemeň spôsob zobrazenia až na hover - buď zobr… los 12.02.2006 22:31	los	12.02.2006 22:31
ten float zabera len na jeden ten prvy objekt ktory je uz aj tak nalavo... nj asi sa na to vyserem a… drevokocur 12.02.2006 22:34	drevokocur	12.02.2006 22:34
Dej to float: left všem items a nastav také margin, aby to nebylo u sebe. Pokud je chceš vodorovně v… Kráťa 12.02.2006 22:51	Kráťa	12.02.2006 22:51
Moje řešení pomocí nečíslovaného seznamu CSS #menu { float: left; width: 120px; margin:0; padding:… Georgij Gadjukin 13.02.2006 11:03	Georgij Gadjukin	13.02.2006 11:03
hotova reseni: listamatic poslední Lukáš Mach 15.02.2006 02:00	Lukáš Mach	15.02.2006 02:00

Skús nastaviť "display: block" pre ".menu a".

tak to mi z pekneho menu v jednom riadku:
item1 item2 item3 item4

spravi:

item1
item2
item3
item4

a uplne rozhodi celu vysku vsetko... ked to dam len na ten a:hover tak to zobrazi (pri mouse over) takto:

item1====================================
item2 item3 item4

(to "rovna sa" znazornuje ten block a prechadza aj cez ten item samozrejme)

Tak prečo dávaš "display: block" na "a:hover"? Určite nemeň spôsob zobrazenia až na hover - buď zobrazuj element stále ako blokový alebo stále ako inline.

Asi Ti pomôže "float: left".

ten float zabera len na jeden ten prvy objekt ktory je uz aj tak nalavo... nj asi sa na to vyserem a spravim to cez tabulky napevno lebo uz ma to j**e, do p**e matere

Dej to float: left všem items a nastav také margin, aby to nebylo u sebe. Pokud je chceš vodorovně vedle sebe, také by možná šlo <span>items</span> (nezkoušel jsem).

Moje řešení pomocí nečíslovaného seznamu

CSS

#menu 
{ 
float: left; 
width: 120px; 
margin:0; 
padding:0; 
text-align: left;
border-top: 3px solid black;
} 

.menu-obsah 
{ 
 margin:0; 
padding: 0; 
} 

#menu ul {

list-style: none;
}

#menu li {


}
#menu li a, #menu li a:visited, #menu li a:link {
background: transparent url(../images/menu_1.gif) no-repeat left center;
display: block;
height: 25px;  
line-height: 25px;
min-height: 25px;
text-indent: 20px;
text-decoration: none;
font-weight: bold;
color: #033;
border-bottom: 1px solid black;
font-variant: small-caps;
}

#menu li a:hover {
background: transparent url(../images/menu_1.gif) no-repeat right center;
color: #699;
}

a k tomu (X)HTML

<div id="menu">
<div class="menu-obsah">
<ul>
  <li><a href="index.php?p=1">Item_1</a></li>
  <li><a href="index.php?p=2">Item_2</a></li>
  <li><a href="index.php?p=3">Item_3</a></li>
  .....
  <li><a href="index.php?p=n">Item_n</a></li>
</ul>
</div>
</div>

hotova reseni: listamatic

Zpět do poradny Odpovědět na původní otázku Nahoru