+- 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ł: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: budowa menu (/thread-budowa-menu)
budowa menu - czacha777 - 21-05-2012
Witam próbuje stworzyć menu pod stronę ale napotkałem problem, mianowicie mam dwa rodzaje przycisków jeden jest normalnie widoczny na stronie a drugi ma się zmienić po najechaniu kursorem na owy przycisk. Próbuje rozwiązać to w następujący sposób ale zbytnio nie chce zadzałać.
Kod:
#namenu{
width: 100%;
height: 40px;
display: block;
border: 1px splid;
position: absolute;
border:1px solid #ff1470; z-index: 315;
}
#przycisk1{
left:0px;
}
#przycisk2{
left:200px;
}
#przycisk3{
left:400px;
}
#przycisk4{
left:600px;
}
#przycisk10{
left:0px;
}
#przycisk20{
left:200px;
}
#przycisk30{
left:400px;
}
#przycisk40{
left:600px;
}
#namenu .overek{
display: none;
}
#namenu a:visited a:hover .overek{
display: block; float: left;
}
xHTML
<div id="namenu">
<a href=""><img alt="przycisk1 (6K)" src="grafika/przycisk1.gif" height="40" width="200" id="przycisk1"/>
<img alt="przycisk1czer (5K)" src="grafika/przycisk1czer.gif" height="40" width="200"id="przycisk10" class="overek" /></a>
<a href=""><img alt="przycisk2 (6K)" src="grafika/przycisk2.gif" height="40" width="200"id="przycisk2" />
<img alt="przycisk2czer (4K)" src="grafika/przycisk2czer.gif" height="40" width="200"id="przycisk20" class="overek"/></a>
<a href=""><img alt="przycisk3 (6K)" src="grafika/przycisk3.gif" height="40" width="200"id="przycisk3" />
<img alt="przycisk3czerw (4K)" src="grafika/przycisk3czerw.gif" height="40" width="200"id="przycisk30" class="overek"/></a>
<a href=""><img alt="przycisk4 (6K)" src="grafika/przycisk4.gif" height="40" width="200"id="przycisk4" />
<img alt="przycisk4czer (2K)" src="grafika/przycisk4czer.gif" height="40" width="200"id="przycisk40" class="overek"/></a>
</div>RE: budowa menu - Pedro84 - 21-05-2012
Tak się tego nie robi...
Zainteresuj się pseudoklasą :hover
RE: budowa menu - czacha777 - 21-05-2012
(21-05-2012, 05:40)Pedro84 napisał(a): Tak się tego nie robi...A mógłbyś mnie naprowadzić na jakieś gotowe rozwiązanie (przykład) bym mógł go przeanalizować i skopiować , z góry dzięki za pomoc.
Zainteresuj się pseudoklasą :hover
RE: budowa menu - Pedro84 - 21-05-2012
http://www.w3schools.com/cssref/sel_hover.asp
W Google od cholery przykładów.
RE: budowa menu - czacha777 - 23-05-2012
WItam jeśli mogę jeszcze trochę pozawracać głowę to chciałbym zwrócić uwagę że podjęte prze zemnie próby nie poskutkowały, a chciałem to rozwiązać tak:
Kod:
.a:hover
{
background-image: url(grafika/przycisk1czer.gif); jako klasę chciałem podpiąć każdą grafikę z osobna pod zdjęcie
lub do przycisku #przycisk2{
left:200px;
{
a:hover background-image: url(grafika/przycisk1czer.gif);
}
}Jeśli nie robi się tego w podobny sposób jak pierwszy i dwa pozostałe to jak proszę o odpowiedz.
RE: budowa menu - nst - 23-05-2012
Kod:
}
.button a {
background-image: url(img/tlo1.png);
list-style-type: none;
float: left;
}
.button a:hover {
background-image: url(img/tlo2.png);
list-style-type: none;
float: left;
}Tu masz z wykorzystaniem 2 osobnych plików tła, musisz jeszcze ustawić powtarzanie itp ale lepiej jest to robić na 1 pliku. Poczytaj o CSS sprite.