system
(system)
18 Kwiecień 2006 09:50
#1
Może by tak tutorial w webmastering? :mrgreen:
Pokażę Wam jak zrobić bardzo fajne menu za pomocą CSS.
Na początek robimy liste w html:
To jest nasze menu.
Oczywiście bez styli wyglada źle
Teraz robimy style.
body { /* nasza cała strona */ background-color: #FFFFFF ; } /* kolor strony */ #menu { /* nasz div “menu” */ border: 1px solid #D3D3D3 ; /* obramowanie naszego menu */ background: #FFFFFF ; /* tło naszego menu */ width: 142px; /* szerkość menu */ padding: 3px; } /* odległość menu od obramowania*/ ul { /* element ul */ margin: 0; /* odległość menu od obramowania*/ padding: 0; } /* odległość menu od obramowania*/ #menu a { /* linki w menu */ font-family: Verdana, Sans-serif; /* krój czcionki */ font-size: 10px; /* wielkość czcionki */ display: block; /* rodzaj wyświetlenia elementów */ width: 130px; /* szerokość */ padding: 3px; /* odległości linków */ color: #3B3B3B ; /* kolor linków */ margin-top: 1px; /* 1px odstępu od góry */ text-decoration: none; /* dekoracja tekstu */ border-left: 6px solid #CCCCCC ; } /* lewe obramowanie; #CCCCCC - kolor zwykłego prostokąta */ #menu a:hover { /* najechane linki w menu */ font-family: Verdana, Sans-serif; /* krój czcionki */ font-size: 10px; /* wielkość czcionki */ display: block; /* rodzaj wyświetlenia elementów */ width: 130px; /* szerokość */ background-color:#F0F0F0 ; /* tło linka najechanego */ text-decoration: none; /* dekoracja tekstu */ color: #3B3B3B ; /* kolor tekstu */ border-left: 6px solid #9CD3D3 ; } /* lewe najechane obramowanie; #9CD3D3 - kolor najechanego prostokąta*/ #menu li { /* element li */ list-style-type: none; } /* rodzaj wykazu */
Trochę tego jest… ale efekt tego mi się bardzo podoba :mrgreen:
są to komentarze w css, które nie spowodują błędów.
Wynik: http://cyg.ovh.org/tutoriale/css_menu.htm
* Niestety w IE nie podświetla się prostokąt… // poprawione
Być może jest gdzieś błąd, to postaram się go poprawić.
SER
(SER)
18 Kwiecień 2006 12:05
#4
Witam
Dopiero zaczynam się uczyć webmasteringu, a bardzo zaciekawił mnie ten tutorial
Jednak mam pewien problem :
Teraz robimy style. Cytat: body { /* nasz cała strona */ background-color: #FFFFFF ; /* kolor strony */ font-family: Verdana, Sans-serif; /* krój czcionki */ font-size: 10px; } /* wielkość czcionki */ #menu { /* nasz div “menu” */ border: 1px solid #D3D3D3 ; /* obrazmowanie naszego menu */ background: #FFFFFF ; /* tło naszego menu */ width: 142px; /* szerkość menu */ padding: 3px; } /* odległość menu od obrazmowania*/ ul { /* element ul */ margin: 0; /* odległość menu od obrazmowania*/ padding: 0; } /* odległość menu od obrazmowania*/ #menu a { /* linki w menu */ display: block; /* rodzaj wyświetlenia elementów */ width: 130px; /* szerokość */ padding: 3px; /* odległości linków */ color: #3B3B3B ; /* kolor linków */ margin-bottom: 1px; /* 1px odstępu od dołu */ text-decoration: none; } /* dekoracja linka */ #menu a:hover { /* najechane linki w menu */ display: block; /* rodzaj wyświetlenia elementów */ width: 130px; /* szerokość */ background-color:#F0F0F0 ; /* tło linka */ text-decoration: none; /* dekoracja tekstu */ color: #3B3B3B ; } /* kolor linka najechanego */ #menu li { /* element li */ border-left: 6px solid #CCCCCC ; /* lewe obramowanie */ list-style-type: none; } /* rodzaj wykazu */ #menu li:hover { /* najechany element li */ border-left: 6px solid #9CD3D3 ; /* lewe obramowanie */ list-style-type: none; } /* rodzaj wykazu */
Dotarłem do tego momentu i nie wiem, co robić dalej
Za pomoc będę wdzięczny
SER
(SER)
18 Kwiecień 2006 12:26
#6
Dzięki, działa
Błąd polegał na tym, że w dokumencie HTML nie wpisałem linijki :
Ale dopisałem i wszystko pięknie wygląda
Bardzo fajny tutorialek. Na pewno dużo osób z niego skorzysta
adam9870
(adam9870)
18 Kwiecień 2006 18:42
#7
tutaj ma byc logo
tutaj ma byc menu gorne
tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc tutaj ma byc tresc
Copyright © 2005-2006 by Adam. All rights reserved.
system
(system)
18 Kwiecień 2006 19:44
#8
Nie mam zielonego pojęcia jak Ty chcesz to zrobić… :mrgreen:
Zobacz: http://cyg.ovh.org/poza-planem/
albo może ja już dzisiaj mam dość i nie wiem o co chodzi :]
adam9870
(adam9870)
19 Kwiecień 2006 12:13
#9
Eighth
(Lstanczak)
20 Kwiecień 2006 14:29
#10
Witam
Wszystko fajnie i ładnie tylko znowu jak zwykle w MSIE 6.x wygląda inaczej niestety. Nie miało by to jeszcze takiego znaczenia gdyby nie to że menu zmienia wielkość podczas wybierania przycisków.
Pozdrawiam.
system
(system)
20 Kwiecień 2006 15:15
#11
Tak to już jest w IE… :?
Ale znalazłem błąd.
W: #menu a, zamiast
margin-bottom: 1px;
powinno być
margin-top: 1px;
Raczej teraz powinno działać. A co do tego błędu, że w IE nie podświetlają się prostokąty, zdajde mi się, że jestem bliski naprawienia tego :lol:
Plutek
(Plutex)
21 Kwiecień 2006 11:53
#12
a jak zrobić żeby ten prostokąt świecił sie po najechaniu na inny kolor??
system
(system)
21 Kwiecień 2006 12:41
#13
No tak, troche dziurawy tutorial zrobiłem Ale to w końcu mój pierwszy.
Musisz zmienić #9CD3D3 w #menu li:hover
Zolek
(Szymcia 94)
22 Kwiecień 2006 15:18
#14
Dzieki te menu jest fajne thx
system
(system)
22 Kwiecień 2006 17:39
#15
Cygan , doskonała robota :mrgreen:
widziałem wiele razy, jak taki efekt był robiony za pomocą grafik, nie przyspieszało to ładowania strony…
system
(system)
29 Kwiecień 2006 12:00
#16
Ehhh… miałem trochę czasu, to napisałem poprawkę i zrobiłem, aby prostokąty podświetlały się pod IE… może komuś się przyda…
FilipS
(Filipsko)
12 Lipiec 2006 10:34
#17
Cygan, jak poprawiłeś to aby działało w IE? Bo ja mma problem z elementem DIV w menu. W IE się nie podświetla http://www.filips.ovh.org/dp/ mógłbyś wskazać błąd? Byłbym wdzięczny :]
system
(system)
12 Lipiec 2006 10:53
#18
Zrób menu na listach ul, li i umieść to wszystko w jednym divie, a nie tak, że każdy link w divie o clasie “menu”.
Potem zrobisz tak jak na moim przykładzie:
i #menu a:hover będzie działać.
Teraz jakoś nie mam głowy, aby to na tacy Ci podać, ale jeszcze spróbuje…
Ogólnie, problem z podświetlaniem jest taki, że element (div, li - czyli w Twoim przypadku menu:hover odpada) w IE się nie podświetli, więc musisz zrobić to poprzez: a:hover
spookypld
(Bartlomiejmalysz)
18 Marzec 2008 16:35
#19
Witam.
Chciałem podziękować za ciekawy pomysł. Na pewno zmodyfikowany będzie często gościł na moich www.
Przez przypadek odkryłem ciekawą rzecz. Mianowicie nie wpisałem background-color w stylu #menu i stało się coś o czym nie miałem pojęcia. Menu stało się przeźroczyste!
pavobe
(Pavobe Reg)
18 Marzec 2008 17:47
#20
Ostatnio prostota jest w cenie, bardzo przyjemne menu. Prosimy więcej ;).