Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Centrowanie strony
Forum PHP.pl > Forum > Przedszkole
bardakon
8.06.2010, 15:23:06
Witam
Prawdopodobnie brak mi podstaw i nie widzę gdzie zrobiłem błąd. Chcę wycentrować stronę w css.
Próbuję metody z warstwą zawierającą w sobie wszystkie inne, ale nie działą.
Strona wygląda tak:
TOP
L P
L P

a więc top na całą szerokość i dwa wiersze po dwie pozycje.

index:
[PHP] pobierz, plaintext 
  1. <body>
  2.  
  3. <div id="ALL">
  4.  
  5. <div id="TOP">
  6. <img src="images/top1.jpg" width="971" height="545" border="0" alt="[Rozmiar: 132466 bajtów]">
  7. </div>
  8.  
  9. <div id="Formularz">
  10. Tu będzie Forumularz
  11. </div>
  12.  
  13. <div id="Panele">
  14. <img src="images/right_panel.jpg" width="443" height="365" border="0" alt="[Rozmiar: 75461 bajtów]">
  15. </div>
  16.  
  17. <div id="Klauzula">
  18. tu będzie Klauzula
  19. </div>
  20.  
  21. <div id="Panel">
  22. <img src="images/low1.jpg" width="582" height="218" border="0" alt="[Rozmiar: 47286 bajtów]">
  23. </div>
  24.  
  25. </div>
  26.  
  27. </body>
[PHP] pobierz, plaintext


CSS
[HTML] pobierz, plaintext 
  1. html, 
  2. body {
  3. 	font-family: Arial, Helvetica, sans-serif;
  4. 	font-size: pt;
  5. 	color: #ffffff;
  6. 	background-color: #494a4e;
  7. 	height:100%;
  8.    }
  9.  
  10.  
  11. p
  12. {
  13.  
  14. 	font-family: Arial, Helvetica, sans-serif;
  15. 	font-size: 11 pt;
  16. 	text-align: left;
  17. 	line-height: 1,5
  18. }
  19.  
  20.  
  21.  
  22. #ALL 
  23. {
  24.   margin: 0 auto;
  25.   width; 971px;
  26.   float: left;
  27.   text-align: left;
  28.   background-color: #a40104;
  29. }
  30.  
  31. #TOP 
  32. {
  33.    width: 971px;
  34. 	text-align: left;
  35.  
  36. }
  37.  
  38. #Formularz 
  39. {
  40. 	width: 528px;
  41. 	float: left;
  42. 	padding-right: 20;
  43. 	overflow: hidden;
  44. 	}
  45.  
  46. #Panele 
  47. {
  48.    width: 443px;
  49. 	float: left;
  50.    overflow: hidden;
  51. 	background-color:  ;
  52. }
  53.  
  54.  
  55.  
  56. #Klauzula 
  57. {
  58.    clear: both;
  59. 	width: 389px;
  60. 	padding-right: 20;
  61. 	float: left;
  62. 	overflow: hidden;
  63. 	background-color:  ;
  64. }
  65.  
  66. #Panel 
  67. {
  68.  
  69.    width: 582px;
  70. 	float: left;
  71.    overflow: hidden;
  72. 	background-color:  ;
  73. }
[HTML] pobierz, plaintext
!*!
8.06.2010, 15:25:11
Kod
margin:0 auto;
bardakon
8.06.2010, 15:28:46
Mam
Cytat
margin:0 auto;
w warstwie ALL obejmującej wszystkie inne, gdzie to ma być.

usunięcie float: left; a kontenera ALL wszystko rozwala.
pedro84
8.06.2010, 15:28:54
Cytat(!*! @ 8.06.2010, 16:25:11 ) *
Kod
margin:0 auto;

Cytat
w warstwie ALL obejmującej wszystkie inne, gdzie to ma być.

Przecież ma... Ludzie, czy Wy czytacie co ktoś pisze?


@autor: Dla głównego kontenera nie nadawaj float:left;

@down: <br> dla layoutów? Poza tym, co ma z tym wspólnego wysokość? Wiesz co? Jak masz takie debilizmy pisać, to lepiej nie pisz...
!*!
8.06.2010, 15:36:47
pod all daj

Kod
<br  style = clear: both;>


i ewentualnie usuń height:100% z body.

ps. nazwy znaczników/klas pisz z małej litery
krzysztof_kf
8.06.2010, 15:41:58
Cytat(bardakon @ 8.06.2010, 16:28:46 ) *
Mam w warstwie ALL obejmującej wszystkie inne, gdzie to ma być.

usunięcie float: left; a kontenera ALL wszystko rozwala.



Zamiast dla selekotra ALL daj do selektora TOP float: left;
bardakon
8.06.2010, 15:44:36
Nic nie pomogło, mogę przesłać pliki na maila jeżeli ktoś jest chętny.
pedro84
8.06.2010, 15:45:54
Cytat(bardakon @ 8.06.2010, 16:44:36 ) *
Nic nie pomogło, mogę przesłać pliki na maila jeżeli ktoś jest chętny.

1. Masz nie zamknięty div.
2. Po co Ci dwa "kontenery"?
krzysztof_kf
8.06.2010, 16:06:33
Jak ma ci wszystko działać jak w akapicie p nie masz zamkniętego 

[CSS] pobierz, plaintext 
  1. line-height: ;
[CSS] pobierz, plaintext


masz DOCTYPE odpowiednie ?
bardakon
8.06.2010, 18:35:00 
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
[HTML] pobierz, plaintext


zamknięcie (dodanie ";" ) w "p" nic nie dało.

Nie widzę podwójnego kontenera oraz nie widzę niezamkniętej warstwy. Jest jeden kont- "all"
pedro84
8.06.2010, 18:56:55
Cytat(bardakon @ 8.06.2010, 19:35:00 ) *
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
[HTML] pobierz, plaintext


zamknięcie (dodanie ";" ) w "p" nic nie dało.

Nie widzę podwójnego kontenera oraz nie widzę niezamkniętej warstwy. Jest jeden kont- "all"



Racja, źle zobaczyłem. Usuniesz to float:left; dla kontenera #all, to wtedy będzie wyśrodkowany, powtórzyć jeszcze ze dwa-trzy razy? smile.gif
bardakon
8.06.2010, 19:03:18
Nic nie musisz powtarzać, już to testowałem nawet przed napisaniem tego na forum.
Mój kontener ma czerwone tło (całość jest szara) jeżeli usunę float left w ALL to wtedy wyskakuje ten kolor spod całej strony i przesuwa się na górę i na prawo od Topu, natomiast Formularz i Klauzula są szare.
pedro84
8.06.2010, 19:05:36 
[CSS] pobierz, plaintext 
  1. overflow:hidden
[CSS] pobierz, plaintext
dla #all
bardakon
8.06.2010, 19:14:37
Nic.

Oto pliki: http://www.sendspace.pl/file/017838a2108262e319a4408
pedro84
8.06.2010, 19:15:29
Cytat(bardakon @ 8.06.2010, 20:14:37 ) *
Nic.

Oto pliki: http://www.sendspace.pl/file/017838a2108262e319a4408

Wrzuć to lepiej na jakiś server, z takich serwisów niestety nic nie pobieram.
thek
8.06.2010, 19:26:16
Jeśli dobrze odczytuję...
#all powinien mieć tylko margin: 0 auto oraz width. Włożenie tam float rozwala całość. text-align może zostać. W #top szerokość niepotrzebna... i tak rozpycha się na całą dostępna.
Jeśli chcesz zrobić to dokładnie w 2 wierszach, to między obydwoma musisz zrobić clear. Metod jest kilka. Choćby taka, że ostatniemu elementowi w wierszach nadasz czyszczenie z prawej czy też pierwszemu elementowi w wierszach czyszczenie z lewej bądź pomiędzy obydwoma wstawisz nie robiący nic i nie mający wielkości z clear:both. Inna sprawa, że w stylach nie masz prawidłowo paddingów, bo są bez określenia typu. 20 to nie wiadomo czy 20px, 20pt czy 20 cokolwiek. Podobnie z font-size dla body. Tam masz pt, ale nie widzę wartości. Takie reguły są błędne i mogła przez to całość być odrzucona w trakcie wyświetlania jako nieprawidłowa. Domykaj także obrazki, jako <img /> i nie mieszaj. Jeśli trzymasz się CSS, to nie wrzucaj do znaczników czegoś w stylu border="0", width="528" bo robisz niepotrzebny bajzel sobie.Najbezpieczniej zrób coś w stylu:
[HTML] pobierz, plaintext 
  1. <div id="all">
  2.   <div id="top"></div>
  3.   <div class="wiersz">
  4.     <div><div>
  5.     <div><div>
  6.   </div>
  7.   <div class="wiersz">
  8.     <div><div>
  9.     <div><div>
  10.   </div>
  11. </div>
[HTML] pobierz, plaintext
oraz css w stylu
[CSS] pobierz, plaintext 
  1. #all {
  2.   width: 971px;
  3.   margin: 0 auto;
  4. }
  5. div.wiersz {
  6.   clear:both;
  7. }
[CSS] pobierz, plaintext
a reszta wedle potrzeb. Dzięki temu całość będzie wycentrowana na stronie, a ewentualne pływanie wewnątrz wierszy w każdym kolejnym będzie prawidłowo czyszczone. Spróbuj mój wstęp sobie sprawdzić i uważając jak float'ujesz do swoich potrzeb dopasować oraz wzbogacić o to, co potrzebujesz.
krzysztof_kf
8.06.2010, 19:48:33
Nie działa ci centrowanie bo w ALL masz w szerokości strony ; zamiast po width: przypatrz się biggrin.gif
bardakon
9.06.2010, 22:58:27
Cytat(krzysztof_kf @ 8.06.2010, 20:48:33 ) *
Nie działa ci centrowanie bo w ALL masz w szerokości strony ; zamiast po width: przypatrz się biggrin.gif


Bynajmniej nie miało to żadnego znaczenia.

Piwo dla thek'a. Działa jak guitar.gif
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.