Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css]Rozszerzanie rodzica przez dziecko
Forum PHP.pl > Forum > Przedszkole
goped
25.01.2008, 16:39:25
Czesc. Moj problem jest nastepujacy, jezeli mam kod:

[HTML] pobierz, plaintext 
  1. <div style="position:relative; overflow:hidden; width:300px; background-color:green;">
  2.      <div style="position:asolute;  float: left;width: 100px; background-color:red;  margin: 0 0 -20000px 0; padding: 0 0 20000px 0;" ><br>test<br><br>test<br><br>test<br><br>test<br><br>test<br></div>
  3.      <div style=" position:asbsolute; float: left;width: 100px; background-color:blue;  margin: 0 0 -20000px 0; padding: 0 0 20000px 0;" > </div>
  4. </div>
[HTML] pobierz, plaintext


to kontener, ten pierwszy div, rozszerza sie razem z pozostalymi div'ami, wiec jest ok.
Niestety, nie wiem czemu, ale jak mam kod:
[HTML] pobierz, plaintext 
  1. <HTML>
  2. <HEAD>
  3. <TITLE>layout full bez ciecia</TITLE>
  4. <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250">
  5. <!-- ImageReady Styles (layout full bez ciecia.psd) -->
  6. <STYLE TYPE="text/css">
  7. <!--
  8. #kontener {
  9. 	position:relative;
  10. 	width:1200px;
  11. 	margin:0 auto;
  12. 	margin-top:opx;
  13. 	background-color:green;
  14. }
  15.  
  16. #logo {
  17. 	position:absolute;
  18. 	left:0px;
  19. 	top:0px;
  20. 	width:1000px;
  21. 	height:213px;
  22. }
  23.  
  24. #pasek {
  25. 	position:absolute;
  26. 	left:0px;
  27. 	top:213px;
  28. 	width:1000px;
  29. 	height:25px;
  30. }
  31.  
  32. #stalegora {
  33. 	position:absolute;
  34. 	left:0px;
  35. 	top:238px;
  36. 	width:1000px;
  37. 	height:93px;
  38. }
  39.  
  40. #menu {
  41. 	position:absolute;
  42. 	left:0px;
  43. 	top:331px;
  44. 	width:244px;
  45. 	height:539px;
  46. }
  47.  
  48. #tresc {
  49. 	position:absolute;
  50. 	left:244px;
  51. 	top:331px;
  52. 	width:756px;
  53. 	height:539px;
  54. }
  55.  
  56. #stopka {
  57. 	position:absolute;
  58. 	left:0px;
  59. 	top:870px;
  60. 	width:1000px;
  61. 	height:80px;
  62. }
  63.  
  64. -->
  65. </STYLE>
  66. <!-- End ImageReady Styles -->
  67. </HEAD>
  68. <BODY STYLE="background-color:#FFFFFF;">
  69. <!-- ImageReady Slices (layout full bez ciecia.psd) -->
  70. <div id="kontener">
  71. <DIV ID="logo">
  72. 	<IMG SRC="images/index_01.jpg" WIDTH=1000 HEIGHT=213 ALT="">
  73. </DIV>
  74. <DIV ID="pasek">
  75. 	<IMG SRC="images/index_02.jpg" WIDTH=1000 HEIGHT=25 ALT="">
  76. </DIV>
  77. <DIV ID="stalegora">
  78. 	<IMG SRC="images/index_03.jpg" WIDTH=1000 HEIGHT=93 ALT="">
  79. </DIV>
  80. <DIV ID="menu">
  81. 	<IMG SRC="images/index_04.jpg" WIDTH=244 HEIGHT=539 ALT="">
  82. </DIV>
  83. <DIV ID="tresc">
  84. 	<IMG SRC="images/index_05.jpg" WIDTH=756 HEIGHT=539 ALT="">
  85. </DIV>
  86. <DIV ID="stopka">
  87. 	<IMG SRC="images/index_06.jpg" WIDTH=1000 HEIGHT=80 ALT="">
  88. </DIV>
  89. </div>
  90. <!-- End ImageReady Slices -->
  91. </BODY>
  92. </HTML>
[HTML] pobierz, plaintext


To kontener glowny sie nie rozszerza, i nie wiem czemu, moze umialby mi ktos to wyjasnic?snitch.gif
Grafika ma szerokosc 1000px, wiec specjalnie dalej 1200px dla kontenera zeby moc zobaczyc czy sie nie chowa pod sdjeciami, jednak nie. Wiecej, jezeli ustawie mu jakas wielkosc(height) to jest tylko tyle zielonego ile ustawilem, ale strona jest cala. Sprawa zmienia sie dopiero po ustawieniu overflow:hidden;, wtedy to pokazuje sie tylko tyle strony ile ustawie w kontenerze. Ktos wie jak zrobic zeby wnetrze kontenera rozszerzylo go jak w pierwszym przypadku sie dzieje? Dzieki za odpowiedz, pozdrawiam.
em-ba
25.01.2008, 16:44:33 
[PHP] pobierz, plaintext 
  1. <?php
  2. #kontener {
  3. 	position:relative;
  4. 	width:1200px;
  5. 	margin:0 auto;
  6. 	margin-top:opx;  //tu nie powinno czasem być 0px?
  7. 	background-color:green;
  8. ?>
[PHP] pobierz, plaintext
goped
25.01.2008, 17:04:21
Nic nie zmienilo, inne pomysly?
bim2
25.01.2008, 17:59:23
A co się miało zmienić? blinksmiley.gif
~em-ba napisał co jest źle. Poprawiłeś? smile.gif Tzn, nie wiem czy skopiowałes to na "żywca" czy poprawiłeś margin-top winksmiley.jpg
goped
25.01.2008, 18:32:31
Poprawilem. Prosze wymyslcie cos, bo mnie juz rece opadaja, caly dzien siedze nad tym i kurcze nie dziala :/
arecki
25.01.2008, 20:10:02
Nie wiem dlaczego ale jak masz position:absolute to właśnie coś takiego się dzieje. Można to obejść w taki sposób, że tworzysz jeszcze jednego diva w którym trzymasz #menu i #tresc a ustawionymi atrybutami float i działa. Tylko trzeba pamiętać aby ten dodatkowy DIV miał ustawionie display na "inline-block". Inaczej się nie "rozszerza" razem z innymi DIV'ami które ma w środku. Ten przykład działa. Sprawdziłem.

[HTML] pobierz, plaintext 
  1. <HTML>
  2. <HEAD>
  3. <TITLE>layout full bez ciecia</TITLE>
  4. <META HTTP-EQUIV="Content-Type" CONTENT="text/html; iso-8859-2">
  5. <STYLE TYPE="text/css">
  6. #kontener {
  7. width:1200px;
  8. margin:0 auto;
  9. background-color:green;
  10. }
  11.  
  12. #logo {
  13. width:1000px;
  14. height:213px;
  15. background-color:#d00;
  16. }
  17.  
  18. #pasek {
  19. width:1000px;
  20. height:25px;
  21. background-color:#00d;
  22. }
  23.  
  24. #stalegora {
  25. width:1000px;
  26. height:93px;
  27. background-color:#d00;
  28. }
  29.  
  30. #row {
  31. width:1000px;
  32. display:inline-block;
  33. overflow:auto;
  34. }
  35.  
  36. #menu {
  37. float:left;
  38. width:244px;
  39. background-color:#00d;
  40. height:539px;
  41. }
  42.  
  43. #tresc {
  44. float:left;
  45. width:756px;
  46. height:539px;
  47. background-color:#d00;
  48. }
  49.  
  50. #stopka {
  51. width:1000px;
  52. height:80px;
  53. background-color:#00d;
  54. }
  55.  
  56. </STYLE>
  57. </HEAD>
  58. <BODY STYLE="background-color:#FFFFFF;">
  59. <div id="kontener">
  60. 	<DIV ID="logo">
  61. 		<IMG SRC="images/index_01.jpg" WIDTH=1000 HEIGHT=213 ALT="">
  62. 	</DIV>
  63. 	<DIV ID="pasek">
  64. 		<IMG SRC="images/index_02.jpg" WIDTH=1000 HEIGHT=25 ALT="">
  65. 	</DIV>
  66. 	<DIV ID="stalegora">
  67. 		<IMG SRC="images/index_03.jpg" WIDTH=1000 HEIGHT=93 ALT="">
  68. 	</DIV>
  69. 	<div id="row">
  70. 		<DIV ID="menu">
  71. 			<IMG SRC="images/index_04.jpg" WIDTH=244 HEIGHT=539 ALT="">
  72. 		</DIV>
  73. 		<DIV ID="tresc">
  74. 			<IMG SRC="images/index_05.jpg" WIDTH=756 HEIGHT=539 ALT="">
  75. 		</DIV>
  76. 	</div>
  77. 	<DIV ID="stopka">
  78. 		<IMG SRC="images/index_06.jpg" WIDTH=1000 HEIGHT=80 ALT="">
  79. 	</DIV>
  80. </div>
  81. </BODY>
  82. </HTML>
[HTML] pobierz, plaintext
goped
26.01.2008, 23:26:41
Dzieki smile.gif
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.