+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: [css] navigacja, nachodzące warstwy (/thread-css-navigacja-nachodzace-warstwy)
Strony:
1
2
[css] navigacja, nachodzące warstwy - jjc - 30-05-2011
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;
}RE: [css] navigacja, nachodzące warstwy - hieroshima - 30-05-2011
pokaż kod html, mam nadzieje, że menu zbudowane masz na listach...
RE: [css] navigacja, nachodzące warstwy - jjc - 30-05-2011
(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>RE: [css] navigacja, nachodzące warstwy - hieroshima - 30-05-2011
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.
RE: [css] navigacja, nachodzące warstwy - jjc - 30-05-2011
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;
}RE: [css] navigacja, nachodzące warstwy - hieroshima - 30-05-2011
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
RE: [css] navigacja, nachodzące warstwy - Pedro84 - 30-05-2011
Po co ten div?
RE: [css] navigacja, nachodzące warstwy - hieroshima - 30-05-2011
jakby chciał mieć kilka list to najlepiej zamykać je w osobnych divach, ale w tym konkretnym przypadku nie jest potrzebny do niczego
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>RE: [css] navigacja, nachodzące warstwy - Pedro84 - 30-05-2011
Dalej nie rozumiem w jaki sposób kilka list wymusza/ułatwia stosowanie divów
RE: [css] navigacja, nachodzące warstwy - hieroshima - 30-05-2011
a co za dużo pamięci Ci zżera jeden div więcej ?