Zaloguj się

jjc · 30-05-2011, 18:54

Witam.

Mam duże logo (plik graficzny) znajdujące się w jednym divie oraz przyciski menu w divie nad nim.
Przyciski powinny wysuwać się spod loga (prostokąt o wklęsłych bokach) po najechaniu na nie myszką.

Problem jednak w tym że nachodzą one NA logo, a mają być pod nim.
Ustawienie z-index powoduje że chowają się pod nim jednak po wskazaniu ich nie reagują na hover (jakby były przysłonięte jakimś innym obiektem)

kod css górnego menu wygląda mniej więcej tak:

Kod:
#top_menu {

margin-top: -25px;

position: relative;

top:50px;

width: 960px;

height: 75px;

padding-left: 155px;

}

a.menu_item   {

float:left;

display: block;

width:112px; 

height: 62px;

background: url(images/image.png) no-repeat bottom;

margin-right:10px;

}

a.menu_item:hover {

background: url(images/menu_aktualnosci.png) no-repeat 0 0px !important;

}

hieroshima · 30-05-2011, 19:12

pokaż kod html, mam nadzieje, że menu zbudowane masz na listach...

jjc · 30-05-2011, 19:25

(30-05-2011, 19:12)hieroshima napisał(a): pokaż kod html, mam nadzieje, że menu zbudowane masz na listach...

kod jest prosty do bolu, są to hiperłącza w divie:
czy przebudowa na listę naprawdę jest niezbędna?
i czy to załatwi problem zakrywania się elementów?

Kod:
<div id="top_menu">

<a href="#" class="menu_item"></a>

<a href="#" class="menu_item"></a>

<a href="#" class="menu_item"></a>

<a href="#" class="menu_item"></a>

<a href="#" class="menu_item"></a>

</div>

      <div id="header">

<img src="/images/biglogo.png" alt="map"  />

      </div>

hieroshima · 30-05-2011, 19:34

tak jest konieczne i załatwi problem. Dasz elementom li blokową strukturę (tak na wszelki wypadek bo w zasadzie ul jest blokowa), później ustawisz ich wysokość konkretną i ew. szerokość a na końcu dodasz pozycjonowanie relatywne i z-index mniejszy niż logo.

jjc · (Ten post był ostatnio modyfikowany: 30-05-2011, 20:03 przez jjc.)

czy mam się pozbyć tego diva ogarniającego (już teraz) listę?
ponieważ po przeróbce efekt jest dokładnie ten sam (a elementy menu nie wchodzą pod logo dopóki nie dostaną z-index z wartością ujemną)

HTML:

Kod:
<div id="top_menu">

<ul>

<li class="menu_item"><a href="#" class="menu_item"></a></li>

<li class="menu_item"><a href="#" class="menu_item"></a></li>

<li class="menu_item"><a href="#" class="menu_item"></a></li>

<li class="menu_item"><a href="#" class="menu_item"></a></li>

<li class="menu_item"><a href="#" class="menu_item"></a></li>

</ul>

</div>

      <div id="header">

<img src="/images/biglogo.png" alt="map"  />     

      </div>

CSS:

Kod:
#top_menu {

position: relative;

top:50px;

width: 960px;

height: 75px;

padding-left: 155px;

z-index:0;

}

li.menu_item  {

z-index:0;

}

li.menu_item  a  {

float:left;

display: block;

width:112px; 

height: 62px;

background: url(images/menu.png) no-repeat bottom;

margin-right:10px;

}

li.menu_item a:hover {

background: url(images/menu_aktualnosci.png) no-repeat 0 0px !important;

text-decoration: none;

}

#header {

z-index: 666;

}

hieroshima · 30-05-2011, 20:07

nie nie wywalaj moze sie przydac
taka powinna byc struktura:

<div id="top_menu">
<ul>
<li><a href="#">Link </a></li>
<li><a href="#">Link </a></li>
<li><a href="#">Link </a></li>
<li><a href="#">Link </a></li>
</ul>
</div>

css:
#top_menu ul {display: block; list-style-type: none;}
#top_menu ul li { height: 50px; width 200px; position: relative; float: left; z-index: 3}
#header {position: relative; z-index: 1}

Powinno zadziałac

Pedro84 · 30-05-2011, 20:11

Po co ten div?

hieroshima · (Ten post był ostatnio modyfikowany: 30-05-2011, 20:26 przez hieroshima.)

jakby chciał mieć kilka list to najlepiej zamykać je w osobnych divach, ale w tym konkretnym przypadku nie jest potrzebny do niczego Wink

tu masz działa na 100% bo sam to właśnie sprawdziłem:

css:

Kod:
#top_menu {margin-top: -30px;}

#top_menu ul {display: block; list-style-type: none;}

#top_menu ul li{ height: 30px; width: 60px; position: relative; float: left; z-index: 3; margin-left: 15px; background: red;}

#header {position: relative; z-index: 4}

#top_menu ul li:hover { padding-top: 40px}

html

Kod:
<body>

<div id="header">

<img src="images.jpg" alt="map"  />

</div>

<div id="top_menu">

<ul>

<li><a href="#">Link </a></li>

<li><a href="#">Link </a></li>

<li><a href="#">Link </a></li>

<li><a href="#">Link </a></li>

</ul>

</div>

</body>

Pedro84 · 30-05-2011, 22:07

Dalej nie rozumiem w jaki sposób kilka list wymusza/ułatwia stosowanie divów Wink

hieroshima · 30-05-2011, 23:28

a co za dużo pamięci Ci zżera jeden div więcej ?

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie