Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS][HTML]Rozciąganie div'ów! Pomocy!
klapaucius
post 7.09.2011, 19:05:01
Post #1





Grupa: Zarejestrowani
Postów: 223
Pomógł: 3
Dołączył: 4.07.2009
Skąd: Kraków

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

Witam. Mam problem! Chciałbym zrobić coś takiego: stworzyć 3 divy obok siebie:
DIV1 | DIV2 | DIV3

W DIV2 znajduje się tekst. Chcę zrobić tak, aby jeśli DIV2 się rozciągnie od dużej ilości tekstu, to aby DIV1 i DIV2 również się rozciągnęły. Jak to zrobic?
Go to the top of the page
+Quote Post
m_ikolaj
post 7.09.2011, 19:13:33
Post #2





Grupa: Zarejestrowani
Postów: 16
Pomógł: 3
Dołączył: 19.07.2011

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

css: float:left + określona szerokość (width) ?
Go to the top of the page
+Quote Post
Daiquiri
post 7.09.2011, 19:29:45
Post #3





Grupa: Administratorzy
Postów: 1 552
Pomógł: 211
Dołączył: 7.07.2009
Skąd: NJ
"equal height columns css" w google i znajdziesz coś dla siebie, np. coś takiego lub takiego.
Go to the top of the page
+Quote Post
luck
post 7.09.2011, 20:01:58
Post #4





Grupa: Zarejestrowani
Postów: 317
Pomógł: 58
Dołączył: 6.11.2005

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

Ja standardowo polecam w takiej sytuacji faux columns - po prostu osobiście wolę takie rozwiązanie, niż "divitis" w samym CSS wink.gif


--------------------
extraweb.pl
Go to the top of the page
+Quote Post
klapaucius
post 7.09.2011, 21:00:49
Post #5





Grupa: Zarejestrowani
Postów: 223
Pomógł: 3
Dołączył: 4.07.2009
Skąd: Kraków

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

Przepraszam, ale jestem trochę ciemny... Oto jak wygląda mój kod:
[HTML] pobierz, plaintext 
  1. <div id="srodek">
  2.    <div id="div1"></div>
  3.    <div id="div2">Jakiś tekst<br>z odstepem</div>
  4.    <div id="div3"></div>
  5. </div>
[HTML] pobierz, plaintext


a tutaj css:
[HTML] pobierz, plaintext 
  1. #div1 {
  2. 	float: left;
  3. 	height: 100%;
  4. 	width: 14px;
  5. 	background-image: url(images/layout_21.png);
  6. 	background-repeat: repeat-y;
  7. }
  8. #div2 {
  9. 	background-color: #c9e2a3;
  10. 	width: 503px;
  11. 	float: left;
  12. }
  13. #div3 {
  14. 	background-image: url(images/layout_23.png);
  15. 	float: left;
  16. 	height: 100%;
  17. 	width: 30px;
  18. }
  19.  
[HTML] pobierz, plaintext


I jak zrobić, aby te divy 1 i 2 odpowiednio się rozciągały wraz z divem2?
Go to the top of the page
+Quote Post
!*!
post 8.09.2011, 07:02:24
Post #6





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

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

http://jsfiddle.net/Q48Bv/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
klapaucius
post 8.09.2011, 18:20:37
Post #7





Grupa: Zarejestrowani
Postów: 223
Pomógł: 3
Dołączył: 4.07.2009
Skąd: Kraków

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

Kurcze wyczerpaliście już chyba wszystkie możliwe sposoby na ten problem. Ja jednak dalej nie mogę sobie z nim poradzić... Kurcze! Nie wiem.. Wrzuciłem całą stronkę do winrar'a... Jeśli by ktoś mógł looknąć byłbym wdzieczny!
Link:
http://www.speedyshare.com/files/30233020/div.rar
Tutaj macie kod:
[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. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Dokument bez tytułu</title>
  6. <link href="style.css" rel="stylesheet" type="text/css" />
  7. </head>
  8. <body>
  9. <div id = "kontener">
  10.     <div id = "div1"></div>
  11.     <div id = "div2">Jakiś tekst z odstępami<br  />kolejna linijka</div>
  12.   	<div id = "div3"></div>
  13. </div>
  14. </body>
  15. </html>
[HTML] pobierz, plaintext

CSS:
[HTML] pobierz, plaintext 
  1. #kontener {
  2. 	background-color: #ccc;
  3. 	border: 1px solid #b9babc;
  4. 	overflow: hidden;
  5. 	width: 546px;
  6. 	overflow: hidden;
  7. }
  8. #div1 {
  9. 	display: table-cell;
  10. 	vertical-align: top;
  11. 	background-image: url(layout_21.png);
  12. 	background-repeat: repeat-y;
  13. 	width: 13px;
  14. 	float: left;
  15. }
  16. #div2 {
  17. 	display: table-cell;
  18. 	vertical-align: top;
  19. 	background-color: #c9e2a3;
  20. 	width: 503px;
  21. 	float: left;
  22. }
  23. #div3 {
  24. 	display: table-cell;
  25. 	vertical-align: top;
  26. 	background-image: url(layout_23.png);
  27. 	background-repeat: repeat-y;
  28. 	width: 30px;
  29. 	float: left;
  30. }
[HTML] pobierz, plaintext


I jak widać Div 1 i div 2 wogle nie jest widoczny.. dlaczego on się nie rozciąga..?

Ten post edytował klapaucius 8.09.2011, 18:21:10
Go to the top of the page
+Quote Post
!*!
post 8.09.2011, 18:30:02
Post #8





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

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

Przejrzałeś link który Ci podałem? 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
« 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: Standardowy · Przełącz na: 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: 18.07.2025 - 12:04
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn