position:relative i dziwne puste pola po przesuniętym obrazku

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

position:relative i dziwne puste pola po przesuniętym obrazku, Testowane na FF i IE6 - efekt tem sam

L_Devil Zobacz profil	20.04.2007, 21:00:11 Post #1
Grupa: Zarejestrowani Postów: 195 Pomógł: 0 Dołączył: 13.04.2004 Skąd: Łódź Ostrzeżenie: (0%)	Witam! Pracuję właśnie nad pseudo trójwymiarową (izometryczną) wizualizacją mapy z pewnej gry komputerowej. Mapa powinna być "klikalna" i być złożona z odpowiednich obrazków sektorów. Ustawiłem więc wszystkie obrazki w jednej linii (stosując span ze stylem nowrap) i następnie, za pomocą position:relative; rozlokowałem je tak, by utworzyć moją mapę. Problem polega na tym, że pozostało miejsce wolne po tych obrazkach w ich oryginalnych miejscach położenia (tzn. mając 9 obrazków po 200px szerokości strona ma teraz 1800 px szerokości, a po przewinięciu w prawo nic nie ma). Screen, żeby było wiadomo o czym mówię: http://img255.imageshack.us/img255/9171/skrinji1.jpg i kod źródłowy: [HTML] pobierz, plaintext <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'> <html> <head> <meta content="text/html; charset=ISO-8859-2" http-equiv="content-type"> </head> <body> Proba mapy!<br /> Check! Check! Checking complete!<br /> <br /> <table height="400px" style="position:relative; top: 50px; right:100px;"><tr><td> <span style="white-space:nowrap; vertical-align:top;"> <img src="images/def1.gif" style="position:relative; bottom: 50px; left:382px; width:150px; height:125px;"> <img src="images/def2.gif" style="position:relative; left:302px; width:150px; height:125px;"> <img src="images/def3.gif" style="position:relative; top: 52px; left:221px; width:150px; height:125px;"> <img src="images/def4.gif" style="position:relative; top:2px; right:155px; width:150px; height:125px;"> <img src="images/def5.gif" style="position:relative; top:52px; right:234px; width:150px; height:125px;"> <img src="images/def6.gif" style="position:relative; top:104px; right:314px; width:150px; height:125px;"> <img src="images/def7.gif" style="position:relative; top:54px; right:686px; width:150px; height:125px;"> <img src="images/def8.gif" style="position:relative; top:102px; right:766px; width:150px; height:125px;"> <img src="images/def9.gif" style="position:relative; top:154px; right:846px; width:150px; height:125px;"> <img src="siatka.gif" usemap="#map" style="border-style:none; border-width:0px; position:relative; top:90px; right:1075px; width:290px;"> <map name="map" style="border-style:none; border-width:0px; position:relative; top:90px; right:1075px; width:290px;"> <area href="mapa.htm?go=north" style="cursor:pointer;" shape="polygon" coords="215,0,290,50,220,100,145,50"> <area href="mapa.htm?go=east" style="cursor:pointer;" shape="polygon" coords="220,100,290,150,215,210,140,155"> <area href="mapa.htm?go=south" style="cursor:pointer;" shape="polygon" coords="140,155,70,205,0,150,70,100"> <area href="mapa.htm?go=weast" style="cursor:pointer;" shape="polygon" coords="70,100,0,50,80,0,145,50"> </map> </object> </span></td></tr></table> Works ok! ;-)<br /> </body> </html> [HTML] pobierz, plaintext

Odpowiedzi (1 - 2)

gekon Zobacz profil	21.04.2007, 11:34:43 Post #2
Grupa: Zarejestrowani Postów: 614 Pomógł: 7 Dołączył: 10.11.2003 Skąd: Rzeszów/Kraków Ostrzeżenie: (0%)	A nie jest prościej np. tak: http://glazar.info/mapa/ ?

L_Devil Zobacz profil	21.04.2007, 14:57:02 Post #3
Grupa: Zarejestrowani Postów: 195 Pomógł: 0 Dołączył: 13.04.2004 Skąd: Łódź Ostrzeżenie: (0%)	Wow! Nie wiedzialem, że marginesy moga być ujemne (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) Wielkie dzięki za pomoc, Gekon!

« Następny starszy · CSS · Następny nowszy »

2 Użytkowników czyta ten temat (2 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

Aktualny czas: 18.09.2025 - 19:27

Hosting zapewnia