Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS] Centrowanie strony, Czytałem już o tym na 10 stronach ale nie działa
bardakon
post 8.06.2010, 15:23:06
Post #1





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 1.06.2010

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

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
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 17)
!*!
post 8.06.2010, 15:25:11
Post #2





Grupa: Zarejestrowani
Postów: 4 298
Pomógł: 447
Dołączył: 16.11.2006

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

Kod
margin:0 auto;
Powód edycji: [thek]: Czyta się ze ZROZUMIENIEM,a nie z automatu.


--------------------
Nie udzielam pomocy poprzez PW i nie mam GG.
Niektóre języki programowania, na przykład C# są znane z niezwykłej przenośności (kompatybilność ze wszystkimi wersjami Visty jest wiele warta).
Go to the top of the page
+Quote Post
bardakon
post 8.06.2010, 15:28:46
Post #3





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 1.06.2010

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

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.

Ten post edytował bardakon 8.06.2010, 15:33:01
Go to the top of the page
+Quote Post
pedro84
post 8.06.2010, 15:28:54
Post #4





Grupa: Nieautoryzowani
Postów: 2 249
Pomógł: 305
Dołączył: 2.10.2006

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

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

Ten post edytował pedro84 8.06.2010, 15:41:50


--------------------
Google knows the answer...
Go to the top of the page
+Quote Post
!*!
post 8.06.2010, 15:36:47
Post #5





Grupa: Zarejestrowani
Postów: 4 298
Pomógł: 447
Dołączył: 16.11.2006

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

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


--------------------
Nie udzielam pomocy poprzez PW i nie mam GG.
Niektóre języki programowania, na przykład C# są znane z niezwykłej przenośności (kompatybilność ze wszystkimi wersjami Visty jest wiele warta).
Go to the top of the page
+Quote Post
krzysztof_kf
post 8.06.2010, 15:41:58
Post #6





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

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

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;
Go to the top of the page
+Quote Post
bardakon
post 8.06.2010, 15:44:36
Post #7





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 1.06.2010

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

Nic nie pomogło, mogę przesłać pliki na maila jeżeli ktoś jest chętny.
Go to the top of the page
+Quote Post
pedro84
post 8.06.2010, 15:45:54
Post #8





Grupa: Nieautoryzowani
Postów: 2 249
Pomógł: 305
Dołączył: 2.10.2006

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

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"?


--------------------
Google knows the answer...
Go to the top of the page
+Quote Post
krzysztof_kf
post 8.06.2010, 16:06:33
Post #9





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

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

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 ?
Go to the top of the page
+Quote Post
bardakon
post 8.06.2010, 18:35:00
Post #10





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 1.06.2010

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

[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"
Go to the top of the page
+Quote Post
pedro84
post 8.06.2010, 18:56:55
Post #11





Grupa: Nieautoryzowani
Postów: 2 249
Pomógł: 305
Dołączył: 2.10.2006

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

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


--------------------
Google knows the answer...
Go to the top of the page
+Quote Post
bardakon
post 8.06.2010, 19:03:18
Post #12





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 1.06.2010

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

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.
Go to the top of the page
+Quote Post
pedro84
post 8.06.2010, 19:05:36
Post #13





Grupa: Nieautoryzowani
Postów: 2 249
Pomógł: 305
Dołączył: 2.10.2006

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

[CSS] pobierz, plaintext 
  1. overflow:hidden
[CSS] pobierz, plaintext
dla #all


--------------------
Google knows the answer...
Go to the top of the page
+Quote Post
bardakon
post 8.06.2010, 19:14:37
Post #14





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 1.06.2010

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

Nic.

Oto pliki: http://www.sendspace.pl/file/017838a2108262e319a4408
Go to the top of the page
+Quote Post
pedro84
post 8.06.2010, 19:15:29
Post #15





Grupa: Nieautoryzowani
Postów: 2 249
Pomógł: 305
Dołączył: 2.10.2006

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

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.


--------------------
Google knows the answer...
Go to the top of the page
+Quote Post
thek
post 8.06.2010, 19:26:16
Post #16





Grupa: Moderatorzy
Postów: 4 362
Pomógł: 714
Dołączył: 12.02.2009
Skąd: Jak się położę tak leżę :D
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.


--------------------
Najpierw był manual... Jeśli tam nie zawarto słów mądrości to zapytaj wszechwiedzącego Google zadając mu własciwe pytania. A jeśli i on milczy to Twój problem nie istnieje :D
Go to the top of the page
+Quote Post
krzysztof_kf
post 8.06.2010, 19:48:33
Post #17





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

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

Nie działa ci centrowanie bo w ALL masz w szerokości strony ; zamiast po width: przypatrz się biggrin.gif

Ten post edytował krzysztof_kf 8.06.2010, 19:49:36
Go to the top of the page
+Quote Post
bardakon
post 9.06.2010, 22:58:27
Post #18





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 1.06.2010

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

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
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · 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: Przełącz na: Standardowy · 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: 14.08.2025 - 11:05
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn