Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML] Problem z top menu
Forum PHP.pl > Forum > Przedszkole
mafi
Witam, mam problem z zakodowaniem top menu i chciał bym sie was zapytac czy pomoglibyscie mi badz naprowadzilibyscie mnie na jakas droge ;D

Wiec tak menu powinno wygladac tak :

http://zapodaj.net/acb3006fcd6c.png.html

Mi chodzi o zrobienie hovera tak jak na tym obrazku pomozcie smile.gif
W nagrode nie wiem co tutaj sie stawia piwo czy co ;D To postawie nawet i flaszke smile.gif
Tutaj macie 2 potrzebne obrazki wrazie jak by ktos chcial napisac i powiedziec co i jak winksmiley.jpg

Tło:

http://zapodaj.net/a7288fcf6cae.png.html

Hover:

http://zapodaj.net/675eae82d3c5.png.html
naitsabes
ale w czym masz problem

a, hover
a, active {
background:... ;
}
ciekawskiii
no przeciez w css masz hovera to dodaj obrazek czy nie wiesz jak? albo wyjasnij dokladniej o co chodzi:D
mafi
No rzeczywiscie nie napisalem wam zaduzo winksmiley.jpg

Mam taki kod html:

  1. <div id="top">
  2.  
  3. <ul>
  4. <li><a href="#" title="Strona Główna">Strona Główna</a></li>
  5. <li><a href="#" title="Strona Główna">Rejestracja</a></li>
  6. <li><a href="#" title="Strona Główna">Logowanie</a></li>
  7. <li><a href="#" title="Strona Główna">Uzytkownicy</a></li>
  8. <li><a href="#" title="Strona Główna">Forum Elite</a></li>
  9. <li><a href="#" title="Strona Główna">Szukaj</a></li>
  10. <li><a href="#" title="Strona Główna">Pomoc</a></li>
  11. <li><a href="#" title="Strona Główna">Kontakt</a></li>
  12. </ul>
  13.  
  14.  
  15. </div>


i css:
  1. ul, ul li { display: block; list-style: none; margin: 0; padding: 0;}
  2. ul li{ width: 99px; height: 31px; margin: 0 7px; top: 8px; margin: 0 25px; display: inline; position: relative;}
  3. ul a:link, ul a:visited {color: #fff; text-decoration: none; font-size: 13px; font-family: Arial;}
  4. ul a:hover {background-image: url(img/top_hover.png); width: 99px; text-align: center; position: relative; color: #fff; text-decoration: none; font-size: 13px; font-family: Arial;}


hover nie wyswietla sie tak jak powienien.
naitsabes
ty chcesz aby Ci sie wyswietlalo to, gdy najedziesz myszka czy gdy wejdziesz w to ?
mafi
gdy najade ma pod tym odsylaczem co najade pokazac sie obrazek hover ten ktory umiecilem w pierwszym poscie.
naitsabes
  1. ul a:hover,
  2. ul a:active {
  3. background-image: url(top_hover.jpg);
  4. border: none;
  5. }


zmien to na taki kod winksmiley.jpg Wyedytuj to sobie do swojego projektu
ciekawskiii
o to dodaj do a:hover adres url obrazka

masz pryklad w swoim css w #top
mafi
Nie rozumiecie mnie chyba sprubujcie zakodowac takie menu:

http://zapodaj.net/acb3006fcd6c.png.html


tutaj macie obrazki potzebne do zakodowania:

Tło:

http://zapodaj.net/a7288fcf6cae.png.html

Hover:

http://zapodaj.net/675eae82d3c5.png.html

naitsabes
pytales jak zrobic to z hoverem... podalem Ci kod, wyglad strony sobie dostosuj...
ciekawskiii
ja juz wiem o co chodzi, Ty chcesz zeby ktos Ci cale menu napisal:D

poszukaj, jest pelno gotowych rozwiazan...
mafi
kurde ... teraz jak by mi ktos takie menu napisal bylo by dobrze bo mi nie wychodzi ... a ty jak podales mi kod to ten kod nie dziala ... pozatym hover bedzie tylko do tekstu ten obrazek nie wczyta sie caly ... winksmiley.jpg rozumiesz juz?
Jesli jest ktos dobrym czlowiekiem moze napisac za piwko to menu.
naitsabes
Cytat(mafi @ 7.11.2010, 13:05:11 ) *
a ty jak podales mi kod to ten kod nie dziala ... pozatym hover bedzie tylko do tekstu ten obrazek nie wczyta sie caly ... winksmiley.jpg rozumiesz juz?


na localhoscie sprawdzalem dziala... napisalem zebys dostosowal... mozesz przeciez dac height'a i width'a prawda ? jaki problem
mafi
U mnie nie dziala tak jak powinno mam tylko hovera tam gdzie jest tekst taki malutki, mimo ze podalem rozmiary tego obrazka oto kod:

  1.  
  2. ul a:active { background-image: url(top_hover.jpg);color: #fff; width: 99px; height: 31px; border: none;}
  3. ul a:hover {background-image: url(img/top_hover.png); width: 99px; height: 31px; color: #fff; text-decoration: none; font-size: 13px; font-family: Arial;}


//Ps

No dobra powiedzmy ze mnie naprowadziles winksmiley.jpg Ale teraz mam inny problem tego tekstu nie moge sobie wycenterowac ;/
naitsabes
zrob aby table, mialo tlo, to czarne.... pozniej

tak jak wyzej napisalem daj

ul a:hover, // i tylko tyle
ul a:active { } //tutaj zdefiniuj tlo gdy naprowadzisz myszke na ten napis...
mafi
mi to tylko do tekstu dziala mozesz napisac mi na GG? to jakos moze szybciej sie dogadamy 3670989
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2024 Invision Power Services, Inc.