Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Wyśrodkowanie strony. Zielony, nie bić!
trembecki
post 16.11.2010, 10:39:30
Post #1





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 22.01.2007

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

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ą.
Go to the top of the page
+Quote Post
czachor
post 16.11.2010, 12:30:52
Post #2





Grupa: Zarejestrowani
Postów: 897
Pomógł: 40
Dołączył: 16.12.2003
Skąd: Warszawa

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

auto nie działa, ponieważ wszystko ma position: absolute. Wywal to razem z left, top itp. Nadaj szerokość i daj marginesy auto.


--------------------
how many SEO experts does it take to change a light bulb,lightbulb,light,bulb,lamp,lighting,switch,sex,xxx
5-Reasons-why-you-should-NEVER-fix-a-computer-for-free
Go to the top of the page
+Quote Post
trembecki
post 16.11.2010, 12:57:11
Post #3





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 22.01.2007

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

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ć
Go to the top of the page
+Quote Post
koreja
post 19.11.2010, 23:13:04
Post #4





Grupa: Zarejestrowani
Postów: 120
Pomógł: 22
Dołączył: 15.07.2008
Skąd: Raniżów/Rzeszów

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

Usuń wszystko co masz w css w #Tabela_01 i wpisz tam
[CSS] pobierz, plaintext 
  1. width:760px; margin:0 auto;
[CSS] pobierz, plaintext


Ten post edytował koreja 19.11.2010, 23:13:38
Go to the top of the page
+Quote Post
trembecki
post 26.11.2010, 09:56:44
Post #5





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 22.01.2007

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

Niestety ten sposób również nie działa
Go to the top of the page
+Quote Post
wookieb
post 26.11.2010, 10:02:31
Post #6





Grupa: Moderatorzy
Postów: 8 989
Pomógł: 1550
Dołączył: 8.08.2008
Skąd: Słupsk/Gdańsk
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.


--------------------
9marshals.com, Fantastyka, Parser bbcode ( UPDATE 1.2 ), Kalkulator wielkości informatycznych
Go to the top of the page
+Quote Post
trembecki
post 29.11.2010, 13:38:59
Post #7





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 22.01.2007

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

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.
Go to the top of the page
+Quote Post
Damonsson
post 29.11.2010, 15:02:21
Post #8





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

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

Jest zajebisty! Olej ich, nie znają się, amatorzy...

<3
Go to the top of the page
+Quote Post
trembecki
post 29.11.2010, 16:31:45
Post #9





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 22.01.2007

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

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.
Go to the top of the page
+Quote Post
Damonsson
post 29.11.2010, 18:01:02
Post #10





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

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

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

Ten post edytował Damonsson 29.11.2010, 18:07:10
Go to the top of the page
+Quote Post
adasko_pl
post 2.12.2010, 19:15:28
Post #11





Grupa: Zarejestrowani
Postów: 6
Pomógł: 0
Dołączył: 30.11.2010

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

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
Go to the top of the page
+Quote Post
Damonsson
post 2.12.2010, 19:28:51
Post #12





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

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

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

Ten post edytował Damonsson 2.12.2010, 19:29:00
Go to the top of the page
+Quote Post
Quadina
post 4.12.2010, 08:28:09
Post #13





Grupa: Zarejestrowani
Postów: 200
Pomógł: 38
Dołączył: 1.12.2010
Skąd: Wrocław

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

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


--------------------
Warsztat: NetBeans 7.2 Beta, PHP, MySQL, PostgreSQL, Symfony (<=1.4), Diem, Java, Sieci neuronowe
Go to the top of the page
+Quote Post
derdiusz
post 5.12.2010, 23:48:02
Post #14





Grupa: Zarejestrowani
Postów: 14
Pomógł: 0
Dołączył: 3.12.2010

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

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
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · 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: 18.07.2025 - 00:55
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn