Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> wyswietlanie menu
zuraw84
post
Post #1





Grupa: Zarejestrowani
Postów: 42
Pomógł: 0
Dołączył: 9.02.2005

Ostrzeżenie: (0%)
-----

witam,
chcialem sie Was zapytac o jedna rzecz, jak robicie takie elementy na stronach w standardzie XHTML 1.1
jest to zwykle menu, mam 2 div-y, lewy .... pliki jpg z menu, jeden pod drugim, a po prawej jakies tlo,
pliki po lewej po zlozeniu ma taka sama wysokosc jak czesc prawa

podglad tu: przyklad1

to jest w XHTML 1.1, a wyglad .... na kazdej przegladarce inaczej ;]
( FF 1.5.0.7; IE 6.0.2; OPERA 9.0; MOZILLA 1.7.12; NETSCAPE 8.1)

jesli teraz zminie standard na XHTML 1.0 przyklad2

to wszystko wyglada OK na kazdej przegladarce z.w/w

probowalem tez usuwac wszystkie biale znaki miedzy znacznikami img: przyklad3

teoretycznie mozna by probowac kazdy z plikow (img) cofac przy uzyciu np. margin-top: -3px;
ale po pierwsze: to robota glupiego ;], a poza tym jak na kazdej przegladarce wyglada to inaczej .... to chyba nic by z tego nie wyszlo

czekam na jakies sugestie....

edit: przerzucilem przyklady na inny serwer bo sie tam w ramkach wyswietlaly

Ten post edytował zuraw84 4.10.2006, 09:59:02
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 7)
babejsza
post
Post #2





Grupa: Zarejestrowani
Postów: 407
Pomógł: 1
Dołączył: 4.03.2003
Skąd: warszawa

Ostrzeżenie: (0%)
-----

Zdecydowanie źle podchodzisz do menu. Do jego tworzenie powinieneś użyć listy. Np. tak:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html lang="pl">
  3.  
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>aaaa</title>
  7. <style type="text/css">
  8. ul {margin: 0; padding: 0; list-style-type: none; width: 191px; background: #FFF url(6.jpg) top right no-repeat; height: 194px}
  9. li {margin: 0; padding: 0; height: 23px}
  10. img {margin: 0; padding: 0; border: 0 solid #FFF}
  11.  
  12. #top {background: #FFF url(4.jpg) top left no-repeat; width: 191px; height: 28px }
  13. #bottom {background: #FFF url(5.jpg) top left no-repeat; width: 191px; height: 11px}
  14.  
  15. </style>
  16. </head>
  17.  
  18. <body>
  19.  
  20. <div id="top"></div>
  21. <ul>
  22. 	<li><a href="#"><img src="a1.jpg" alt="" /></a></li>
  23. 	<li><a href="#"><img src="a2.jpg" alt="" /></a></li>
  24. 	<li><a href="#"><img src="a3.jpg" alt="" /></a></li>
  25. 	<li><a href="#"><img src="a4.jpg" alt="" /></a></li>
  26. 	<li><a href="#"><img src="a5.jpg" alt="" /></a></li>
  27. 	<li><a href="#"><img src="a6.jpg" alt="" /></a></li>
  28. 	<li><a href="#"><img src="a7.jpg" alt="" /></a></li>
  29. </ul>
  30. <div id="bottom"></div>
  31.  
  32. </body>
  33.  
  34. </html>
[HTML] pobierz, plaintext


Tylko do tego musisz inaczej pociąć grafikę. I każdy obrazek z menu powinien być tej samej wysokości.

Ten post edytował babejsza 5.10.2006, 10:03:09
Go to the top of the page
+Quote Post
gekon
post
Post #3





Grupa: Zarejestrowani
Postów: 614
Pomógł: 7
Dołączył: 10.11.2003
Skąd: Rzeszów/Kraków

Ostrzeżenie: (0%)
-----

Zła deklaracja DOCTYPE. Zaglądnij do Kursu BrowseHappy. Jeżeli nie wiesz czym jest XHTML nie używaj go, zwykły HTML z powodzeniem może go zastąpić.

Ten post edytował gekon 4.10.2006, 19:44:47


--------------------
Pokaż kod = Pokaż CAŁY kod, najlepiej działający na jakimś serwerze.
Fanatycy | glazar.info | semantyka | HTML i XHTML FAQ
Go to the top of the page
+Quote Post
babejsza
post
Post #4





Grupa: Zarejestrowani
Postów: 407
Pomógł: 1
Dołączył: 4.03.2003
Skąd: warszawa

Ostrzeżenie: (0%)
-----

Bez przesady. Czym jest XHTML doskonale wiem. W deklarację po prostu wkradł się błąd, który już poprawiam. A czy wystarczy zwykły HTML? Oczywiście, ale XHTML też.
Go to the top of the page
+Quote Post
zuraw84
post
Post #5





Grupa: Zarejestrowani
Postów: 42
Pomógł: 0
Dołączył: 9.02.2005

Ostrzeżenie: (0%)
-----

oki, dzieki, zapoznam sie z tym kursem w sobote .... jak dalej bede mial pytania to sie odezwe
Go to the top of the page
+Quote Post
mls
post
Post #6





Grupa: Zarejestrowani
Postów: 677
Pomógł: 89
Dołączył: 31.08.2003
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

Cytat(babejsza @ 4.10.2006, 13:54:53 ) *
Zdecydowanie źle podchodzisz do menu. Do jego tworzenie powinieneś użyć listy. Np. tak:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html lang="pl">
  3.  
  4. <head>[...]
[HTML] pobierz, plaintext


Tylko do tego musisz inaczej pociąć grafikę. I każdy obrazek z menu powinien być tej samej wysokości.


Dlaczego powinien użyć listy? Bo tak się przyjęło? Heh...
Poza tym jeśli się już używa listy, to jej elementy zawierają TEKST a nie grafikę. Grafikę dodaje się via CSS. I obrazki wcale nie muszą być tej samej wysokości smile.gif


--------------------


devblog
Go to the top of the page
+Quote Post
gekon
post
Post #7





Grupa: Zarejestrowani
Postów: 614
Pomógł: 7
Dołączył: 10.11.2003
Skąd: Rzeszów/Kraków

Ostrzeżenie: (0%)
-----

Dlatego powinień użyć listy, że z semantycznego punktu widzenia lista do tego właśnie służy.


--------------------
Pokaż kod = Pokaż CAŁY kod, najlepiej działający na jakimś serwerze.
Fanatycy | glazar.info | semantyka | HTML i XHTML FAQ
Go to the top of the page
+Quote Post
babejsza
post
Post #8





Grupa: Zarejestrowani
Postów: 407
Pomógł: 1
Dołączył: 4.03.2003
Skąd: warszawa

Ostrzeżenie: (0%)
-----

a taki problem zrobić np tak:

[HTML] pobierz, plaintext 
  1. <li><a href="#"><img src="a2.jpg" alt="" /><span>Link 2</span></a></li>
[HTML] pobierz, plaintext


i w css:

[HTML] pobierz, plaintext 
  1. span {display: none}
[HTML] pobierz, plaintext


I masz wszystko jak należy.

Ew. dla każdej pozycji menu stworzyć klase w css, obługującą tło dla każdego elementu <li>.

Ten post edytował babejsza 8.10.2006, 12:32:34
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 19.08.2025 - 18:06
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn