Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Menu z Grafiki
Forum PHP.pl > Forum > Przedszkole
Marecki669
Witam ma problem otóż nie wiem jak się zabrać za robienie menu takiego ja zdjęcie poniżej:

http://imageshack.us/photo/my-images/707/menuirc.jpg/

Proszę o pomoc, z góry dzięki
amii
Najłatwiej i najlepiej takie coś zrobić techniką kafelkowania tzw. spriting. Choć to jeszcze zależy czy chesz wprowadzać dynamiczne zmiany wyglądu po najechaniu kursorem czy klinkięciu. W najprostszej formie :
- na grafice wyliczasz sobie szerokości dla każdego elementu menu
- w css tworzysz kontener wyglądający np. tak
Sztuczka z text-indent jest zrobiona pod to żeby Google widział tekst, który nromalnie możesz umieścić w linkach - dobre pod pozycjonowanie
  1. .tabs {
  2. background: url('../images/bookmark.png') repeat-x;
  3. height: 58px;
  4. width: 716px;
  5. margin: 5px 0 0 0;
  6. }
  7.  
  8. .nb ul{height: 100%; float: left; width: 100%;}
  9. .nb ul li{display: inline; float: left;}
  10. .nb ul li a{height: 31px; display: inline; float: left; text-indent: -2000em;}


- w css ustawisz szerokość taką jaką ma grafika i left czyli przesunięciu wobec elementu sąsiadującego po lewej (jest to jego szerokość)
  1. #menu-m1{left:0; width: 135px;}
  2. #menu-m2{left: 135px; width: 161px;}
  3. #menu-m3{left: 296px; width: 147px;}
  4. #menu-m4{left: 443px; width: 116px;}
  5. #menu-m5{left: 559px; width: 125px;}
  6. #menu-m6{left: 684px; width: 128px;}
  7. #menu-m7{left: 812px; width: 162px;}


Struktura przykładowego menu:
  1. <div class="tabs">
  2. <ul class="navigation">
  3. <li class="active">
  4. <a id="menu-m1" title="Strona główna" class="menu_start" href="#tab-1">Strona główna</a>
  5. </li>
  6. <li>
  7. <a id="menu-m2" title="Najbliższe terminy" class="menu_start" href="#tab-2">Najbliższe terminy</a>
  8. </li>
  9. <li>
  10. <a id="menu-m3" title="O nas" class="menu_start" href="#tab-3">O nas</a>
  11. </li>
  12. <li>
  13. <a id="menu-m4" title="Kontakt" class="menu_start" href="#tab-4">Kontakt</a>
  14. </li>
  15. <li>
  16. <a id="menu-m5" title="Kariera" class="menu_start" href="#tab-5">Kariera</a>
  17. </li>
  18.  
  19. </ul>
  20.  
  21.  
  22. </div>
Marecki669
O dzięki wielkie smile.gif
amii
BTW: z tą sztuczką to różnie może być bo Google może to uznać za ukryty text. Jak dla mnie jednak to jest to po prostu informacja dla wyszukiwarki, która nie potrafi czytać grafiki ale Google różne ma humory, także jeśli stosujesz taki trik na stronie firmowej to może skonsultuj dla pewności ze specem od pozycjonowania
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-2025 Invision Power Services, Inc.