Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [html] pocięty szablon
Forum PHP.pl > Forum > Przedszkole
bemol
15.09.2007, 11:22:22
Korzystam z PSa i w nim robię szablony. Wiec ostatnimi czasy robie szkolna strone teatru. Zrobiłem szablon, pociąłem i wyexportowałem do HTML'a. Wszystko jest ładnie pocięte, ale jak wiadomo PS dodaje tabelę w kodzie html. Ja chcę stronę zrobić na divach więc pozamieniałem je na divy. Tutaj pojawia się problem. Chcę, żeby szablon był wyśrodkowany, a niestety dodając arkusz stylów zmieniłem tak, że jest on stały i nie mogę go przesunąć, a to za sprawą: top: ; i left: ;. Bez nich obrazki sie rozjeżdżają :/ Jak zrobić bez nich, aby sie nie rozjeżdżały?
Tutaj kod css:
Kod
BODY { background-color: #FFF; }

#jeden {background: url('images/index_01.gif') no-repeat; position: absolute; top: 0px; left: 0px; width: 57px; height: 115px;}
#dwa {background: url('images/index_02.gif') no-repeat; position: absolute; top: 0px; left: 57px; width: 143px; height: 115px;}
#trzy {background: url('images/index_03.gif') no-repeat; position: absolute; top: 0px; left: 200px; width: 140px; height: 115px;}
#cztery {background: url('images/index_04.gif') no-repeat; position: absolute; top: 0px; left: 340px; width: 144px; height: 115px;}
#piec {background: url('images/index_05.gif') no-repeat; position: absolute; top: 0px; left: 484px; width: 100px; height: 115px;}
#szesc {background: url('images/index_06.gif') no-repeat; position: absolute; top: 0px; left: 584px; width: 56px; height: 115px;}
#siedem {background: url('images/index_07.gif') no-repeat; position: absolute; top: 115px; left: 0px; width: 57px; height: 34px;}
#osiem {background: url('images/index_08.gif') no-repeat; position: absolute; top: 115px; left: 57px; width: 143px; height: 34px;}
#dziewiec {background: url('images/index_09.gif') no-repeat; position: absolute; top: 115px; left: 200px; width: 140px; height: 34px;}
#dziesiec {background: url('images/index_10.gif') no-repeat; position: absolute; top: 115px; left: 340px; width: 144px; height: 34px;}
#jedenascie {background: url('images/index_11.gif') no-repeat; position: absolute; top: 115px; left: 484px; width: 100px; height: 34px;}
#dwanascie {background: url('images/index_12.gif') no-repeat; position: absolute; top: 115px; left: 584px; width: 56px; height: 34px;}
#trzynascie {background: url('images/index_13.gif') no-repeat; position: absolute; top: 149px; left: 0px; width: 57px; height: 31px;}
#czternascie {background: url('images/index_14.gif') no-repeat; position: absolute; top: 149px; left: 57px; width: 143px; height: 31px;}
#pietnascie {background: url('images/index_15.gif') no-repeat; position: absolute; top: 149px; left: 200px; width: 140px; height: 31px;}
#szesnascie {background: url('images/index_16.gif') no-repeat; position: absolute; top: 149px; left: 340px; width: 144px; height: 31px;}
#siedemnascie {background: url('images/index_17.gif') no-repeat; position: absolute; top: 149px; left: 484px; width: 100px; height: 31px;}
#osiemnascie {background: url('images/index_18.gif') no-repeat; position: absolute; top: 149px; left: 584px; width: 56px; height: 31px;}
#dwadziescia {background: url('images/index_20.gif') no-repeat; position: absolute; top: 180px; left: 57px; width: 143px; height: 354px;}
#dwadziesciajeden {background: url('images/index_21.gif') no-repeat; position: absolute; top: 180px; left: 200px; width: 140px; height: 354px;}
#dwadziesciadwa {background: url('images/index_22.gif') no-repeat; position: absolute; top: 180px; left: 340px; width: 144px; height: 354px;}
#dwadziesciatrzy {background: url('images/index_23.gif') no-repeat; position: absolute; top: 180px; left: 484px; width: 100px; height: 354px;}
#dwadziesciaszesc {background: url('images/index_26.gif') no-repeat; position: absolute; top: 534px; left: 57px; width: 143px; height: 27px;}
#dwadziesciasiedem {background: url('images/index_27.gif') no-repeat; position: absolute; top: 534px; left: 200px; width: 140px; height: 27px;}
#dwadziesciaosiem {background: url('images/index_28.gif') no-repeat; position: absolute; top: 534px; left: 340px; width: 144px; height: 27px;}
#dwadziesciadziewiec {background: url('images/index_29.gif') no-repeat; position: absolute; top: 534px; left: 484px; width: 100px; height: 27px;}


a tutaj kod html
[HTML] pobierz, plaintext 
  1. <body>
  2. <div id="jeden"></div>
  3. <div id="dwa"></div>
  4. <div id="trzy"></div>
  5. <div id="cztery"></div>
  6. <div id="piec"></div>
  7. <div id="szesc"></div>
  8. <div id="siedem"></div>
  9. <div id="osiem"></div>
  10. <div id="dziewiec"></div>
  11. <div id="dziesiec"></div>
  12. <div id="jedenascie"></div>
  13. <div id="dwanascie"></div>
  14. <div id="trzynascie"></div>
  15. <div id="czternascie"></div>
  16. <div id="pietnascie"></div>
  17. <div id="szesnascie"></div>
  18. <div id="siedemnascie"></div>
  19. <div id="osiemnascie"></div>
  20. <div id="dwadziescia"></div>
  21. <div id="dwadziesciajeden"></div>
  22. <div id="dwadziesciadwa"></div>
  23. <div id="dwadziesciatrzy"></div>
  24. <div id="dwadziesciaszesc"></div>
  25. <div id="dwadziesciasiedem"></div>
  26. <div id="dwadziesciaosiem"></div>
  27. <div id="dwadziesciadziewiec"></div>
  28. </div>
  29. </body>
[HTML] pobierz, plaintext
TNT
15.09.2007, 17:07:12
Spróbuj coś takiego:
Kod
#main {
margin-left: auto;
margin-right: auto;
width: 500px;
}

[HTML] pobierz, plaintext 
  1. <div id="main">
  2.    <div id="jeden"></div>
  3.    <div id="dwa"></div>
  4.    <!-- i tak dalej -->
  5. </div>
[HTML] pobierz, plaintext

Żeby to działało, musisz ustawić pozycję inną niż absolute i trochę przerobić kod. Albo wstawiaj do #main tylko obrazki, a gdzie pole tekstowe tam użyj następnego diva.
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.