Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Rozjeżdżające się divy
krokodajl
post 5.05.2010, 19:48:44
Post #1





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 11.11.2007

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

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

Ten post edytował krokodajl 5.05.2010, 19:49:11
Go to the top of the page
+Quote Post
pedro84
post 5.05.2010, 19:52:36
Post #2





Grupa: Nieautoryzowani
Postów: 2 249
Pomógł: 305
Dołączył: 2.10.2006

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

Ale z czym masz problem? Pokaż kod.


--------------------
Google knows the answer...
Go to the top of the page
+Quote Post
krokodajl
post 5.05.2010, 20:03:54
Post #3





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 11.11.2007

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

[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
Go to the top of the page
+Quote Post
pedro84
post 5.05.2010, 20:18:06
Post #4





Grupa: Nieautoryzowani
Postów: 2 249
Pomógł: 305
Dołączył: 2.10.2006

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

Ale ta struktura jest zła. Nie widzę potrzeby stosowania tylu divów, jeden nadrzędny spokojnie wystarczy.


--------------------
Google knows the answer...
Go to the top of the page
+Quote Post
krzysztof_kf
post 5.05.2010, 21:18:20
Post #5





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

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

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
Go to the top of the page
+Quote Post
krokodajl
post 5.05.2010, 21:24:03
Post #6





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 11.11.2007

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

dzięki krzysiek!
pozdr.
Go to the top of the page
+Quote Post
« Następny starszy · CSS · 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: 14.08.2025 - 12:02
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn