Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Pozycjonowanie
Forum PHP.pl > Forum > Przedszkole
deadmen4
Witam,

Mam taki problem, że chce aby cała strona znalazła się dokładnie na środku okna przeglądarki. Nie wiem tylko, jak zrobić to w css. Stronę mam w div'ach więc to nie problem.

Umiem zmieniać położenie o daną wartość, ale jak na oknie mojej przeglądarki bedzie na środku, to na innym monitorze będzie zupełnie inaczej.

Chodzi mi o coś w rodzaju
Kod
aligin="center"
.


Potrafiłby ktoś pomóc?


pozdr.
wookieb
google -> css centrowanie strony
Maciek1705
odp prosta dla głównego diva lub body daj w css "margin:auto;"
sadistic_son
  1. <div style="margin:0 auto;">
  2. cala strona
  3. </div>
  4. </body>
To działa TYLKO w poziomym wycentrowaniu strony.
wookieb
Jeżli chcesz wycentrować w pionie to powiedz czy twoja strona ma stałą wysokość.
deadmen4
Poziomo centrowanie. Problem w tym, że wszystkie te sposoby, a także wiele innych jakich znalazłem w necie nie działają... sad.gif

http://csmap.yoyo.pl (działa pod IE )

Ma ktoś jakiś pomysł?
darophp
  1. html, body {
  2. width: 900px; // np.
  3. margin: 0auto;
  4. padding: 0 auto;
  5. }


lub

  1. * {
  2. margin: 0auto;
  3. padding: 0 auto;
  4. }
sweter
Może tak:
Kod
#wycentrowany_div {
    width:900px;      /*   <- tu podajesz szerokość strony  */
    position:absolute;
    left:50%;
    margin-left:450px;   /*    <- tu podajesz szerokość strony/2   */
}
krzysztof_kf
po co tyle tego krutko

Kod
selektor {

width: twoja szerokość;
margin: 0 auto;
mls
Dwa sposoby (zakładając, że cała strona zostanie umieszczona wewnątrz elementu - np. DIVa - o id "page-container" i, że centralna część ma szerokość 960px):
1.
  1. html, body { text-align: center; }
  2. #page-container { margin: 0 auto; text-align: left; width: 960px; }

2.
  1. #page-container { position: absolute; left: 50%; width: 960px; margin-left: -480px; }
deadmen4
Kurde... sadsmiley02.gif Nic z tych rzeczy nie działa.

Kod
#wycentrowany_div {
    width:900px;      /*   <- tu podajesz szerokość strony  */
    position:absolute;
    left:50%;
    margin-left:450px;   /*    <- tu podajesz szerokość strony/2   */
}


To tylko przesuneło całość na prawo.


axesmiley.png sad.gif
darophp
A weż spróbuj mojego smile.gif
mortus
Nie dziw się, że coś nie działa. Gdzie Ty chłopie masz znacznik html, czemu sekcja head występuje dwa razy, a body kończy się w połowie strony. Zacznij od podstaw, to może w końcu coś zadziała. Podpowiem, że szkielet strony powinien wyglądać mniej więcej tak:
  1. <head>
  2. <!-- tutaj wszystkie meta tagi, skrypty js, linki do zewnętrznych arkuszy stylów -->
  3. </head>
  4. <body>
  5. <!-- tutaj i tylko tutaj cała treść strony, wszystkie div-y, tabele i co tam chcesz -->
  6. </body>
  7. </html>
krzysztof_kf
wklej swój kod bo zgadywać możemy przez parę dni
deadmen4
Próbowałem obydwu... nic
krzysztof_kf
wklej swój kod
deadmen4
strony index czy css
krzysztof_kf
index i css
deadmen4
  1. #strona {
  2. width: 1000px;
  3.  
  4.  
  5. position: absolute; left: 25%;
  6.  
  7.  
  8.  
  9.  
  10.  
  11. border-left-style: dotted;
  12.  
  13. border-right-style: dotted;
  14. border-width: 4px;
  15. border-color: yellow;
  16.  
  17. }
  18.  
  19. #menu {
  20. width:250px;
  21. float:left;
  22.  
  23.  
  24.  
  25. }
  26.  
  27. #reszta {
  28.  
  29.  
  30. width:730px;
  31. float:right;
  32. background-color: #FFCCCC;
  33. font-family: Arial, cursive;
  34. border-style: solid;
  35. border-width: 2px;
  36. border-color: red;
  37.  
  38.  
  39.  
  40.  
  41.  
  42.  
  43.  
  44.  
  45. }
  46.  
  47. hr {
  48.  
  49. color: green;
  50.  
  51. }
  52.  
  53.  
  54.  
  55.  
  56. textarea {
  57.  
  58.  
  59. scrollbar-arrow-color: red;
  60. scrollbar-3dlight-color: black;
  61. scrollbar-shadow-color: black;
  62. scrollbar-highlight-color: lime;
  63. border-bottom-style: solid;
  64. border-left-style: solid;
  65. border-top-style: solid;
  66. border-right-style: solid;
  67. border-bottom-width: thin;
  68. border-left-width: thin;
  69. border-top-width: thin;
  70. border-right-width: thin;
  71. border-bottom-color: #3300FF;
  72. border-left-color: #3300FF;
  73. border-top-color: #3300FF;
  74. border-right-color: #3300FF;
  75.  
  76.  
  77.  
  78. }
  79.  
  80.  
  81.  
  82. dl, dt, dd {
  83. display: block;
  84. margin: 0;
  85. padding: 0;
  86. position: fixed; left: 0cm;
  87. width: 250px;
  88. font-family: Arial Black, Verdana
  89.  
  90. }
  91.  
  92. dt {
  93. width: 250px;
  94. padding: 5px 10px;
  95. font-weight: bold;
  96. font-size: larger;
  97. text-align: center;
  98. background: #797 url("tlo3.gif") repeat-x top;
  99. color: lime;
  100. border-width: 2px;
  101. border-style: solid;
  102. border-color: blue blue blue blue;
  103. font-family: Verdana;
  104. }
  105.  
  106. dd {
  107. width: 250px;
  108. padding-left: 10px;
  109. background: #797 url("punkt.gif") no-repeat left top;
  110. border-width: 1px;
  111. border-style: solid;
  112. border-color: black black black black;
  113.  
  114. }
  115.  
  116. dl a:link, dl a:visited {
  117. display: block;
  118. width: 220px;
  119. text-decoration: none;
  120. padding: 5px 10px;
  121. font-weight: bold;
  122. background: #bfb url("tlo2.gif") repeat-x top;
  123. color: red;
  124. border-left: 1px solid #797;
  125. }
  126.  
  127. dl a:hover {
  128. background-color: #797;
  129. background-image: url("tlo.gif");
  130. color: red;
  131.  
  132. }



  1.  
  2. // ten pierwszy skrypt to do licznika wejść
  3.  
  4. <?php
  5. if((!isset($_COOKIE['licznikowe-ciacho'])) && (!strstr($_SERVER['HTTP_REFERER'], "csmap.yoyo.pl"))) {
  6. $plik = fopen("licznik.txt", "r");
  7. $tekst = fread($plik, filesize("licznik.txt"));
  8. $dane = explode(";", $tekst);
  9. fclose($plik);
  10. $plik = fopen("licznik.txt", "w");
  11. flock($plik, 2);
  12. $dane[0]++;
  13. fwrite($plik, "$dane[0];", 15);
  14. flock($plik, 3);
  15. fclose($plik);
  16. setcookie("licznikowe-ciacho", "zliczono", time()+3600);
  17. }
  18. else {
  19. $plik = fopen("licznik.txt", "r");
  20. $tekst = fread($plik, filesize("licznik.txt"));
  21. $dane = explode(";", $tekst);
  22. }
  23.  
  24. ?>
  25.  
  26.  
  27. <head>
  28. <link rel="Stylesheet" type="text/css" href="index.css" />
  29.  
  30. <title>STRONA</title>
  31. <meta name="Description" content="Skrypty, pomoce, wiadomosci, portal, wszsytko" />
  32. <meta name="Author" content="Marox" />
  33. <meta http-equiv="Expires" content="0" />
  34. <meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate" />
  35. <meta http-equiv="Cache-Control" content="post-check=0, pre-check=0" />
  36. <meta http-equiv="Pragma" content="no-cache" />
  37. <link rel="Shortcut icon" href="http://www.multihack.pl/favicon.ico" />
  38.  
  39.  
  40.  
  41.  
  42.  
  43.  
  44.  
  45.  
  46.  
  47. </head>
  48.  
  49.  
  50.  
  51. <body background="tlo_strona.jpg"></body>
  52.  
  53.  
  54. <div id="strona" >
  55.  
  56.  
  57. <table width="100%" cellspacing="0" cellpadding="0">
  58. <tr>
  59. <td style="{ position: relative; bottom: 1mm; }" colspan="2" align="center" valign="medium"><img src="logo.gif" alt="LOGO" /></td>
  60. </tr>
  61. </table>
  62.  
  63.  
  64.  
  65.  
  66. <?php
  67.  
  68.  
  69.  
  70. switch ($_GET['cos']) {
  71. case 'losowanie': include ('losowanie.php');
  72. break;
  73.  
  74. case 'ankieta': include ('formularz.php');
  75. break;
  76.  
  77. case 'chat': include ('chat/index.php');
  78. break;
  79.  
  80. case '': include ('a.php');
  81. break;
  82.  
  83. case 'bug': include ('bug.php');
  84. break;
  85.  
  86. case 'sonda': include ('ocena.php');
  87. break;
  88.  
  89.  
  90. default :
  91.  
  92.  
  93. }
  94.  
  95. ?>
  96.  
  97. <div id="menu">
  98.  
  99. <dl>
  100. <dt>MENU</dt>
  101. <dd><a href='index.php'>Strona Głowna</a></dd>
  102. <dd><a href='index.php?cos=ankieta'>Ankieta</a></dd>
  103. <dd><a href='index.php?cos=sonda&id=1'>Oceń strone</a></dd>
  104. <dt>NARZĘDZIA</dt>
  105. <dd><a href='index.php?cos=losowanie'>Losowanie Liczb</a></dd>
  106. <dt>CZAT</dt>
  107. <dd><a href='/chat/index.php'>Wejdź na Czat</a></dd>
  108. <dt>SUPPORT</dt>
  109. <dd><a href='index.php?cos=bug'>Zgłaszanie Błędow</a></dd>
  110. </dl>
  111. <div id="sonda56676">Firewall: <a href="http://www.hanzo.eu/3,86,pl,netasq_IPS_U1100.html">netasq IPS U1100</a></div>
  112. <script type="text/javascript" src="http://sonda.hanzo.eu/sonda.js,56676,kVPb,9AIh"></script>
  113. </div>
  114.  
  115. <table width="100%" cellspacing="0" cellpadding="10">
  116. <tr>
  117. <td style="{ position: relative; top: 1mm; }" bgcolor="#888888" colspan="2" align="center" valign="middle">&copy; 2010; <i>Created by </i> <b> Marox</b><i style=" { color: white; position: relative; left: 8cm; }">Stronę odwiedziło już<b> <?php echo($dane[0]); ?></b> osób</i></td>
  118. </tr>
  119. <tr>
  120.  
  121.  
  122. </div>


Każda podstrona (include) ma diva #reszta. Cała strona ma div #strona

Maciek1705
ja pier...... jaka awaria czemu zamykasz body? zamknięcie powinno być na samym końcu w 122 lini za znacznikiem div tak ło </div></body> poza tym gdzie znaczniki html bo tych także nie widać?
darophp
  1.  
  2. #strona {
  3. width: 1000px;
  4. margin: 0 auto;
  5. padding: 0 auto;
  6. border-left-style: dotted;
  7. border-right-style: dotted;
  8. border-width: 4px;
  9. border-color: yellow;
  10.  
  11. }
  12.  
  13. #menu {
  14. width:250px;
  15. float:left;
  16. }
  17.  
  18. #reszta {
  19.  
  20. width:730px;
  21. float:right;
  22. background-color: #FFCCCC;
  23. font-family: Arial, cursive;
  24. border-style: solid;
  25. border-width: 2px;
  26. border-color: red;
  27.  
  28. }
  29.  
  30. hr {
  31. color: green;
  32. }
  33.  
  34.  
  35. textarea {
  36.  
  37. scrollbar-arrow-color: red;
  38. scrollbar-3dlight-color: black;
  39. scrollbar-shadow-color: black;
  40. scrollbar-highlight-color: lime;
  41. border-bottom-style: solid;
  42. border-left-style: solid;
  43. border-top-style: solid;
  44. border-right-style: solid;
  45. border-bottom-width: thin;
  46. border-left-width: thin;
  47. border-top-width: thin;
  48. border-right-width: thin;
  49. border-bottom-color: #3300FF;
  50. border-left-color: #3300FF;
  51. border-top-color: #3300FF;
  52. border-right-color: #3300FF;
  53.  
  54. }
  55.  
  56.  
  57.  
  58. dl, dt, dd {
  59. display: block;
  60. margin: 0;
  61. padding: 0;
  62. position: fixed; left: 0cm;
  63. width: 250px;
  64. font-family: Arial Black, Verdana
  65.  
  66. }
  67.  
  68. dt {
  69. width: 250px;
  70. padding: 5px 10px;
  71. font-weight: bold;
  72. font-size: larger;
  73. text-align: center;
  74. background: #797 url("tlo3.gif") repeat-x top;
  75. color: lime;
  76. border-width: 2px;
  77. border-style: solid;
  78. border-color: blue blue blue blue;
  79. font-family: Verdana;
  80. }
  81.  
  82. dd {
  83. width: 250px;
  84. padding-left: 10px;
  85. background: #797 url("punkt.gif") no-repeat left top;
  86. border-width: 1px;
  87. border-style: solid;
  88. border-color: black black black black;
  89.  
  90. }
  91.  
  92. dl a:link, dl a:visited {
  93. display: block;
  94. width: 220px;
  95. text-decoration: none;
  96. padding: 5px 10px;
  97. font-weight: bold;
  98. background: #bfb url("tlo2.gif") repeat-x top;
  99. color: red;
  100. border-left: 1px solid #797;
  101. }
  102.  
  103. dl a:hover {
  104. background-color: #797;
  105. background-image: url("tlo.gif");
  106. color: red;
  107.  
  108. }


  1.  
  2. // ten pierwszy skrypt to do licznika wejść
  3.  
  4. <?php
  5. if((!isset($_COOKIE['licznikowe-ciacho'])) && (!strstr($_SERVER['HTTP_REFERER'], "csmap.yoyo.pl"))) {
  6. $plik = fopen("licznik.txt", "r");
  7. $tekst = fread($plik, filesize("licznik.txt"));
  8. $dane = explode(";", $tekst);
  9. fclose($plik);
  10. $plik = fopen("licznik.txt", "w");
  11. flock($plik, 2);
  12. $dane[0]++;
  13. fwrite($plik, "$dane[0];", 15);
  14. flock($plik, 3);
  15. fclose($plik);
  16. setcookie("licznikowe-ciacho", "zliczono", time()+3600);
  17. }
  18. else {
  19. $plik = fopen("licznik.txt", "r");
  20. $tekst = fread($plik, filesize("licznik.txt"));
  21. $dane = explode(";", $tekst);
  22. }
  23.  
  24. ?>
  25.  
  26. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  27. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  28. <head>
  29. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2" />
  30. <meta name="Description" content="Skrypty, pomoce, wiadomosci, portal, wszsytko" />
  31. <meta name="Author" content="Marox" />
  32. <link rel="Shortcut icon" href="http://www.multihack.pl/favicon.ico" />
  33. <link rel="Stylesheet" type="text/css" href="index.css" />
  34. <title>STRONA</title>
  35. </head>
  36. <body background="tlo_strona.jpg">
  37. <div id="strona" >
  38. <table width="100%" cellspacing="0" cellpadding="0">
  39. <tr>
  40. <td style="{ position: relative; bottom: 1mm; }" colspan="2" align="center" valign="medium"><img src="logo.gif" alt="LOGO" /></td>
  41. </tr>
  42. </table>
  43.  
  44. <?php
  45. switch ($_GET['cos']) {
  46. case 'losowanie': include ('losowanie.php');
  47. break;
  48.  
  49. case 'ankieta': include ('formularz.php');
  50. break;
  51.  
  52. case 'chat': include ('chat/index.php');
  53. break;
  54.  
  55. case '': include ('a.php');
  56. break;
  57.  
  58. case 'bug': include ('bug.php');
  59. break;
  60.  
  61. case 'sonda': include ('ocena.php');
  62. break;
  63.  
  64.  
  65. default :
  66.  
  67.  
  68. }
  69.  
  70. ?>
  71.  
  72. <div id="menu">
  73.  
  74. <dl>
  75. <dt>MENU</dt>
  76. <dd><a href='index.php'>Strona Głowna</a></dd>
  77. <dd><a href='index.php?cos=ankieta'>Ankieta</a></dd>
  78. <dd><a href='index.php?cos=sonda&id=1'>Oceń strone</a></dd>
  79. <dt>NARZĘDZIA</dt>
  80. <dd><a href='index.php?cos=losowanie'>Losowanie Liczb</a></dd>
  81. <dt>CZAT</dt>
  82. <dd><a href='/chat/index.php'>Wejdź na Czat</a></dd>
  83. <dt>SUPPORT</dt>
  84. <dd><a href='index.php?cos=bug'>Zgłaszanie Błędow</a></dd>
  85. </dl>
  86. <div id="sonda56676">Firewall: <a href="http://www.hanzo.eu/3,86,pl,netasq_IPS_U1100.html">netasq IPS U1100</a></div>
  87. <script type="text/javascript" src="http://sonda.hanzo.eu/sonda.js,56676,kVPb,9AIh"></script>
  88. </div>
  89.  
  90. <table width="100%" cellspacing="0" cellpadding="10">
  91. <tr>
  92. <td style="{ position: relative; top: 1mm; }" bgcolor="#888888" colspan="2" align="center" valign="middle">&copy; 2010; <i>Created by </i> <b> Marox</b><i style=" { color: white; position: relative; left: 8cm; }">Stronę odwiedziło już<b> <?php echo($dane[0]); ?></b> osób</i></td>
  93. </tr>
  94. <tr>
  95.  
  96. </div>
  97. </body>


Człowieku nie mam czasu Ci tego edytować, ale z grubsza jest i powinno działać. Poczytaj na kurshtml.boo.pl bo ty nie znasz architektur stron. Nie masz zielonego pojęcia co to jest nawet css sciana.gif sciana.gif sciana.gif
krzysztof_kf
menu ci ucieka zmień a tak po za tym tak jak mój przedmówca mówił nauka css ;/


Kod
dl, dt, dd {
     display: block;
     margin: 0;
     padding: 0;
      float: left;
     width: 250px;
     font-family: Arial Black, Verdana
    
}


plus padding dla wartości

Kod
dt {
    width: 250px;
    padding: 5px 10px 0 0;
    font-weight: bold;
    font-size: larger;
    text-align: center;
    background: #797 url("tlo3.gif") repeat-x top;
    color: lime;
    border-width: 2px;
    border-style: solid;
    border-color: blue blue blue blue;
    font-family: Verdana;
}
mortus
Odbiegasz od standardów i stąd te problemy. Zastanów się w czym chcesz tą stronę napisać (np. HTML4.01, XHTML1.0 czy może w czymś innym). Później zajrzyj do specyfikacji W3C i zobacz, jakie są ogólne zasady programowania w wybranym języku. Ogólnie to:
1. brakuje deklaracji typu dokumentu <!DOCTYPE ... >
2. otwierasz i zamykasz znaczniki nie po kolei <div><p></div></p>, a nawet w ogóle nie zamykasz
3. w plikach includowanych zapewne znajduje się znacznik zamykający </body>
4. bądź na czasie i nie używaj tabelek do definiowania layoutu strony, po co logo w tabelce?!
Rada: poszukaj jakiegoś kursu xhtml i zacznij od niego. Podrzucam link
darophp
Dopisałem mu to już wcześniej smile.gif zgodnie ze standardami.
mortus
Cytat(darophp @ 2.03.2010, 20:31:13 ) *
Dopisałem mu to już wcześniej smile.gif zgodnie ze standardami.
Nie obraź się, ale nie chodzi o to, żeby dopisać, ale o to, żeby nauczyć. Jeśli nie zauważyłeś, to zauważ, że w kodzie podanym przez deadmen4 nie ma znacznika zamykającego body, natomiast w kodzie źródłowym strony z adresu podanego, w którymś z pierwszych postów jest. Wniosek jest taki, że w includowanych plikach następuje zamknięcie znacznika body. Jak myślisz, czy w takim wypadku, to że Ty na końcu dopiszesz </body>, coś da? Ogólnie cały kod jest do przerobienia.
darophp
Wiadomo, wiem o coc Ci chodzi, dlatego napisałem mu, żeby zobaczył co zmieniłem mu i niech się uczy, bo jak z każdym takim banalnym będzie tu przychodził to nic nie zrobi.
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.