Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP]Jak wycentrować mapkę google ?
Forum PHP.pl > Forum > Przedszkole
ciapus4
Witam jak wycentrowac mapkę na tej podstronie są tam div-y

Odwiedź moją stronę
Damonsson
Ciekawy kod haha.gif

Wywal to z tego kontenera który ma width: 300px i wpakuj do innego, któremu nadasz clear: both; i większą szerokość, plus odpowiednie marginesy od boków diva w którym się znajduje, żeby było na środku, albo maxymalną szerokość i text-align: center.
ciapus4
Damonsson, a możesz mnie nakierować i podać przykład, lub konkretny kod ? closedeyes.gif
Damonsson
Nakierowałem Cię na tyle, na ile się dało w tym kodzie. Gdybyś miał to napisane porządnie byłoby o wiele łatwiej, pozostaje czekać na odważnego któremu się bardzo nudzi, bądź przejść do działu giełda wink.gif
ciapus4
A, nie można jakoś zakączyć tą tabele i wycentrować mapkę ?
d3ut3r
Kod lekka masakra, skoro mapę masz w prawej kolumnie to nie da się tego wycentrować, musisz wyrzucić mapę pod te 2 divy które tworzą kolumny. Prosty przykład:

http://jsfiddle.net/4KECL/1/
Shido
Teraz (po względnym uporządkowaniu ) masz:
  1. <div id="content">
  2.  
  3. <h1>Kontakt</h1>
  4.  
  5. <div class="kontakt">
  6. <div style="width: 300px; float: left;">
  7. <br />
  8. <strong>Obiady domowe - łódź :</strong><br />
  9. <br />
  10. <div style="width: 240px; text-align: right">
  11.  
  12. ul. Kasprzaka 3 (ul. Legionów 103)<br /><br /> +48 42 634 35 54 <br /> +48 42 612 22 22 <br />
  13. <span style="font-size: 11px; color: #555555;"><br style="font-size: 4px; color: #555555;" />lokal otwarty:<br /> pon.-pt. 11-18, sob. 11-17 <br /> niedziela 11-15:45 <br /></span>
  14. </div>
  15. <br />
  16. <br />
  17. <br />
  18.        <strong>email</strong>: <a href="mailto:restauracjemaciek@interia.pl" class="mail">restauracjemaciek@interia.pl</a><br />
  19. </div>
  20.  
  21. <div style="width: 300px; float: left; text-align: right;">
  22. <br />
  23.  
  24. <strong> Catering, obiady domowe dowozimy</strong>:<br />
  25. <br />
  26. poniedziałek - piątek  <br />
  27. w godzinach 12:00 - 18:00  <br />
  28. sobota 12:00 - 17:00  <br />
  29.  
  30. <br />
  31. <strong>Koszt dostawy:</strong> 5 zł.<br />
  32. <strong>Opakowanie:</strong> 1 zł. <br />
  33. <br/>
  34.  
  35. zamówienie na kwotę powyżej 50 zł dostawa <strong>gratis</strong>
  36.  
  37. <br />
  38. <br />
  39.  
  40. <br />
  41. <strong>Informacja i catering przyjmuje</strong>:<br />
  42. <div style="width: 300px; text-align: right">
  43. <br />
  44. Jolanta Nawrocka <br />
  45. tel.: +48 666 600 012 <br />
  46. </div>
  47.  
  48. <div id="map">
  49. <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.pl/maps?f=q&source=s_q&hl=pl&geocode=&q=%C5%82%C3%B3d%C5%BA+legion%C3%B3w+103&aq=&sll=51.618545,19.367121&sspn=1.770135,5.410767&ie=UTF8&hq=&hnear=Legion%C3%B3w+103,+90-764+%C5%81%C3%B3d%C5%BA,+%C5%82%C3%B3dzkie&t=m&z=14&iwloc=A&output=embed"></iframe>
  50. </div>
  51. </div>
  52. </div>


Całość rozchodzi się o to byś to (linijka 48-50)
  1. <div id="map">
  2. <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.pl/maps?f=q&source=s_q&hl=pl&geocode=&q=%C5%82%C3%B3d%C5%BA+legion%C3%B3w+103&aq=&sll=51.618545,19.367121&sspn=1.770135,5.410767&ie=UTF8&hq=&hnear=Legion%C3%B3w+103,+90-764+%C5%81%C3%B3d%C5%BA,+%C5%82%C3%B3dzkie&t=m&z=14&iwloc=A&output=embed"></iframe>
  3. </div>

Przeniósł za następne zamknięcie </div> (czyli na linijkę między 51 a 52)

Po pierwsze kod, który ci dał, jest schematem, a wklejanie go jest do niczego.
Po drugie, wklejasz nie tam gdzie trzeba, ja i d3ut3r staramy ci się to pokazać, ale ty nadal uparcie wklejasz w to samo miejsce.
Po trzecie, odsapnij chwile i pomyśl.
Edit: Po czwarte, jak już piszesz tu posta, to nie kasuj go za chwilę...
ciapus4
Ok, już skumałem, wstydnis.gif , poprawiłem, jeszcze jedno pytanie jaki parametr zmienić, aby mapka podciągnąć do góry ?
Shido
Usunąć pozostałości kodu:
  1. <div id="container">
  2. <div id="left-column"></div>
  3. <div id="right-column"></div>
  4. <div style="clear:both"></div>
  5. </div>
ciapus4
Dzięki wszystkim, za pomoc.

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