Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Jak wykonać takie menu poziome
Forum PHP.pl > Forum > Przedszkole
ciapus4
Witam, jak zrobić takie menu jak na tej stronie http://leaksource.info/, prosił bym o przykład kodu css i html.

Pozdrawiam
muumiin
w html piszesz menu za pomocą listy nieuporządkowanej

  1. <ul>
  2. <li><a href="linkdostrony1.html">Jedna podstrona</a></li>
  3. <li><a href="linkdostrony2.html"> druga podstrona</a></li>
  4. itd....
  5. </ul>


potem w css musisz sformatować ul. żeby wyświetlało w jednej linii, usunąć kropki... Te kreski na górze i na dole to nic innego jak obramowanie....
Zobacz tutaj wiecej informacji:
http://www.kurshtml.edu.pl/css/poziome_menu,menu.html

Jak chcesz, żeby ci podświetlało element, nad którym jest myszka, to w css piszesz ul a:hover i opisujesz to, co się ma zmienić po najechaniu myszką (tło, kolor tekstu)

Powodzenia!
ciapus4
Dziękuje za szybką reakcje, a mogę poprosić o napisanie przykładowego kodu dla jednego przycisku w http://jsbin.com/ worriedsmiley.gif
fate
http://jsbin.com/wiqogufizulu/1/edit

Chłopie:
Źródło strony
Firebug
Przekleiłem Ci, musisz to uporzadkować wywalić nadmiary
kornmorgue
Tu masz przykład

http://jsbin.com/voceciguseto/3/edit
ciapus4
Dziękuję specool.gif .

Cytat


Jaką nazwę poeinien mieć plik. css "menu.css"
kornmorgue
Nazwa stylu nie ma znaczenia. Standardowa to style.css

W przykładzie dodałem <div class="menu"> ale nie ma on w tym przypadku żadnego zastosowania, a tym bardziej jeśli chodzi o nazwę stylu.
ciapus4
restauracja

jeszcze jedno jak wycentrować to menu, gdzie w kodzie bo kombinuje i d....pa, i jak zmienić odległości między nazwami. ?
Terrorizer
Marginesy i padding można ustawić. Wtedy to się jakoś poukłada.
ciapus4
Witam, gdzie znajdę parametr w kodzie, który odpowiada za położenie "kreski" nad menu to jest chyba
'border-top', czyli ta nad menu ?, i jak rozdzielić kreskę, bo u mnie jest po całości, a w przykładzie są odstępy, po między każdym zagadnieniu menu ?

pozdrawiam
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.