Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Rociąganie nadrzędnego diva w zależności od podrzędnego
Forum PHP.pl > Forum > Przedszkole
punoljoe
10.07.2012, 19:53:56
Wiem , że temat jest odgrzewany , ale po kilkuuuu dobrych godzinach rozkminiania tego banalnego problemu mam dość. Chciałem rozciągnąć div#c1 i potem w ten sam sposób div#d1. Zróbmy jeden , a drugi będzie analogicznie rozwiązany. 

[HTML] pobierz, plaintext 
  1.  
  2.  
  3. <div id="x">
  4. <div id="y"><br />PL | GB | D | FR | S &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /><br /></div>
  5.  
  6. <div id="z" ><br /> </div>
  7. <div id="a" > <br /></div>
  8. <div id="b" ><br /><br /> </div>
  9. <div id="c" > 
  10. <div id="c1" > 
  11.  <br /><br /><br /><br /><br /><br />
  12. </div>
  13. </div> 
  14.  
  15. <div id="d" >
  16. <div id="d1" >
  17.  <br /><br /><br /><br /><br /><br /><br /><br />
  18. </div>
  19.  </div>
  20.  
  21. <div id="e" > <br /></div>
  22. <div id="f" > <br /><br /><br /><br /></div>
  23.  
[HTML] pobierz, plaintext 




[CSS] pobierz, plaintext 
  1. html,body {
  2.      background-color:orange;
  3.      margin:auto;
  4. width: 100%;
  5. height:100%;
  6.      text-decoration:none;
  7. 	  font-family:  Verdana;
  8. 	  line-height: 10px;
  9.      }
  10.  
  11. div {
  12.    margin: auto;
  13.     border  : none;
  14.     padding : auto;
  15.  
  16. }
  17.  
  18. #x {
  19. width:100%;
  20. }
  21.  
  22. #y {
  23. background-color:#000;
  24. width: 100%;
  25. text-align: right;
  26. clear: left;
  27. float: left;
  28. }
  29.  
  30. #z { 
  31. width: 100%;
  32. background-color:#FFF;
  33. clear: left;
  34. float: left;
  35. }
  36.  
  37. #a { 
  38. width: 100%;
  39. background-color:#04B486;
  40. clear: left;
  41. float: left;
  42. }
  43.  
  44. #b { 
  45. width: 100%;
  46. background-color:#007777;
  47. clear: left;
  48. float: left;
  49. }
  50.  
  51. #c { 
  52. overflow: hidden;
  53. width: 100%;
  54. clear: left;
  55. float: left;
  56. background-color:#FFF;
  57. }
  58. #c1 { 
  59. width: 1000px;
  60. background-color: red;
  61. position:absolute;
  62. left:50%;
  63. margin-left:-500px;
  64. }
  65.  
  66.  
  67. #d { 
  68. width: 100%;
  69. background-color:brown;
  70.  
  71.   margin: auto;
  72.         float : none;
  73. display: block;
  74. margin: auto;
  75. padding:auto;
  76.  
  77.  
  78. }
  79.  
  80.  
  81.  
  82. #e { 
  83. width: 100%;
  84. background-color:#FFF;
  85. clear: left;
  86. float: left;
  87. }
  88.  
  89. #f { 
  90. clear: both;
  91. width: 100%;
  92. background-color:#FFF;
  93. }
[CSS] pobierz, plaintext




próbowałem rozwiązania polegającego na wstawieniu clear:both;

[HTML] pobierz, plaintext 
  1. <div id="c" > 
  2. <div id="c1" > 
  3.  <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  4. </div>
  5. <div style="clear: both;"></div>
  6. </div>
[HTML] pobierz, plaintext


a nawet wynalazek typu :

[JAVASCRIPT] pobierz, plaintext 
  1. function setheight() {
  2.         if(document.getElementById('c1').offsetHeight > document.getElementById('c').offsetHeight) {
  3.         document.getElementById('c').style.height = document.getElementById('c1').offsetHeight+'px';
  4.         }}
[JAVASCRIPT] pobierz, plaintext


jednak wciąż nie działa...
ktoś potrafi pomóc?
Damonsson
10.07.2012, 20:01:42
Co znaczy nie działa?

#c1 rozciąga się jak stare gacie na płocie.
punoljoe
10.07.2012, 20:06:52
ale #c za nim nie spaceruje ... chcę aby rozciągało #c ... a tym samym kolejne dwa divy , które są później będą prawidłowo wyświatkone. Dane rozciągają #c1 , a div #c nie reaguje. Próbowałem przypisać wysokość #c przez pobranie przy pomocy js wartości wysokosci z #c1. No ale też nie zadziałało :/
Damonsson
10.07.2012, 20:11:56
No to nie rozciąga się #c a nie #c1 jak napisałeś wyżej wink.gif

DLatego, że pozycjonujesz #c1 absolute.

Co chcesz osiągnąć? Po co Ci div w divie?

Może próbujesz zrobić coś niepotrzebnie naokoło.
punoljoe
10.07.2012, 20:20:04
na jednym z pasków chcę zrobić menu ( id="c1" ) a na drugim zawartość strony (id="d1"). Wcześniejsze i późniejsze to paseki na których są linki do wyboru języków , grafiki itd. Chcę div w divie, aby c1 i d1 wypośrodkować z szerokością 1000px. Po to też position : absolute;
Damonsson
10.07.2012, 20:26:37
Nic z tego nie rozumiem sorry ;P

Najlepiej jakbyś pokazał grafikę jak to ma wyglądać.

Absolute używa się bardzo rzadko, a na pewno nie do wyśrodkowania elementów.
kristaps
10.07.2012, 20:33:19
Trochę trudno to zrozumieć, pewnie dlatego, że dopiero zaczynasz. Spróbuj przedstawić to w jakimś programie graficznym, od biedy może być paint.

Edit: Damonsson mnie ubiegł, no i to całkiem sporo. wink.gif
punoljoe
10.07.2012, 20:41:20
http://www.fotosik.pl/pokaz_obrazek/1c51ba581fd4112f.html#

to czerwone pole , to div#c1. Z miejsca z którego się zaczyna (pomiędzy niebieskim a brązowym) powinien być pasek biały z div#c. (pod czerwonym + po bokach)

_______________________________
to jest rzeczywisty prtscr stanu obecnego.
droslaw
10.07.2012, 21:32:28
Nie stosuje się tu pozycjonowanie absolutnego, Odpowiednie marginesy załatwią sprawę.
http://jsfiddle.net/bZDuP/1/
punoljoe
10.07.2012, 22:46:03
poważnie? ! ohmy.gif Jeszcze raz przeanalizuję , uproszczę i wrzucę, bo mnie to umęczyło. DZIĘKUJĘ DROSLAW. Bardzo mi pomogłeś.

style.css

[CSS] pobierz, plaintext 
  1. html,body {
  2.      margin:0;
  3. 	 padding:0;
  4. 	  text-decoration:none;
  5. 	  font-family:  Verdana;
  6. 	  line-height: 10px;
  7.      }
  8.  
  9. div {
  10. margin: auto;
  11. border  :0;
  12. padding:0;
  13. }
  14.  
  15. #x {
  16. width:100%;
  17. }
  18.  
  19. #y {
  20. margin:0;
  21. background-color:#000;
  22. width: 100%;
  23. text-align: right;
  24. clear: left;
  25. float: left;
  26. }
  27.  
  28. #z { 
  29. margin:0;
  30. width: 100%;
  31. background-color:#FFF;
  32. clear: left;
  33. float: left;
  34. }
  35.  
  36. #a { 
  37. margin:0;
  38. width: 100%;
  39. background-color:#04B486;
  40.  
  41. }
  42.  
  43. #b { 
  44. margin:0;
  45. width: 100%;
  46. background-color:#007777;
  47.  
  48. }
  49.  
  50. #c { 
  51.  margin:0;
  52. overflow: hidden;
  53. width: 100%;
  54. background-color:#FFF;
  55. }
  56. #c1 { 
  57. margin:auto;
  58. width: 1000px;
  59. background-color: red;
  60. }
  61.  
  62.  
  63. #d { 
  64. margin:0;
  65. width: 100%;
  66. background-color:brown;
  67. overflow: hidden;
  68. }
  69. #d1 { 
  70. margin:auto;
  71. width: 1000px;
  72. background-color:green;
  73.  
  74. }
  75.  
  76.  
  77. #e { 
  78. margin:0;
  79. width: 100%;
  80. background-color:#bbb;
  81. }
  82.  
  83. #f { 
  84. margin:0;
  85. clear: both;
  86. width: 100%;
  87. background-color:#ddd;
  88. bottom: 0;
  89. position:fixed;
  90.  
  91. }
[CSS] pobierz, plaintext



index.html 

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> 
  3. <head>
  4. 	<meta http-equiv="Content-type" content="application/xhtml+xml; charset=iso-8859-2" />
  5. <META HTTP-EQUIV="Creation-date" CONTENT="2012.06.03">
  6. <META NAME="Description" CONTENT="">
  7. <META NAME="Author" CONTENT="punoljoe">
  8. <META NAME="Generator" CONTENT="">
  9. <TITLE> </TITLE>
  10. <link rel="shortcut icon" href="img/ikona.ico">
  11.  
  12. <link rel='stylesheet' type='text/css' id='styl' href='style.css'/>
  13.  
  14. </HEAD>
  15. <body>
  16.  
  17. <div id="x">
  18. 	<div id="y"><br />PL | GB | D | FR | S        <br /><br /></div>
  19.  
  20. 	<div id="z" ><br /> </div>
  21. 	<div id="a" > <br /></div>
  22. 	<div id="b" ><br /><br /><br /><br /><br /><br /><br /><br /><br /> </div>
  23. 	<div id="c" > 
  24. 		<div id="c1" > 
  25. 		<br /><br /><br /><br />
  26. 		</div>
  27. 	</div> 
  28.  
  29. 	<div id="d" >
  30. 		<div id="d1" >
  31. 		<br /><br /><br /><br /><br /><br />
  32. 		</div>
  33. 	</div>
  34.  
  35. 	<div id="e" > <br /><br /></div>
  36. 	<div id="f" > <br /><br /><br /><br /><br /><br /></div>
  37.  
  38. </div>
  39.  
  40. </BODY>
  41. </HTML>
[HTML] pobierz, plaintext


Szkielet stronki , gdzie:
div#x - główny kontener
div#y - kontener językowy (tak ładnie sobie go nazywam smile.gif )
div#z,a,b,c,d,e,f- divy będące kolejno pod sobą na 100% strony;
div#c1 i div#d1 - są to divy wypośrodkowane, o szerokości 1000px. Wraz z zawartością w nich rozwijają się rodzice , czyli div#c i div#d.

dodam tutaj kilka uwag (dla większości zapewne oczywistych), które mogą się przydać ludziom przechodzącym z tabelek na divy (tak jak ja się z tym męczyłem,męczę). Tak więc jeśli chcecie wypośrodkować div, są conajmniej dwie metody. Pierwsza sprawdza się przy rozwijaniu rodzica, druga nie ( z racji position:absolute;). 1) ramka wypośrodkowane ma mieć margin:auto; ,reszta margin:0; 2) position:absolute; left:50%; margin-left:-500px; (gdy pole wypośrodkowane ma 1000px).

Czy klauzury
clear: left;
float: left;
są konieczne? raczej nie, ale tak działa i nie szkodzi smile.gif

Szkoląc się z css w kontekście divów napotkałem informację, że divy nie reagują na procentowe odniesienia, jeśli w nadrzędnym kontenerze nie ma podanego wymiaru. Tak więc prawdopodobnie przy określeniach np. 29% ... nie będzie działało. Chyba...

za laicki post wybaczcie, ale dziś przeszukałem duży kawałek internetu... licząc właśnie po cichu, że coś takiego znajdę... nie znalazłem. Tak więc sam go teraz dumnie dodam biggrin.gif Pozdrawiam i jeszcze raz dzięki za pomoc dla Droslawa ... i innym za chęci.
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.