Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Problem z div
Forum PHP.pl > Forum > Przedszkole
spayk
19.10.2010, 17:39:17
Mam taki problem
Div "con" powienien zwiększać swoją wysokość wzależnosci od tego jaki jest najwyższy div w środku
Chodzi o to ze ten div "con" się nie powiększa tzn bynajmniej niewidac tła chyba ze ustawie wysokosc ręcznie.

[HTML] pobierz, plaintext 
  1. <div class="con">
  2.                 <div class="box_shop"></div>
  3.                 <div class="box_con">
  4.  
  5.                     <div class="box_con_title"><p class="box_con_title"><b>Strona główna</b></p></div>
  6.                     <div class="box_con_info">tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tres</div>
  7.                 </div>
  8.  
  9.             </div>
[HTML] pobierz, plaintext 



[HTML] pobierz, plaintext 
  1. .con{
  2. width: 1005px;
  3. height: auto;
  4. position:relative;
  5. margin: auto;
  6. background-image: url('images/con_bg.png');
  7. background-position: 44%;
  8. background-repeat: repeat-y;
  9.  
  10.  
  11. }
  12.  
  13. .box_shop{
  14.  
  15. width: 250px;
  16. height: 450px;
  17. background-image: url('images/box_shop_bg.png');
  18. margin: 0 0 0 44px;
  19.  
  20. float: left;
  21.  
  22. }
  23.  
  24. .box_con{
  25.  
  26. width: 680;
  27.  
  28.  
  29. background: #fff;
  30. float: left;
  31. margin: 0 0 0 26px;
  32.  
  33. }
  34.  
  35. .box_con_title{
  36. width: 624px;
  37. height: 50px;
  38. background-image: url('images/title_bg.png');
  39. background-position:left top;
  40. background-repeat: no-repeat;
  41.  
  42.  
  43. }
  44. p.box_con_title{
  45. padding: 17px 0 0 30px;
  46. font-size: 15px; 
  47. color: #fff;
  48.  
  49. }
  50. .box_con_info{
  51. width: 624px;
  52. font-size: 12px; 
  53. color: #000;
  54. background: #fff;
  55. margin: 12px 0 0 10px ;
  56.  
  57. }
[HTML] pobierz, plaintext


Prosze powiedizec co jest nie tak
kokers
19.10.2010, 18:52:53
Zrób np tak dodaj jeszcze jeden div przed con:

[HTML] pobierz, plaintext 
  1. <div id="kontener"><div class="con">
  2. 				<div class="box_shop"></div>
  3. 				<div class="box_con">
  4.  
  5. 					<div class="box_con_title"><p class="box_con_title"><b>Strona główna</b></p></div>
  6. 					<div class="box_con_info">tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tresc tres</div>
  7. 				</div>
  8.  
  9. 			</div>
  10. </div>
[HTML] pobierz, plaintext


a CSS będzie wyglądał tak:

[HTML] pobierz, plaintext 
  1. #kontener{
  2.   margin:0 auto; 
  3.   width:1005px;
  4. }
  5.  
  6. .con{
  7. width: 1005px;
  8. height: auto;
  9. position:relative;
  10. margin: auto;
  11. background-image: url('images/con_bg.png');
  12. background-position: 44%;
  13. background-repeat: repeat-y;
  14.  
  15. float:left
  16.  
  17. }
[HTML] pobierz, plaintext


dla .con dodane zostało float:left.

i polecam używać lorem ipsum do wypełniania tekstów
spayk
19.10.2010, 18:57:54
działa thx
o co chodzi z lorem ipsum możesz dac jakis link ?
kokers
19.10.2010, 19:00:36
lipsum

To taki generator bloków tekstowych, np 10 paragrafów który nic nie znaczy. Wypełnia przestrzeń przeznaczoną na tekst i można zobaczyć jak to wygląda.
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.