Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [css]Rozszerzanie rodzica przez dziecko
goped
post 25.01.2008, 16:39:25
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?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


--------------------
www.motorower.com.pl - kup sobie cos :]
Go to the top of the page
+Quote Post
em-ba
post 25.01.2008, 16:44:33
Post #2





Grupa: Zarejestrowani
Postów: 202
Pomógł: 3
Dołączył: 6.01.2008
Skąd: Mazowieckie

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

[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
Go to the top of the page
+Quote Post
goped
post 25.01.2008, 17:04:21
Post #3





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

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

Nic nie zmienilo, inne pomysly?


--------------------
www.motorower.com.pl - kup sobie cos :]
Go to the top of the page
+Quote Post
bim2
post 25.01.2008, 17:59:23
Post #4





Grupa: Zarejestrowani
Postów: 1 873
Pomógł: 152
Dołączył: 9.04.2006
Skąd: Berlin

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

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


--------------------
» Hern.as
» Move to Apple Music
Go to the top of the page
+Quote Post
goped
post 25.01.2008, 18:32:31
Post #5





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

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

Poprawilem. Prosze wymyslcie cos, bo mnie juz rece opadaja, caly dzien siedze nad tym i kurcze nie dziala :/


--------------------
www.motorower.com.pl - kup sobie cos :]
Go to the top of the page
+Quote Post
arecki
post 25.01.2008, 20:10:02
Post #6





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


--------------------
http://arecki.fornet.com.pl/site/
Go to the top of the page
+Quote Post
goped
post 26.01.2008, 23:26:41
Post #7





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

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

Dzieki smile.gif


--------------------
www.motorower.com.pl - kup sobie cos :]
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: 19.07.2025 - 07:50
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn