Forum PHP.pl > wyswietlanie menu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki

zuraw84

4.10.2006, 09:15:05

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

babejsza

4.10.2006, 12:54:53

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

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="pl">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>aaaa</title>
<style type="text/css">
ul {margin: 0; padding: 0; list-style-type: none; width: 191px; background: #FFF url(6.jpg) top right no-repeat; height: 194px}
li {margin: 0; padding: 0; height: 23px}
img {margin: 0; padding: 0; border: 0 solid #FFF}
 
#top {background: #FFF url(4.jpg) top left no-repeat; width: 191px; height: 28px }
#bottom {background: #FFF url(5.jpg) top left no-repeat; width: 191px; height: 11px}
 
</style>
</head>
 
<body>
 
<div id="top"></div>
<ul>
	<li><a href="#"><img src="a1.jpg" alt="" /></a></li>
	<li><a href="#"><img src="a2.jpg" alt="" /></a></li>
	<li><a href="#"><img src="a3.jpg" alt="" /></a></li>
	<li><a href="#"><img src="a4.jpg" alt="" /></a></li>
	<li><a href="#"><img src="a5.jpg" alt="" /></a></li>
	<li><a href="#"><img src="a6.jpg" alt="" /></a></li>
	<li><a href="#"><img src="a7.jpg" alt="" /></a></li>
</ul>
<div id="bottom"></div>
 
</body>
 
</html>
[HTML] pobierz, plaintext

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

gekon

4.10.2006, 17:31:48

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

babejsza

5.10.2006, 10:02:00

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

zuraw84

5.10.2006, 11:14:30

oki, dzieki, zapoznam sie z tym kursem w sobote .... jak dalej bede mial pytania to sie odezwe

mls

7.10.2006, 09:02:41

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 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="pl">
 
<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

gekon

7.10.2006, 12:36:50

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

babejsza

8.10.2006, 12:20:08

a taki problem zrobić np tak:

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

i w css:

[HTML] pobierz, plaintext 
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>.

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.