Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css]Problem z wyśrodkowaniem
Forum PHP.pl > Forum > Przedszkole
defox
21.02.2008, 17:03:05
Witam. Mam problem z wyśrodkowaniem strony o kodzie zamieszczonym poniżej.
Główną częścią strony jest "Tabela_01" więc do niej dodałem informacje o marginesach. Dodanie tego do ciała dokumentu również nic nie zmienia. Proszę o pomoc.

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.    <html xmlns="http://www.w3.org/1999/xhtml">
  3.    <head>
  4.    <title>Bez nazwy 1</title>
  5.    <meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
  6.  
  7.    <style type="text/css">
  8.    <!--
  9.  
  10.  
  11.  
  12.    #Tabela_01 {
  13.        position:absolute;
  14.        left:0px;
  15.        top:0px;
  16.        width:760px;
  17.        height:800px;
  18.        margin-left: auto; 
  19.        margin-right: auto;
  20.    }
  21.  
  22.    #Bez-nazwy-1-01_ {
  23.        position:absolute;
  24.        left:0px;
  25.        top:0px;
  26.        width:760px;
  27.        height:550px;
  28.    }
  29.  
  30.    #Bez-nazwy-1-02_ {
  31.        position:absolute;
  32.        left:0px;
  33.        top:550px;
  34.        width:760px;
  35.        height:250px;
  36.    }
  37.  
  38.    -->
  39.    </style>
  40.  
  41.    </head>
  42.    <body style="background-color:#FFFFFF;">
  43.  
  44.    <div id="Tabela_01">
  45.        <div id="Bez-nazwy-1-01_">
  46.  
  47.        </div>
  48.        <div id="Bez-nazwy-1-02_">
  49.  
  50.        </div>
  51.    </div>
  52.  
  53.    </body>
  54.    </html>
[HTML] pobierz, plaintext
mokry
21.02.2008, 17:05:02 
[HTML] pobierz, plaintext 
  1. #Tabela_01 {
  2.      width:760px;
  3.      height:800px;
  4.      margin: 0 auto;
  5. }
[HTML] pobierz, plaintext


Nie nadawaj pozycji absolute dla conatinerów wewnętrznych.
defox
21.02.2008, 17:05:51
To też nie działa.

Edit; czyli mam nie nadawać żadnych atrybutów position?
mokry
21.02.2008, 17:08:36 
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Bez nazwy 1</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
  6.  
  7. <style type="text/css">
  8. <!--
  9.  
  10.  
  11.  
  12. #Tabela_01 {
  13. width:760px;
  14. height:800px;
  15. margin: 0 auto;
  16. }
  17.  
  18. #Bez-nazwy-1-01 {
  19. width:760px;
  20. height:550px;
  21. }
  22.  
  23. #Bez-nazwy-1-02 {
  24. width:760px;
  25. height:250px;
  26. }
  27.  
  28. -->
  29. </style>
  30.  
  31. </head>
  32. <body style="background-color:#FFFFFF;">
  33.  
  34. <div id="Tabela_01">
  35. <div id="Bez-nazwy-1-01">
  36.  
  37. </div>
  38. <div id="Bez-nazwy-1-02">
  39.  
  40. </div>
  41. </div>
  42.  
  43. </body>
  44. </html>
[HTML] pobierz, plaintext
specialplan
21.02.2008, 17:09:52 
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Bez nazwy 1</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
  6.  
  7. <style type="text/css">
  8. <!--
  9.  
  10.  
  11.  
  12. #Tabela_01 {
  13. width:760px;
  14. height:800px;
  15. margin-left: auto;
  16. margin-right: auto;
  17. border: 1px solid red;
  18. }
  19.  
  20. #Bez-nazwy-1-01_ {
  21. width:760px;
  22. height:550px;
  23. }
  24.  
  25. #Bez-nazwy-1-02_ {
  26. position:absolute;
  27. left:0px;
  28. top:550px;
  29. width:760px;
  30. height:250px;
  31. }
  32.  
  33. -->
  34. </style>
  35.  
  36. </head>
  37. <body style="background-color:#FFFFFF;">
  38.  
  39. <div id="Tabela_01">
  40. <div id="Bez-nazwy-1-01_">
  41. tralalala
  42. </div>
  43. <div id="Bez-nazwy-1-02_">
  44.  
  45. </div>
  46. </div>
  47.  
  48. </body>
  49. </html>
[HTML] pobierz, plaintext


Ten border to tak dla picu, by bylo widac, ze jest na srodku:)

edit: Mokry napisal w tym samym czasie:)
defox
21.02.2008, 17:45:18
Ok dzieki ;D

edit: jednak u mnie cos nie działa;/ Teraz strona jest w lewym marginesie, gdy usunę "position" wszystko się rozjeżdza tzn, jest ulozone pod sobą, w lewym marginesie. Kod do wglądu.
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title>Bez nazwy 1</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
  5. <!-- ImageReady Styles (Bez nazwy 1.psd) -->
  6. <style type="text/css">
  7. <!--
  8.  
  9.  
  10.  
  11. #Tabela_01 {
  12.  
  13.     width:760px;
  14.     height:800px;
  15.     left: 0px;
  16.     top: 0px;    
  17.     margin: 0 auto;
  18.  
  19.  
  20.  
  21. }
  22.  
  23. #Bez-nazwy-1-01 {
  24.     left:0px;
  25.     top:0px;
  26.     width:760px;
  27.     height:171px;
  28.     background-image: url(images/Bez-nazwy-1_01.jpg);
  29.     position: absolute;    
  30. }
  31.  
  32. #Bez-nazwy-1-02 {
  33.     position:absolute;
  34.     left:0px;
  35.     top:171px;
  36.     width:760px;
  37.     height:8px;
  38.     background-image: url(images/Bez-nazwy-1_02.jpg);
  39. }
  40.  
  41. #Bez-nazwy-1-03 {
  42.     position:absolute;
  43.     left:0px;
  44.     top:179px;
  45.     width:70px;
  46.     height:43px;
  47.     background-image: url(images/Bez-nazwy-1_03.jpg);
  48. }
  49.  
  50. #Bez-nazwy-1-04 {
  51.     position:absolute;
  52.     left:70px;
  53.     top:179px;
  54.     width:108px;
  55.     height:35px;
  56.     background-image: url(images/Bez-nazwy-1_04.jpg);
  57.  
  58. }
  59.  
  60. #Bez-nazwy-1-05 {
  61.     position:absolute;
  62.     left:178px;
  63.     top:179px;
  64.     width:12px;
  65.     height:43px;
  66.     background-image: url(images/Bez-nazwy-1_05.jpg);
  67. }
  68.  
  69. #Bez-nazwy-1-06 {
  70.     position:absolute;
  71.     left:190px;
  72.     top:179px;
  73.     width:58px;
  74.     height:35px;
  75.     background-image: url(images/Bez-nazwy-1_06.jpg);
  76.  
  77. }
  78.  
  79. #Bez-nazwy-1-07 {
  80.     position:absolute;
  81.     left:248px;
  82.     top:179px;
  83.     width:17px;
  84.     height:43px;
  85.     background-image: url(images/Bez-nazwy-1_07.jpg);
  86. }
  87.  
  88. #Bez-nazwy-1-08 {
  89.     position:absolute;
  90.     left:265px;
  91.     top:179px;
  92.     width:89px;
  93.     height:35px;
  94.     background-image: url(images/Bez-nazwy-1_08.jpg);
  95. }
  96.  
  97.  
  98.  
  99. -->
  100. </style>
  101. <!-- End ImageReady Styles -->
  102. </head>
  103. <body style="background-color:#FFFFFF;">
  104. <div id="Tabela_01">
  105.     <div id="Bez-nazwy-1-01">    </div>
  106.  
  107.     <div id="Bez-nazwy-1-02">    </div>
  108.     <div id="Bez-nazwy-1-03">    </div>
  109.     <div id="Bez-nazwy-1-04">
  110.       <a href="http://www.onet.pl"><img border="0" style="float:right" src="images\Bez-nazwy-1_04.jpg"></a>    </div>
  111.     <div id="Bez-nazwy-1-05">    </div>
  112.     <div id="Bez-nazwy-1-06">
  113.         <a href="o_firmie.html"><img border="0" style="float:right" src="images\Bez-nazwy-1_06.jpg"></a>        </div>
  114.     <div id="Bez-nazwy-1-07">    </div>
  115.     <div id="Bez-nazwy-1-08">    </div>
  116.  
  117. </div>
  118. </body>
  119. </html>
[HTML] pobierz, plaintext


refresh...
-NEEKE-
21.02.2008, 18:02:03
Kurs CSS sie klania. Czy niemyslales by uzyc czegos takiego jak display? poczytaj a przy okazji polecam float
defox
22.02.2008, 12:05:08
próbwałem różnych wartości dla display i nic się nie zmienia... może mi ktoś pomóc?

@refresh
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.