Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Wyśrodkowanie strony. Zielony, nie bić!
Forum PHP.pl > Forum > Po stronie przeglądarki
trembecki
16.11.2010, 10:39:30
Witam. Właśnie tworzę swoją pierwszą stronę i przy jej tworzeniu wystąpił następujący problem:
Chciałem, aby strona wyświetlała się na środku przeglądarki *wyśrodkowanie w pionie i poziomie. Niestety nie potrafię tego dokonać. Czy mógł bym prosić o waszą pomoc?

Kod strony:
Cytat
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>pocięcie</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- ImageReady Styles (pocięcie.psd) -->
<style type="text/css">
<!--

#Tabela_01 {
position:absolute;
left:0px;
top:0px;
width:760px;
height:420px;
}

#pociecie-01_ {
position:absolute;
left:0px;
top:0px;
width:200px;
height:420px;
}

#pociecie-02_ {
position:absolute;
left:200px;
top:0px;
width:46px;
height:29px;
}

#pociecie-03_ {
position:absolute;
left:246px;
top:0px;
width:49px;
height:29px;
}

#pociecie-04_ {
position:absolute;
left:295px;
top:0px;
width:68px;
height:29px;
}

#pociecie-05_ {
position:absolute;
left:363px;
top:0px;
width:49px;
height:29px;
}

#pociecie-06_ {
position:absolute;
left:412px;
top:0px;
width:348px;
height:29px;
}

#pociecie-07_ {
position:absolute;
left:200px;
top:29px;
width:560px;
height:145px;
}

#pociecie-08_ {
position:absolute;
left:200px;
top:174px;
width:95px;
height:31px;
}

#pociecie-09_ {
position:absolute;
left:295px;
top:174px;
width:125px;
height:31px;
}

#pociecie-10_ {
position:absolute;
left:420px;
top:174px;
width:96px;
height:31px;
}

#pociecie-11_ {
position:absolute;
left:516px;
top:174px;
width:107px;
height:31px;
}

#pociecie-12_ {
position:absolute;
left:623px;
top:174px;
width:137px;
height:31px;
}

#pociecie-13_ {
position:absolute;
left:200px;
top:205px;
width:247px;
height:186px;
}

#pociecie-14_ {
position:absolute;
left:447px;
top:205px;
width:153px;
height:186px;
}

#pociecie-15_ {
position:absolute;
left:600px;
top:205px;
width:160px;
height:53px;
}

#pociecie-16_ {
position:absolute;
left:600px;
top:258px;
width:160px;
height:133px;
}

#pociecie-17_ {
position:absolute;
left:200px;
top:391px;
width:560px;
height:16px;
}

#pociecie-18_ {
position:absolute;
left:200px;
top:407px;
width:560px;
height:13px;
}

-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#000000;">
<!-- ImageReady Slices (pocięcie.psd) -->
<div id="Tabela_01">
<div id="pociecie-01_">
<img id="pociecie_01" src="Obrazki/pociecie_01.jpg" width="200" height="420" alt="" />
</div>
<div id="pociecie-02_">
<img id="pociecie_02" src="Obrazki/pociecie_02.jpg" width="46" height="29" alt="" />
</div>
<div id="pociecie-03_">
<img id="pociecie_03" src="Obrazki/pociecie_03.jpg" width="49" height="29" alt="" />
</div>
<div id="pociecie-04_">
<img id="pociecie_04" src="Obrazki/pociecie_04.jpg" width="68" height="29" alt="" />
</div>
<div id="pociecie-05_">
<img id="pociecie_05" src="Obrazki/pociecie_05.jpg" width="49" height="29" alt="" />
</div>
<div id="pociecie-06_">
<img id="pociecie_06" src="Obrazki/pociecie_06.jpg" width="348" height="29" alt="" />
</div>
<div id="pociecie-07_">
<img id="pociecie_07" src="Obrazki/pociecie_07.jpg" width="560" height="145" alt="" />
</div>
<div id="pociecie-08_">
<img id="pociecie_08" src="Obrazki/pociecie_08.jpg" width="95" height="31" alt="" />
</div>
<div id="pociecie-09_">
<img id="pociecie_09" src="Obrazki/pociecie_09.jpg" width="125" height="31" alt="" />
</div>
<div id="pociecie-10_">
<img id="pociecie_10" src="Obrazki/pociecie_10.jpg" width="96" height="31" alt="" />
</div>
<div id="pociecie-11_">
<img id="pociecie_11" src="Obrazki/pociecie_11.jpg" width="107" height="31" alt="" />
</div>
<div id="pociecie-12_">
<img id="pociecie_12" src="Obrazki/pociecie_12.jpg" width="137" height="31" alt="" />
</div>
<div id="pociecie-13_">
<img id="pociecie_13" src="Obrazki/pociecie_13.jpg" width="247" height="186" alt="" />
</div>
<div id="pociecie-14_">
<img id="pociecie_14" src="Obrazki/pociecie_14.jpg" width="153" height="186" alt="" />
</div>
<div id="pociecie-15_">
<img id="pociecie_15" src="Obrazki/pociecie_15.jpg" width="160" height="53" alt="" />
</div>
<div id="pociecie-16_">
<img id="pociecie_16" src="Obrazki/pociecie_16.jpg" width="160" height="133" alt="" />
</div>
<div id="pociecie-17_">
<img id="pociecie_17" src="Obrazki/pociecie_17.jpg" width="560" height="16" alt="" />
</div>
<div id="pociecie-18_">
<img id="pociecie_18" src="Obrazki/pociecie_18.jpg" width="560" height="13" alt="" />
</div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>



margin-left: auto;
margin-right: auto;
niestety nie wiem dlaczego, ale nie działają.
czachor
16.11.2010, 12:30:52
auto nie działa, ponieważ wszystko ma position: absolute. Wywal to razem z left, top itp. Nadaj szerokość i daj marginesy auto.
trembecki
16.11.2010, 12:57:11
Mam to zrobić tylko w #Tabela_01 ? Bo jeżeli tak, to nadal nie działa i właśnie tak próbowałem robić
koreja
19.11.2010, 23:13:04
Usuń wszystko co masz w css w #Tabela_01 i wpisz tam
[CSS] pobierz, plaintext 
  1. width:760px; margin:0 auto;
[CSS] pobierz, plaintext
trembecki
26.11.2010, 09:56:44
Niestety ten sposób również nie działa
wookieb
26.11.2010, 10:02:31
Wywal to wszystko i złóż szablon normalnie. To co masz nawet na śmietnik się nie nadaje. Żaden ale to ŻADEN generator nie złoży szablonu poprawnie.
trembecki
29.11.2010, 13:38:59
A co jest nie tak ze złożeniem tego szablonu? Z tego, do czego udało mi się dojść wszystko ładnie śmiga, zakładki super się otwierają itd. Jedyny problem jest w tym, że nadal nie potrafię wyśrodkować strony.
Damonsson
29.11.2010, 15:02:21
Jest zajebisty! Olej ich, nie znają się, amatorzy...

<3
trembecki
29.11.2010, 16:31:45
Cytat(Damonsson @ 29.11.2010, 15:02:21 ) *
Jest zajebisty! Olej ich, nie znają się, amatorzy...

<3


Nie kwestionuje tego, że jest on zły, ponieważ nie znam się na tym temacie. Chciał bym wiedzieć po prostu, co poprawić i jak wyśrodkować tą strone. Twoja ironia wydaje mi się trochę nie na miejscu, bo chyba właśnie w celu poszerzania swojej wiedzy powstało to forum.
Damonsson
29.11.2010, 18:01:02
No przecież wookieb Ci wyjaśnił wszystko, w jednym zdaniu, a Ty pytasz co jest źle, bo przecież działa. Skoro działa to olej to. A jak będziesz chciał pogłębić swoją wiedzę w tym temacie, to sam dojdziesz do tego jak powinno być.

Wpisz w google "best sites", czy "best css websites" czy coś w tym stylu. Poszukaj jakichś małych stron, zajrzyj w źródło i zobacz czym się różni od Twoich puzzli.

A dodatkowo, jak chcesz zobaczyć jak także, nie powinno się robić stron, to zajrzyj w link u mnie w podpisie. To nie jest ironia.



edit: wrzuć gdzieś to na live, to Ci to wyśrodkuję, albo ktoś inny, bo mój notatnik piszczy i skomle jak widzi wklejony taki kod winksmiley.jpg
adasko_pl
2.12.2010, 19:15:28
Aby wyśrodkowanie działało musić dodać margin 0 auto tak jak już było mówione wyżej jednak żeby to poprawnie działało w IE musisz dodać DOCTYPE.

Pozdrawiam
Adam P
Damonsson
2.12.2010, 19:28:51
Sądzę, że nawet <center> by zawiódł...ale sprawdzać nie będę.

Również pozdrawiam i zachęcam do odśnieżenia mi samochodu w ramach przeprosin za nic niewnoszący post smile.gif
Quadina
4.12.2010, 08:28:09
Spróbuj tak:
[CSS] pobierz, plaintext 
  1. #Tabela_01 {
  2.   position:absolute;
  3.   left:50%;
  4.   top:0px;
  5.   width:760px;
  6.   height:420px;
  7.   margin-left:-380px;
[CSS] pobierz, plaintext
derdiusz
5.12.2010, 23:48:02
ja bym się w position: absolute nie ładował bo nie tędy droga. Tak jak wcześniej pisano - określona szerokość i margin: 0 auto najlepiej się sprawdzają..

[HTML] pobierz, plaintext 
  1. ...
  2. <style type="text/css">
  3. .wrapper
  4. {
  5. width: 760px;
  6. margin: auto;
  7. }
  8. </style>
  9. </head>
  10. <body>
  11. <div class="wrapper">
  12. a tu cała reszta układanki..
  13. </div>
  14. </body>
[HTML] pobierz, plaintext



ps. poczytaj też czym są css sprites smile.gif


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