Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS][HTML]Automatyczna wysokość div'ów
porywacz
post
Post #1





Grupa: Zarejestrowani
Postów: 55
Pomógł: 0
Dołączył: 16.03.2012
Skąd: Austria

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


Witam, mam stronę internetową z trzema kolumnami. Wygląda to mniej więcej tak:
  1. <div id="all">
  2. <div id="header"></div>
  3. <div id="center_left"></div>
  4. <div id="center_center"></div>
  5. <div id="center_right"></div>
  6. <div id="footer"></div>
  7. </div>


Mój problem tkwi w tym, że w środkowej kolumnie przypisałem height wartość auto a pozostałym dwóm divom min-height: 700px;. Czy da się zrobić tak, że gdy środkowa kolumna będzie miała szerokość większą niż 700px to żeby pozostałe divy dopasowały jakoś tą szerokość? Obecnie gdy środkowa kolumna jest dłuższa niż 700px to pozostałe nie docierają do stopki :/ Bardzo proszę o pomoc smile.gif
Pozdrawiam ;p

Ten post edytował porywacz 17.06.2012, 10:53:20
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi (1 - 16)
!*!
post
Post #2





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

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


Użyj CSS i display:table dla nich, ewentualnie jak Ci to nie pasuje JS.

Ten post edytował !*! 17.06.2012, 10:55:57


--------------------
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
porywacz
post
Post #3





Grupa: Zarejestrowani
Postów: 55
Pomógł: 0
Dołączył: 16.03.2012
Skąd: Austria

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


z display:table cała strona się rozjeżdża haha.gif Jednej kolumny wgl nie ma biggrin.gif
Go to the top of the page
+Quote Post
!*!
post
Post #4





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

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


Cytat(porywacz @ 17.06.2012, 12:00:01 ) *
z display:table cała strona się rozjeżdża haha.gif Jednej kolumny wgl nie ma biggrin.gif

Widocznie robisz to źle. Wstaw kod http://jsfiddle.net/ i podaj link.


--------------------
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
porywacz
post
Post #5





Grupa: Zarejestrowani
Postów: 55
Pomógł: 0
Dołączył: 16.03.2012
Skąd: Austria

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


Strona jest już oskryptowana, więc trochę trudno "wyciągnąć" ze strony poszczególne fragmenty kodu biggrin.gif
Może napiszesz jak to powinno wyglądać? Dałem w css do wszystkich trzech kolumn display: table, nie wiem czy dobrze cię zrozumiałem >.<
Go to the top of the page
+Quote Post
!*!
post
Post #6





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

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


display:table dajesz tylko na div all, resztę w zależności jaki wynik chcesz osiągnąć, będą to inne parametry.


--------------------
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
porywacz
post
Post #7





Grupa: Zarejestrowani
Postów: 55
Pomógł: 0
Dołączył: 16.03.2012
Skąd: Austria

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


Nie rozumiem ;d Muszę do diva 'all' dodać display: table, a do tych divów w nim co?
Go to the top of the page
+Quote Post
!*!
post
Post #8





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

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


A przeczytałeś chociaż cokolwiek na temat tej właściwości? http://jsfiddle.net/HgCq6/


--------------------
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
porywacz
post
Post #9





Grupa: Zarejestrowani
Postów: 55
Pomógł: 0
Dołączył: 16.03.2012
Skąd: Austria

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


Owszem, przeczytałem. A piszę bo nadal mi nie działa tongue.gif
robię tak jak ty i mi się rozjeżdża stronka ;/

css:

  1. #center {
  2. display: table;
  3. width: 900px;
  4. margin: 0 auto 0 auto;
  5. }
  6.  
  7. #center_left {
  8. display: table-cell;
  9. margin: 0 auto;
  10. float: left;
  11. width: 150px;
  12. background-color: white;
  13. }
  14.  
  15. #center_center {
  16. display: table-cell;
  17. float: left;
  18. margin: 0 7px 0 7px;
  19. width: 536px;
  20. background-color: white;
  21. }
  22.  
  23. #center_right {
  24. display: table-cell;
  25. text-align: justify;
  26. color: #a60000;
  27. float: right;
  28. width: 200px;
  29. background-color: white;
  30. margin: 0;
  31. }

Robię coś źle?
Go to the top of the page
+Quote Post
!*!
post
Post #10





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

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


Usuń float.


--------------------
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
porywacz
post
Post #11





Grupa: Zarejestrowani
Postów: 55
Pomógł: 0
Dołączył: 16.03.2012
Skąd: Austria

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


Ok, dzięki. Już jakoś to wygląda, lecz nadal coś jest nie tak biggrin.gif
Lewy div i prawy do siebie przylegają mimo to, że w środkowym mam margin: 0 7px 0 7px; . Jak to naprawić?
Aha i między tymi divami a stopką jest dość spory odstęp ;/

Ten post edytował porywacz 17.06.2012, 16:12:45
Go to the top of the page
+Quote Post
!*!
post
Post #12





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

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


Wklej to tu http://jsfiddle.net


--------------------
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
porywacz
post
Post #13





Grupa: Zarejestrowani
Postów: 55
Pomógł: 0
Dołączył: 16.03.2012
Skąd: Austria

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


http://jsfiddle.net/kEZnf/
Go to the top of the page
+Quote Post
!*!
post
Post #14





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

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


Chodzi Ci o treść? http://jsfiddle.net/kEZnf/1/


--------------------
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
porywacz
post
Post #15





Grupa: Zarejestrowani
Postów: 55
Pomógł: 0
Dołączył: 16.03.2012
Skąd: Austria

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


niee ;D Patrz: www..php to ta moja strona ;D
chodzi mi o to, że między lewą kolumną a środkową powinna być taka przerwa jak między środkową a prawą ;D I jeszcze ten odstęp nad stopką ;oo
I nie śmiać mi się ze strony, jestem początkujący ^^

Ten post edytował porywacz 17.06.2012, 17:41:56
Go to the top of the page
+Quote Post
!*!
post
Post #16





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

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


http://jsfiddle.net/kEZnf/2/


--------------------
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
porywacz
post
Post #17





Grupa: Zarejestrowani
Postów: 55
Pomógł: 0
Dołączył: 16.03.2012
Skąd: Austria

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


porywacz.onuse.pl/czitypl
Teraz jest jeszcze gorzej haha.gif jeszcze jakieś pomysły?

Problem rozwiązany, wystarczyło dodać między te 3 kolumny jeszcze 2 divy o szerokości 7px (oczywiście puste haha.gif) biggrin.gif
Temat do zamknięcia ^^

Ten post edytował porywacz 17.06.2012, 17:41:19
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 20.08.2025 - 10:33