Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Div nie zmienia wysokości
Forum PHP.pl > Forum > Przedszkole
qolec
1.07.2009, 13:47:44
Mam problem z divem. Ten sam div w zależności od zawartości zmienia wysokość albo jej nie zmienia.

A mianowicie mam div ustawiony w css

[HTML] pobierz, plaintext 
  1. div.inside
  2.   {
  3.   width:710px;
  4.   min-height: 760px;
  5.   border: 1px solid black;
  6.   margin: 0;
  7.   padding: 0;
  8.   position: relative;
  9. }
[HTML] pobierz, plaintext


Div ten wykorzystuje w kilku podstronach

Na jednej z nich wewnątrz tego diva znajduje się formularz i tutaj jest problem bo część formularza przycina, tzn znajduje się jakby poza divem.
Na innej podstronie znajdują się dane tekstowe, obrazki, tabelki i bez problemu rozciąga go jak należy

Co może być tego przyczyną, że raz dane rozpychają diva a innym razem nie? Sprawdziłem dokładnie wszystko co się znajduje w div.inside i wszystkie divy są tam podomykane. Z góry dzięki za pomoc. Może są jeszcze jakieś atrybuty, o których zapomniałem?
Savage.Mephisto
1.07.2009, 13:51:11 
[HTML] pobierz, plaintext 
  1. div.inside {
  2.      width:710px;
  3.     min-height: 760px;
  4.     height: auto !important;
  5.     height: 760px;
  6.     border: 1px solid black;
  7.     margin: 0;
  8.     padding: 0;
  9.     position: relative;
  10. }
[HTML] pobierz, plaintext
qolec
1.07.2009, 13:57:29
Cytat(Savage.Mephisto @ 1.07.2009, 14:51:11 ) *
[HTML] pobierz, plaintext 
  1. div.inside {
  2.      width:710px;
  3.     min-height: 760px;
  4.     height: auto !important;
  5.     height: 760px;
  6.     border: 1px solid black;
  7.     margin: 0;
  8.     padding: 0;
  9.     position: relative;
  10. }
[HTML] pobierz, plaintext


Tak niestety też próbowałem, nic to nie dało sad.gif
webber
1.07.2009, 14:02:26
Dodaj do diva,
Kod
overflow: hidden;
qolec
1.07.2009, 14:05:08
Cytat(webber @ 1.07.2009, 15:02:26 ) *
Dodaj do diva,
Kod
overflow: hidden;


Dodałem. Nic nie pomogło.
webber
1.07.2009, 14:07:08
Wklej kod gdzie masz ten formularz, po za tym, po kiego Ci position: relative; przy divie "inside"? smile.gif
qolec
1.07.2009, 14:33:28
Cytat(webber @ 1.07.2009, 15:07:08 ) *
Wklej kod gdzie masz ten formularz, po za tym, po kiego Ci position: relative; przy divie "inside"? smile.gif


[HTML] pobierz, plaintext 
  1. <div class="strona">
  2. <div class="menutop">
  3. Tu jest menu górne</div><!--koniec div.menutop-->
  4. <div class="baner" style="float: none; clear: both">
  5. <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="920" height="256" id="savepol" align="center">
  6. <param name="allowScriptAccess" value="sameDomain" />
  7. <param name="movie" value="images/intro.swf" />
  8. <param name="quality" value="high" />
  9. <param name="bgcolor" value="#f36f21" />
  10. <embed src="images/intro.swf" quality="high" bgcolor="#ffffff" width="920" height="256" name="savepol" align="center" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
  11. </object></div>
  12.  <div class="menuleft" style="float: left; clear: both;">
  13.  Tu jest menu boczne
  14.  </div><!--koniec div.menuleft-->
  15.  <div class="inside" style="float: right;">
  16.  <div class="header"><p class="header">Zapytanie ofertowe</p></div><!--koniec div.header-->
  17.  <div class="subheader" style="float: none; clear:both; position: relative; top: 40px;"><p class="subheader">Szanowni Państwo!</p></div><!--koniec div.subheader-->
  18.  <div class="insidetext" style="float: none; clear: both; position: relative; top: 50px; text-align: justify"><p>Zachęcamy do skorzystania z formularza zapytania ofertowego.</p>
  19.  <p>Zapewniamy, że wszelkie dane przez nas gromadzone i przetwarzane nie są udostępniane ani przekazywane osobom trzecim zgodnie z postanowieniami dotyczącymi postępowania przy przetwarzaniu danych osobowych osób fizycznych określonych w Ustawie z dnia 29 sierpnia 1997r. o ochronie danych osobowych (Dz. U. 1997 Nr 133, poz. 883).</p>
  20.  </div><!--koniec div.insidetext-->
  21.  <div class="subheader" style="float: none; clear:both; position: relative; top: 50px;"><p class="subheader">Prosimy o wypełnienie następujących pól:</p>
  22.  </div><!--koniec div.subheader-->
  23.  <div class="insidetext" style="float: none; clear: both; position: relative; top: 70px;">
  24.  <form name="zapytanie" method="post" action="zapytanie_ofertowe.php">
  25.  <input type="hidden" name="formtitle" value="Zapytanie ofertowe"/>
  26.  <div class="formname" style="float: left; position: relative;">Nazwa Firmy:</div><div class="formfield" style="float:left; position: relative;"><input type="text" name="nazwa_firmy" size="35" maxlength="70" value=""> <img src="images/ast25.png"></div>
  27.  <div class="formname" style="float: left; clear: both; position: relative;">Ulica:</div><div class="formfield" style="float:left; position: relative;"><input type="text" name="ulica" size="35" maxlength="70" value=""> <img src="images/ast25.png"></div>
  28.  <div class="formname" style="float: left; clear: both; position: relative;">Kod:</div><div class="formfield" style="float:left; position: relative;"><input type="text" name="kod" size="35" maxlength="70" value=""> <img src="images/ast25.png"></div>
  29.  <div class="formname" style="float: left; clear: both; position: relative;">Miasto:</div><div class="formfield" style="float:left; position: relative;"><input type="text" name="miasto" size="35" maxlength="70" value=""> <img src="images/ast25.png"></div>
  30.  <div class="formname" style="float: left; clear: both; position: relative;">Telefon:</div><div class="formfield" style="float:left; position: relative;"><input type="text" name="telefon" size="35" maxlength="70" value=""> <img src="images/ast25.png"></div>
  31.  <div class="formname" style="float: left; clear: both; position: relative;">Fax:</div><div class="formfield" style="float:left; position: relative;"><input type="text" name="fax" size="35" maxlength="70" value=""></div>
  32.  <div class="formname" style="float: left; clear: both; position: relative;">Email:</div><div class="formfield" style="float:left; position: relative;"><input type="text" name="email" size="35" maxlength="70" value=""> <img src="images/ast25.png"></div>
  33.  <div class="formname" style="float: left; clear: both; position: relative; height:35px;">Osoba kontaktowa:</div><div class="formfield" style="float:left; position: relative;"><input type="text" name="osoba" size="35" maxlength="70" value=""></div>
  34.  </div><!--koniec div.insidetext-->
  35.  <div class="subheader" style="float: none; clear:both; position: relative; top: 70px;"><p class="subheader">Jesteśmy zainteresowani ofertą na:</p>
  36.  </div><!--koniec div.subheader-->
  37.  <div class="insidetext" style="float: none; clear: both; position: relative; top: 90px; left:55px; width: 630px;">
  38.  Zaznacz jedną lub więcej opcji:
  39.  <br><input type="checkbox" name="oferta1" value="Powłoki antykorozyjne"> powłoki antykorozyjne
  40.  <br><input type="checkbox" name="oferta2" value="Powłoki hudroizolacyjne"> powłoki hydroizolacyjne
  41.  <br><input type="checkbox" name="oferta3" value="Powłoki trudnościeralne"> powłoki trudnościeralne
  42.  <br><input type="checkbox" name="oferta4" value="Powłoki chemoodporne"> powłoki chemoodporne
  43.  <br><input type="checkbox" name="oferta5" value="Zabezpieczenia walców i rolek"> zabezpieczenia walców i rolek
  44.  <br><input type="checkbox" name="oferta6" value="Elementy z elastomerów poliuretanowych"> elementy z elastomerów poliuretanowych
  45.  <br><input type="checkbox" name="oferta7" value="Polifosforanowo-magnetyzowe posadzki przemysłowe"> polifosforanowo-magnetyzowe posadzki przemysłowe
  46.  <br><input type="checkbox" name="oferta8" value="Budowę maszyn do natrysku materiałów poliuretanowych"> budowę maszyn do natrysku materiałów poliuretanowych
  47.  <br><input type="checkbox" name="oferta9" value="Materiały konstrukcyjne"> materiały konstrukcyjne
  48.  </div><!--koniec div.insidetext-->
  49.  <div class="subheader" style="float: none; clear:both; position: relative; top: 90px;"><p class="subheader">Dodatkowe uwagi:</p>
  50.  </div><!--koniec div.subheader-->
  51.  <div class="insidetext" style="float: none; clear: both; position: relative; top: 95px; left:55px; width: 543px;">
  52.  Treść uwag:
  53.  <br><textarea name="uwagi" cols="65" rows="6"></textarea>
  54.  <br><img src="images/ast25.png"> pola wymagane
  55.  <br><center><input type="submit" name="submit" value="Wyślij"></center>
  56.  </form></div><!--koniec div.insidetext-->
  57.  </div><!--koniec div.inside-->
  58.  <center><div class="footer" style="clear: both;">
  59.  <div class="footermenu">
  60.  tu jest menu dolne</div>
  61.  </div> <!--koniec div.footermenu-->
  62.  <div class="footertext" style="clear:both"><center><p>Wszelkie prawa zastrzeżone &copy;  <a href="adresstrony">Teskt</a> - tekst</p>
  63.  <p><B>Zabezpieczenia infrastruktury przemysłowej - Jakość - Profesjonalizm - Doświadczenie</B></p></center></div><!--koniec div.footertext-->
  64. </div></center> <!--koniec div.footer-->
  65. </div> <!--koniec div.strona-->
[HTML] pobierz, plaintext


a plik css wyglada tak
[HTML] pobierz, plaintext 
  1. div.strona
  2.   {
  3.   width: 921px;
  4.   min-height:1200px;
  5.   height: auto !important;
  6.   height: 1200px;
  7.   background-color: #f36f21;
  8.   border: 1px #f36f21;
  9.   margin: 0;
  10.   margin-left: auto;
  11.   margin-right: auto;
  12.   padding: 0;
  13.   }
  14. div.menutop
  15.   {
  16.   width:920px;
  17.   height:70px;
  18.   background-color: #556670;
  19.   border: 0px solid black;
  20.   margin: 0;
  21.   padding: 0;
  22.   }
  23.  
  24. div.baner
  25.   {
  26.   width:920px;
  27.   height:256px;
  28.   background-color:#f36f21;
  29.   border: 0px solid black;
  30.   margin: 0;
  31.   padding: 0;
  32.   position:relative;
  33.   top: 0px;
  34.   }
  35.  
  36. div.menuleft
  37.   {
  38.   width:210px;
  39.   min-height:760px;
  40.   height: auto !important;
  41.   height: 760px;
  42.   border: 0px solid black;
  43.   margin: 0;
  44.   padding: 0;
  45.   position:relative;
  46.   }
  47.  
  48. div.inside
  49.   {
  50.   width:710px;
  51.   min-height: 760px;
  52.   height: auto !important;
  53.   height: 760px;
  54.   border: 0px solid black;
  55.   margin: 0;
  56.   padding: 0;
  57.   position:relative;
  58.   overflow: hidden;
  59. }
  60. div.footer
  61.   {
  62.   width:920px;
  63.   height: 108px;
  64.   border: 0px solid black;
  65.   margin: 0;
  66.   padding: 0;
  67.   position: relative;
  68.   background-image: url("images/footer.gif");
  69.   background-repeat: no-repeat;
  70. }
  71. div.footermenu
  72.   {
  73.   width:390px;
  74.   height: 18px;
  75.   border: 0px solid black;
  76.   margin: 0;
  77.   padding: 0;
  78.   position:relative;
  79.   top: 25px;
  80.   font-size: 11px;
  81.   font-family: verdana, times new roman, arial ;
  82.   color: white;
  83. }
  84.  
  85.  
  86. div.footertext
  87.   {
  88.   width:920px;
  89.   height: 90px;
  90.   border: 0px solid black;
  91.   margin: 0;
  92.   padding: 0;
  93.   position:relative;
  94.   top: 25px;
  95.   font-size: 12px;
  96.   font-family: verdana, times new roman, arial;
  97.   color: white;
  98. }
  99. div.header
  100. {
  101.  width:660px;
  102.   height: 33px;
  103.   border: 0px solid black;
  104.   background-image: url("images/header6.jpg");
  105.   margin: 0;
  106.   padding: 0;
  107.   position:relative;
  108.   top: 25px;
  109.   left: 20px;
  110.   font-size: 15px;
  111.   font-family:  verdana, "times new roman", arial;
  112.   color: white;
  113. }
  114. p.header
  115. {
  116. width:200px;
  117.   height: 33px;
  118.   border: 0px solid black;
  119.   margin: 0;
  120.   padding: 0;
  121.   position:relative;
  122.   left: 25px;
  123.   top: 7px;
  124. }
  125.  
  126. div.subheader
  127. {
  128.  width:600px;
  129.   height: 40px;
  130.   border-bottom: 1px dotted white;
  131.   background-image: url("images/hbg.gif");
  132.   margin: 0;
  133.   padding: 0;
  134.   position:relative;
  135.   left: 20px;
  136.   font-size: 17px;
  137.   font-family: verdana, "times new roman", arial, verdana;
  138.   color: white;
  139. }
  140. p.subheader
  141. {
  142. width:600px;
  143.   height: 40px;
  144.   border: 0px solid black;
  145.   margin: 0;
  146.   padding: 0;
  147.   position:relative;
  148.   left: 5px;
  149.   top: 17px;
  150.   }
  151. div.insidetext
  152. {
  153.  width:660px;
  154.   border: 0px solid black;
  155.   margin: 0;
  156.   padding: 0;
  157.   position: relative;
  158.   left: 20px;
  159.   font-size: 14px;
  160.   font-family: "times new roman", arial, verdana;
  161.   color: white;
  162. }
  163. div.formname
  164. {
  165.  width:90px;
  166.  height: 17px;
  167.   border: 0px solid black;
  168.   margin: 0;
  169.   padding: 4px;
  170.   position:relative;
  171.   left: 30px;
  172.   font-size: 13px;
  173.   font-family: "times new roman", arial, verdana;
  174.   color: white;
  175.   vertical-align: bottom;
  176. }
  177. div.formfield
  178. {
  179.  width:500px;
  180.  height: 25px;
  181.   border: 0px solid black;
  182.   margin: 0;
  183.   padding: 0;
  184.   position:relative;
  185.   left: 30px;
  186.   font-size: 14px;
  187.   font-family: "times new roman", arial, verdana;
  188.   color: white;
  189. }
  190. div.alert
  191. {width:600px;
  192.   border: 1px solid #CC0000;
  193.   background-color: #FFFFCC;
  194.   margin: 0;
  195.   padding: 0;
  196.   position:relative;
  197.   left: 30px;
  198.   top: 40px;
  199.   font-size: 14px;
  200.   font-family: "times new roman", arial, verdana;
  201.   color: red;
  202.   vertical-align: middle;
  203. }
  204. div.rozmowa
  205. {
  206.   width:200px;
  207.   height:210px;
  208.   margin: 0;
  209.   padding: 0;
  210.   position:relative;
  211.   left: 10px;
  212.   }
[HTML] pobierz, plaintext
erix
1.07.2009, 14:50:39
A nie możesz po prostu wrzucić tej strony na jakiś serwer i zalinkować? Łatwiej by było debugować.
qolec
2.07.2009, 05:51:49
Cytat(erix @ 1.07.2009, 15:50:39 ) *
A nie możesz po prostu wrzucić tej strony na jakiś serwer i zalinkować? Łatwiej by było debugować.



http://www.microchip.net.pl/~kolecko/zapytanie_ofertowe.html


Już wiem co mi psuje efekt, ale jeszcze nie wiem jak to sensownie ominąć. A mianowicie, wynika mi z tego, że divy, które znajdują się wewnątrz div.inside mają ustawione position: relative; top: xpx; a wyczytałem w jednym z kursów, że przy ustawieniu wysokości diva rodzica na auto przesunięcie diva dziecka jest pomijane. I w sumie o wartość tego przesunięcia zawaertość div.inside jest przycięta.
Teraz tylko pytanie jak wypozycjonować elementy wewnątrz div.inside, żeby w sposób właściwy się rozciągał. Od biedy można te elementy przesunąć zwykłym łamaniem lini, wtedy div.inside rozciąga się w sposób właściwy, ale nie jest to precyzyjny sposób ustawienia elementów wewnętrznych.
viking
2.07.2009, 07:28:12
Na początek to popraw ten śmietnik bo może być to cokolwiek (choćby end tag for element "form" which is not open). Po co ci xhtml jak piszesz w html?

http://validator.w3.org/check?verbose=1&am...e_ofertowe.html
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.