Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS]Wyświetlenie zdjęcia z kilku zdjęć
marcus753
post 12.04.2010, 18:03:36
Post #1





Grupa: Zarejestrowani
Postów: 281
Pomógł: 3
Dołączył: 8.06.2009
Skąd: Kraków

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

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


--------------------
Cokolwiek zostanie upuszczone na uklad elektroniczny, spadnie zawsze tam gdzie wyrzadzi najwiecej szkody.
Go to the top of the page
+Quote Post
krzysztof_kf
post 12.04.2010, 18:37:42
Post #2





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

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

[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
Go to the top of the page
+Quote Post
marcus753
post 12.04.2010, 19:06:04
Post #3





Grupa: Zarejestrowani
Postów: 281
Pomógł: 3
Dołączył: 8.06.2009
Skąd: Kraków

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

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ź !


--------------------
Cokolwiek zostanie upuszczone na uklad elektroniczny, spadnie zawsze tam gdzie wyrzadzi najwiecej szkody.
Go to the top of the page
+Quote Post
mortus
post 12.04.2010, 19:54:38
Post #4





Grupa: Zarejestrowani
Postów: 2 178
Pomógł: 596
Dołączył: 25.09.2009
Skąd: Piwniczna-Zdrój

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

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.
Go to the top of the page
+Quote Post
zegarek84
post 12.04.2010, 21:03:27
Post #5





Grupa: Zarejestrowani
Postów: 1 332
Pomógł: 294
Dołączył: 12.10.2008
Skąd: Olkusz

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

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


--------------------
Jeśli twoja ręka rusza do przodu powstrzymaj swój gniew; gdy wyprzedza cię twój gniew - wycofaj rękę.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · 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: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

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

RSS Wersja Lo-Fi Aktualny czas: 15.06.2025 - 10:51
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn