Forum PHP.pl > position:relative i dziwne puste pola po przesuniętym obrazku

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: position:relative i dziwne puste pola po przesuniętym obrazku

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

L_Devil

20.04.2007, 21:00:11

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

gekon

21.04.2007, 11:34:43

A nie jest prościej np. tak: http://glazar.info/mapa/ ?

L_Devil

21.04.2007, 14:57:02

Wow! Nie wiedzialem, że marginesy moga być ujemne

Wielkie dzięki za pomoc, Gekon!

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.