Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [css]Rozszerzanie rodzica przez dziecko
goped
post
Post #1





Grupa: Zarejestrowani
Postów: 156
Pomógł: 0
Dołączył: 28.11.2003
Skąd: gliwice

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

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?(IMG:http://forum.php.pl/style_emoticons/default/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.

Ten post edytował goped 25.01.2008, 17:40:26
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
arecki
post
Post #2





Grupa: Zarejestrowani
Postów: 222
Pomógł: 35
Dołączył: 6.02.2005

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

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
Go to the top of the page
+Quote Post

Posty w temacie
- goped   [css]Rozszerzanie rodzica przez dziecko   25.01.2008, 16:39:25
- - em-ba   [PHP] pobierz, plaintext <?php#kontener { posit...   25.01.2008, 16:44:33
- - goped   Nic nie zmienilo, inne pomysly?   25.01.2008, 17:04:21
- - bim2   A co się miało zmienić? ~em-ba napisał co jest ...   25.01.2008, 17:59:23
- - goped   Poprawilem. Prosze wymyslcie cos, bo mnie juz rece...   25.01.2008, 18:32:31
- - arecki   Nie wiem dlaczego ale jak masz position:absolute t...   25.01.2008, 20:10:02
- - goped   Dzieki   26.01.2008, 23:26:41

« 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: 6.10.2025 - 11:10
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn