[html] pocięty szablon Opcje

[bemol]

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 
<body>
<div id="jeden"></div>
<div id="dwa"></div>
<div id="trzy"></div>
<div id="cztery"></div>
<div id="piec"></div>
<div id="szesc"></div>
<div id="siedem"></div>
<div id="osiem"></div>
<div id="dziewiec"></div>
<div id="dziesiec"></div>
<div id="jedenascie"></div>
<div id="dwanascie"></div>
<div id="trzynascie"></div>
<div id="czternascie"></div>
<div id="pietnascie"></div>
<div id="szesnascie"></div>
<div id="siedemnascie"></div>
<div id="osiemnascie"></div>
<div id="dwadziescia"></div>
<div id="dwadziesciajeden"></div>
<div id="dwadziesciadwa"></div>
<div id="dwadziesciatrzy"></div>
<div id="dwadziesciaszesc"></div>
<div id="dwadziesciasiedem"></div>
<div id="dwadziesciaosiem"></div>
<div id="dwadziesciadziewiec"></div>
</div>
</body>
[HTML] pobierz, plaintext 

Ten post edytował bemol 15.09.2007, 11:25:36

[TNT]

Spróbuj coś takiego:

Kod

#main {
margin-left: auto;
margin-right: auto;
width: 500px;
}

[HTML] pobierz, plaintext 
<div id="main">
   <div id="jeden"></div>
   <div id="dwa"></div>
   <!-- i tak dalej -->
</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.

Ten post edytował TNT 15.09.2007, 17:09:11