Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Wyświetlenie zdjęcia z kilku zdjęć
Forum PHP.pl > Forum > Przedszkole
marcus753
12.04.2010, 18:03:36
Witam

zrobiłem sobie taką mapke ->> http://www.marcus.osa.pl/strona_kamery/

składa się ze zdjęcia mapy i 6 zdjęć strzałek zrobiłem je przez pozycjonowanie absolutne jednak chciałbym wyrównać do środka strony i tu jest problem ehh
nie za bardzo wiem jak można to w prosty sposób zrobić...

Pozdrawiam mam nadzieje że pomożecie
krzysztof_kf
12.04.2010, 18:37:42 
[CSS] pobierz, plaintext 
  1. <html><head>
  2. <meta http-equiv="content-type" content="text/html; charset=ISO-8859-2"></head><body>
  3. </head>
  4. <body>
  5. <style>
  6. #top {
  7. text-align: center;
  8.  
  9. </style>
  10.  
  11. <div id="top">
  12. <img
  13.  src="strona_kamery_pliki/mapa2.png">
  14. <img style="position: absolute; top: 50px; left: 335px;"
  15. src="strona_kamery_pliki/strzalka11.png">
  16. <img style="position: absolute; top: 30px; left: 346px;"
  17. src="strona_kamery_pliki/strzalka21.png">
  18. <img style="position: absolute; top: 178px; left: 588px;"
  19. src="strona_kamery_pliki/strzalka31.png">
  20. <img style="position: absolute; top: 153px; left: 610px;"
  21. src="strona_kamery_pliki/strzalka41.png">
  22. <img style="position: absolute; top: 464px; left: 805px;"
  23. src="strona_kamery_pliki/strzalka51.png">
  24. <img style="position: absolute; top: 449px; left: 830px;"
  25. src="strona_kamery_pliki/strzalka61.png"><div></body></html>
[CSS] pobierz, plaintext
marcus753
12.04.2010, 19:06:04
chciałbym żeby to było takie proste...

poprawiony twój kod:

[HTML] pobierz, plaintext 
  1. <html><head>
  2. <meta http-equiv="content-type" content="text/html; charset=ISO-8859-2"></head><body>
  3. <style>
  4. #top {
  5. text-align: center;
  6. }
  7. </style>
  8.  
  9. </head>
  10. <body>
  11.  
  12.  
  13. <div id="top">
  14. <img src="mapa2.png">
  15. <img style="position: absolute; top: 50px; left: 335px;"src="strzalka11.png">
  16. <img style="position: absolute; top: 30px; left: 346px;"src="strzalka21.png">
  17. <img style="position: absolute; top: 178px; left: 588px;"src="strzalka31.png">
  18. <img style="position: absolute; top: 153px; left: 610px;"src="strzalka41.png">
  19. <img style="position: absolute; top: 464px; left: 805px;"src="strzalka51.png">
  20. <img style="position: absolute; top: 449px; left: 830px;"src="strzalka61.png">
  21.  
  22. </div></body></html>
[HTML] pobierz, plaintext


i stronka z tym kodem: http://www.marcus.osa.pl/strona_kamery/index2.html

spróbuj zmienić wielkość okna wszystko się rozjedzona ;/

a ja nie chce dzielić zdjęcia na kwadraty i wsadzać go w tabelki tym bardziej ze było by to dość bezsensowne ;(

no nic czekam na kolejne sugestie, krzysiek dzięki za odpowiedź !
mortus
12.04.2010, 19:54:38
Tak:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5.         <title>Mapa</title>
  6. 		<style type="text/css">
  7. 			body {
  8. 				text-align: center;
  9. 			}
  10. 			#map {
  11. 				margin: 0 auto;
  12. 				width: 800px;
  13. 				height: 573px;
  14. 				text-align: left;
  15. 				position: relative;
  16. 			}
  17. 		</style>
  18.     </head>
  19.     <body>
  20.     	<div id="map">
  21. 	        <img src="mapa2.png">
  22. 			<img style="position: absolute; top: 42px; left: 94px" src="strzalka11.png">
  23. 			<img style="position: absolute; top: 22px; left: 107px" src="strzalka21.png">
  24. 			<img style="position: absolute; top: 170px; left: 348px" src="strzalka31.png">
  25. 			<img style="position: absolute; top: 145px; left: 369px" src="strzalka41.png">
  26. 			<img style="position: absolute; top: 456px; left: 563px" src="strzalka51.png">
  27. 			<img style="position: absolute; top: 441px; left: 592px" src="strzalka61.png">
  28. 		</div>
  29.     </body>
  30. </html>
[HTML] pobierz, plaintext
I słowo wyjaśnienia. Element div#map ma szerokość (width) równą szerokości zdjęcia całej mapy i odpowiednio równą wysokość (height). Ponieważ poszczególne strzałki są pozycjonowane absolutnie względem tego div-a (pozwala na to atrybut position: relative; stylu elementu div#map) należało odjąć od każdego left i top 8px (domyślny margines body). Ważne jest używanie właściwej deklaracji typu dokumentu <!DOCTYPE ... >. Chyba tyle. Nie wiem, jak to działa pod IE6.
zegarek84
12.04.2010, 21:03:27
jest na to wiele sposobów - można np. jeszcze tak winksmiley.jpg :
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5.         <title>Mapa</title>
  6. 		<style type="text/css">
  7. 			body {
  8. 				text-align: center;
  9. 			}
  10. 			#map {
  11. 				padding:0px;
  12. 				margin-left:50%;
  13. 				position: relative;
  14. 				width: 800px;
  15. 				height: 573px;
  16. 			}
  17. #map img {margin-left:-50%}
  18. 		</style>
  19.     </head>
  20.     <body>
  21. 	test1 | test2 | test3 | test4 <hr>
  22.     	<div id="map">
  23. 	        <img src="mapa2.png" style="position: absolute">
  24. 			<img style="position: absolute; top: 42px; left: 94px" src="strzalka11.png">
  25. 			<img style="position: absolute; top: 22px; left: 107px" src="strzalka21.png">
  26. 			<img style="position: absolute; top: 170px; left: 348px" src="strzalka31.png">
  27. 			<img style="position: absolute; top: 145px; left: 369px" src="strzalka41.png">
  28. 			<img style="position: absolute; top: 456px; left: 563px" src="strzalka51.png">
  29. 			<img style="position: absolute; top: 441px; left: 592px" src="strzalka61.png">
  30. 		</div>
  31.     </body>
  32. </html>
[HTML] pobierz, plaintext
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.