Menu w CSS - zmiana tła przy najechaniu (a:hover)

Dla specjalistów Webmastering
#1

top.gif

Strona główna

Moje prace

Oferta

O mnie

Kontakt

Linki

Lorem ipsum dolor sit

amet, consectetuer adipiscing elit. Ut vitae diam. Integer porta justo ut

velit. Donec eu velit lobortis purus luctus pretium. Sed vitae mi. Curabitur

lorem. Mauris et leo dictum lectus faucibus sagittis. Nam augue lacus,

vulputate id, varius eget, sagittis quis, urna. Pellentesque mauris erat,

tincidunt vel, pretium in, pretium eget, quam. Aliquam in magna. Aenean quam

felis, pretium ac, sagittis ut, facilisis at, arcu. In id odio. Class aptent

taciti sociosqu ad litora torquent per conubia nostra, per inceptos

hymenaeos. Ut et orci id enim ultricies rhoncus. Proin in lorem id odio

vehicula cursus. Vestibulum velit lectus, pharetra nec, dignissim ut,

laoreet ac, urna.

Lorem ipsum dolor sit

amet, consectetuer adipiscing elit. Ut vitae diam. Integer porta justo ut

velit. Donec eu velit lobortis purus luctus pretium. Sed vitae mi. Curabitur

lorem. Mauris et leo dictum lectus faucibus sagittis. Nam augue lacus,

vulputate id, varius eget, sagittis quis, urna. Pellentesque mauris erat,

tincidunt vel, pretium in, pretium eget, quam. Aliquam in magna. Aenean quam

felis, pretium ac, sagittis ut, facilisis at, arcu. In id odio. Class aptent

taciti sociosqu ad litora torquent per conubia nostra, per inceptos

hymenaeos. Ut et orci id enim ultricies rhoncus. Proin in lorem id odio

vehicula cursus. Vestibulum velit lectus, pharetra nec, dignissim ut,

laoreet ac, urna.

Lorem ipsum dolor sit

amet, consectetuer adipiscing elit. Ut vitae diam. Integer porta justo ut

velit. Donec eu velit lobortis purus luctus pretium. Sed vitae mi. Curabitur

lorem. Mauris et leo dictum lectus faucibus sagittis. Nam augue lacus,

vulputate id, varius eget, sagittis quis, urna. Pellentesque mauris erat,

tincidunt vel, pretium in, pretium eget, quam. Aliquam in magna. Aenean quam

felis, pretium ac, sagittis ut, facilisis at, arcu. In id odio. Class aptent

taciti sociosqu ad litora torquent per conubia nostra, per inceptos

hymenaeos. Ut et orci id enim ultricies rhoncus. Proin in lorem id odio

vehicula cursus. Vestibulum velit lectus, pharetra nec, dignissim ut,

laoreet ac, urna.

Lorem ipsum dolor sit

amet, consectetuer adipiscing elit. Ut vitae diam. Integer porta justo ut

velit. Donec eu velit lobortis purus luctus pretium. Sed vitae mi. Curabitur

lorem. Mauris et leo dictum lectus faucibus sagittis. Nam augue lacus,

vulputate id, varius eget, sagittis quis, urna. Pellentesque mauris erat,

tincidunt vel, pretium in, pretium eget, quam. Aliquam in magna. Aenean quam

felis, pretium ac, sagittis ut, facilisis at, arcu. In id odio. Class aptent

taciti sociosqu ad litora torquent per conubia nostra, per inceptos

hymenaeos. Ut et orci id enim ultricies rhoncus. Proin in lorem id odio

vehicula cursus. Vestibulum velit lectus, pharetra nec, dignissim ut,

laoreet ac, urna.

© 2007 Morgen

#2 
a:hover {text-decoration: none; color: #6699FF; background-color:#tu_kolor;}

O to Ci chodzi? bo nie bardzo rozumiem;/

#3

Tak, ale niestety tło (chodzi mi o tło, nie kolor) pokazuje się tylko na wysokość i szerokość napisu.

Chciałbym, żeby to było 180 x 30 px (tyle ile ma menu).

#4

Polecam ten artykuł http://cpw.net.pl/css.php?p=artykul&id=263

#5

Jest już trochę lepiej, ale niestety tylko trochę…

Linki się podświetlają, ale niestety gdy dam padding-top by wyrównać - poszerza się również komórka.

:arrow: http://www.morgen.yoyo.pl/

#6

Pokaż fragment pliku CSS odpowiedzialny za te linki w menu.

#7
#8

Masz niepotrzebnie tyle kodu na menu i na dodatek trochę to niedobrze jest, lekko to odchudziłem, ale można więcej :

html :

| Strona główna |
| Moje prace |
| Oferta |
| O mnie |
| Kontakt |
| Linki |

[/code] css :

[code]body { margin: 0pt; padding: 0pt; background: rgb(51, 153, 204) none repeat; text-align: center; } table.menu a { padding: 5px; display: block; text-decoration: none; background-image: url(‘menulink.gif’);} table.menu a:hover { background-image: url(‘linkhover.gif’); background-repeat: no-repeat; display: block; } .srodek { padding: 8px; background: rgb(255, 255, 255) none repeat; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 12px; text-align: justify; color: rgb(51, 51, 51); } .stopka { height: 22px; background-image: url(‘stopka.gif’); background-repeat: no-repeat; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; color: rgb(221, 221, 221); text-align: right; padding-top: 4px; padding-right: 6px; } a:link { text-decoration: none; color: rgb(0, 0, 0); } a:visited { text-decoration: none; color: rgb(0, 0, 0); } a:hover { text-decoration: none; color: rgb(102, 153, 255); } .stopkalink:link { text-decoration: none; color: rgb(221, 221, 221); } .stopkalink:visited { text-decoration: none; color: rgb(221, 221, 221); } .stopkalink:hover { text-decoration: none; color: rgb(255, 255, 255); }

daje cały css bo trochę zmieniłem go.

#9

OK.

Jest dobrze, tylko mam kilka drobnych problemów.

a) W IE nie pokazuje się cały obrazek tła. Brakuje przerywanej linii na dole. Pod Firefoxem jest wszystko ok, więc nie chcę dawać border-bottom.

b) W IE display: block działa tylko na pierwszy link - Strona główna.

Pozostałe mają mniejszy obszar do klikania (tylko na napis).

#10

Faktycznie, nie sprawdzałem w ie. Daj dla ie dodatkowo w table.menu a :

width: 100%; height: 20px;

height: 20px; + padding: 5px; = razem 30px; czyli tyle ile ma obrazek w tle.

#11

Dzięki.

Dodałem jeszcze text-align: justify i padding-left: 30 i wszystko jest ok.

Chcę teraz wyróżnić to menu (pogrubić czcionkę / zwiększyć ją).

Dałem Verdana, 12 px i pogrbione, ale to średnio wygląda… pokombinuję.

Jeszcze jedno pytanko.

Czemu podałeś kolory w ten sposób?

#12

Kopiowałem stronę rozszerzeniem z firefox i pewnie sam zapisuje kolory w rgb , osobiście to stosuje kolory w hex.

Sorki za zamieszanie, kolorki można stosować tak i tak :oops:

#13

OK, pozmieniałem sobie i tak.

Dzięki jeszcze raz.

P.S. Widzę, że masz podobną stronę (a raczej działy) do moich :wink:

Pozdrawiam

#14

Witam wszystkich! !!

Mam problem z moją pierwszą stroną internetową.

Chciałbym by linki po najechaniu na nie się podświetlały.

Ponieważ to jest moja pierwsza strona internetowa mało używałem css ale chciałbym by ten kod do podświetlania linków znalazł się własnie w nim.

to jest właśnie ten mój kod css

html, body

	{

	background-image: url(tlo.jpg);

	background-repeat:repeat-x;

	margin:0 auto;

	padding:0;

       	}

a

	{

	text-decoration:none;

	}

Czy któryś z was mógłby mi w tym jakoś pomóc???

Z góry dziękuje :slight_smile:

Bartolomeo96

#15

  1. Nie podczepiaj sie pod inny temat.

  2. Google odpowiedź znają

  3. a:hover