Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS]Rociąganie nadrzędnego diva w zależności od podrzędnego
punoljoe
post
Post #1





Grupa: Zarejestrowani
Postów: 52
Pomógł: 2
Dołączył: 4.07.2008

Ostrzeżenie: (30%)
XX---

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?
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
punoljoe
post
Post #2





Grupa: Zarejestrowani
Postów: 52
Pomógł: 2
Dołączył: 4.07.2008

Ostrzeżenie: (30%)
XX---

poważnie? ! (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/biggrin.gif) Pozdrawiam i jeszcze raz dzięki za pomoc dla Droslawa ... i innym za chęci.

Ten post edytował punoljoe 10.07.2012, 22:47:52
Go to the top of the page
+Quote Post

Posty w temacie
- punoljoe   [CSS]Rociąganie nadrzędnego diva w zależności od podrzędnego   10.07.2012, 19:53:56
- - Damonsson   Co znaczy nie działa? #c1 rozciąga się jak stare...   10.07.2012, 20:01:42
- - punoljoe   ale #c za nim nie spaceruje ... chcę aby rozciąg...   10.07.2012, 20:06:52
- - Damonsson   No to nie rozciąga się #c a nie #c1 jak napisałeś ...   10.07.2012, 20:11:56
- - punoljoe   na jednym z pasków chcę zrobić menu ( id="c1...   10.07.2012, 20:20:04
- - Damonsson   Nic z tego nie rozumiem sorry ;P Najlepiej jakbyś...   10.07.2012, 20:26:37
- - kristaps   Trochę trudno to zrozumieć, pewnie dlatego, że dop...   10.07.2012, 20:33:19
- - punoljoe   http://www.fotosik.pl/pokaz_obrazek/1c51ba581fd411...   10.07.2012, 20:41:20
- - droslaw   Nie stosuje się tu pozycjonowanie absolutnego, Odp...   10.07.2012, 21:32:28
- - punoljoe   poważnie? ! Jeszcze raz przeanalizuję , upros...   10.07.2012, 22:46:03

« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 25.08.2025 - 04:02
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn