Poziome menu obrazkowe (css+xhtml)


(Luty Piotr) #1

Witam.

Od 2 tygodni ucze sie xhtml i css.

Utknalem przy poziomym menu obrazkowym. O ile jakos poradzilbym sobie przy menu nie obrazkowym albo gdyby byly te same obrazki ale tutaj kazdy odnosnik ma inny obrazek.

Problem polega na tym ze obrazkowy odnosnik z menu mi sie w ogole nie wyswietla.

xhtml

[/code] css
[code] * { margin: 0px; padding: 0px; } #menu { width: 989px; height: 36px; border: 0px; float: left; } #menu ul { overflow: auto; margin: 0; padding: 0; width: 989px; } #menu ul, ul li { display: block; } #menu ul li { float: left; border: 0px; } #menu ul a:link, ul a:visited { display: block; } .1 { background-image: url("images/1_03.gif"); width: 73; height: 36; } .2 { background-image: url("images/1_04.gif"); width: 89px; height: 36px; } .3 { background-image: url("images/1_05.gif"); width: 83px; height: 36px; } .4 { background-image: url("images/1_06.gif"); width: 72px; height: 36px; } .5 { background-image: url("images/1_07.gif"); width: 99px; height: 36px; } .6 { background-image: url("images/1_08.gif"); width: 78px; height: 36px; } .7 { background-image: url("images/1_09.gif"); width: 78px; height: 36px; } .8 { background-image: url("images/1_10.gif"); width: 100px; height: 36px; } .9 { background-image: url("images/1_11.gif"); width: 86px; height: 36px; } .10 { background-image: url("images/1_12.gif"); width: 231px; height: 36px; }

Tylko prosze z wyrozumialoscia. Dopiero zaczynam. Nie dawajcie linkow do kurshtml.boo.pl bo tam nie ma odpowiedzi na moje pytanie.

A wzor na zrobienie tego menu znalazlem jakis czas temu na tym forum.

Prosze o szybka odpowiedz i z gory dzieki

Pozdrawiam

Blablacz


(batmomobil) #2

Nie wyświetla się bo żle zapisujesz.Zmień plik html:

  • ffff
  • ddd
  • sss
  • eee
  • www
  • aaa
  • zzz
  • uu
  • uuu
  • yyy

[/code] i css:
[code]* { margin: 0px; padding: 0px; } #menu { width: 989px; height: 36px; border: 0px; float: left; } #menu ul { overflow: auto; margin: 0; padding: 0; width: 989px; } #menu ul, ul li { display:inline; list-style: none;padding : 5px; margin-top:30px;margin-left:7px; } #menu ul li { float: left; border: 0px; } #menu ul a:link, ul a:visited { display: block; } .obrazek1 { background :url(images/downoland.gif)no-repeat top ; width: 83; height: 36; } .obrazek2 { background :url(images/downoland.gif)no-repeat top ; width: 83; height: 36; } .obrazek3 { background :url(images/downoland.gif)no-repeat top ; width: 83; height: 36; } .obrazek4 { background :url(images/downoland.gif)no-repeat top ; width: 83; height: 36; } .obrazek5 { background :url(images/downoland.gif)no-repeat top ; width: 83; height: 36; } .obrazek6 { background :url(images/downoland.gif)no-repeat top ; width: 83; height: 36; } .obrazek7 { background :url(images/downoland.gif)no-repeat top ; width: 83; height: 36; }.obrazek8 { background :url(images/downoland.gif)no-repeat top ; width: 83; height: 36; }


(Luty Piotr) #3

piękne dzieki! Wszystko dziala jak nalezy. Nie wiem co bym bez Ciebie zrobił.

Jakbys mogł to powiedz czym sie rozni

background: url...

od

background-image: url...

Na kurshtml.edu.pl tlo obrazkowe wstawia sie w sposob background-image a te menu ktore teraz robie dzialalo tylko jako background: url.

jeszcze raz dzieki

Pozdrawiam


(-Puma-) #4

background jest zapisem uniwersalnym można zapisać np. kolor pod tłem, brak powtarzania, pozycja tła.

background-image jest do zapisu tylko tła obrazkowego.

Zapis @batmomobil jest bardziej poprawny jeśli chodzi o tło, jest bez powtórzeń itd.

Twój CSS nie działał bo class nie może być tylko liczbą :wink:

Ps. Tło (background) można rozbić na oddzielnie, tło, powtarzanie, pozycje ale background jest wygodniejszy jak dla mnie w użyciu.

http://www.kurshtml.edu.pl/css/tlo.html