Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Rozjeżdżające się divy
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
krokodajl
5.05.2010, 19:48:44
Witam,

mam problem z rozjeżdżającymi się divami. Muszę stworzyć mini projekt jednak utknąłem na tworzeniu diva, na którym będę wyświetlać informacje o produkcie. Div taki ma wyglądać następująco:



Muszę to zrobić koniecznie na divach i css, ale zawsze jest coś nie tak.
Poproszę o wskazówki...

pozdrawiam
pedro84
5.05.2010, 19:52:36
Ale z czym masz problem? Pokaż kod.
krokodajl
5.05.2010, 20:03:54 
[HTML] pobierz, plaintext 
  1. <html>
  2. <head><title>tst</title></head>
  3. <body>
  4. 	<div style="width:600px; background-color:lime;">
  5. 		<div style="width: 200px; background-color:red; float:left; height:100%;">
  6. 			conten t
  7. 		</div>
  8. 		<div style="width:400px; background-color: gray; float:right;">
  9. 			<div>
  10. 				linia1<br />
  11. 				linia2<br />
  12. 				linia3
  13.  
  14. 			</div>			
  15. 		</div>
  16. 	</div>
  17. </body>
  18. </html>
[HTML] pobierz, plaintext


chciałbym aby wysokość div-a po lewej stronie (na czerwonym tle) dopasowała się do wysokości div-a po prawej. tymczasem kod powoduje, że w IE z lewego div-a wyświetla się jedna linia a w firefoxie lewy div zajmuje całą wysokość strony
pedro84
5.05.2010, 20:18:06
Ale ta struktura jest zła. Nie widzę potrzeby stosowania tylu divów, jeden nadrzędny spokojnie wystarczy.
krzysztof_kf
5.05.2010, 21:18:20
Proszę gotowiec 

[CSS] pobierz, plaintext 
  1. <style type="text/css">
  2.  
  3. #top {
  4. width: 1000px;
  5. margin: 0 auto;
  6. padding: 10px 10px 10px 10px;
  7. overflow: hidden;
  8. border: 1px solid #3399ff;
  9. }
  10.  
  11. #obrazek {
  12. width: 200px;
  13. height: 335px;
  14. margin-right: 10px;
  15. float: left;
  16. border: 1px solid #3399ff;
  17. }
  18.  
  19. #nazwa {
  20. width: 770px;
  21. height: 60px;
  22. float: left;
  23. border: 1px solid #3399ff;
  24. }
  25.  
  26. #przedmiot {
  27. width: 770px;
  28. height: 120px;
  29. margin-top: 10px;
  30. float: left;
  31. border: 1px solid #3399ff;
  32. }
  33.  
  34. #ilosc {
  35. width: 380px;
  36. height: 120px;
  37. margin: 20px 10px 0 0;
  38. float: left;
  39. border: 1px solid #3399ff;
  40. }
  41.  
  42. #costam {
  43. width: 380px;
  44. height: 120px;
  45. margin-top: 20px;
  46. float: left;
  47. border: 1px solid #3399ff;
  48. }
  49.  
  50. </style>
  51.  
  52. <div id="top">
  53. <div id="obrazek">
  54. Twoj obrazek
  55.    </div>
  56.  
  57. <div id="nazwa">
  58. Twoja nazwa
  59.    </div>
  60.  
  61. <div id="przedmiot">
  62. Opis przedmiotu
  63.    </div>
  64.  
  65. <div id="ilosc">
  66. Ilosc
  67.    </div>
  68.  
  69. <div id="costam">
  70. Cos tam
  71.    </div>
[CSS] pobierz, plaintext
krokodajl
5.05.2010, 21:24:03
dzięki krzysiek!
pozdr.
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.