Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML]Automatyczne dopasowywanie się div do wysokości
Forum PHP.pl > Forum > Przedszkole
-_chris_-
19.01.2012, 14:17:39
Witam wszystkich
Chcę przejść z php-fusion na joomle i zachować mój stary szablon, bo mi się podoba:) W php-fusion wszystko jest na tabelkach ja chcę zrobić na divach. Póki co udało mi się zrobić header, footer i menu idealnie, ale mam problem z glowna trescia. strona cala jest na zasadzie ramki jak na załączonym rysunku 1. Taki efekt uzyskałem dzięki wpisaniu na stałe wartości height. Jak usunę wartość height, to jest tak jak na rysunku nr 2. Chciałbym żeby się to zachowywało tak, że jak w content pojawi się więcej rzeczy, to automatycznie sie boczne ramki przeciągną.Przypuszcza że dla kogoś kto robi strony, to jest kwestia minuty smile.gif Być może źle poustawiałem divy między sobą, ale nie ma innego wyjścia jak 3 divy na kazdą cześć (lewe tło, środek powtarzany i prawe tło).
[HTML] pobierz, plaintext 
  1. <body>
  2. <div id="container">
  3.  
  4. <!--  Header -->
  5.         <div id="header">
  6.         <div id="header-left"></div>
  7.         <div id="header-right"></div>
  8.         <div id="header-center">
  9.  
  10.         <div id="logo">LOGO</div>
  11.         <div id="top-right"></div>
  12.         </div>
  13.         </div>
  14.  
  15. <!-- End of header -->
  16.  
  17. <!--  Menu --> 
  18.  
  19. <div id="menu">
  20.         <div id="menu-left"></div>
  21.         <div id="menu-right"></div>
  22.  
  23.         <div id="menu-center">
  24.         <ul>
  25.                 <li><a href="#">Home page</a><li>
  26.                 <li><a href="#">Kontakt</a></li>
  27.                 <li><a href="#">Programowanie</a></li>
  28.                 <li><a href="#">Allegro</a></li>
  29.         </ul>
  30.         </div>
  31.  
  32. </div>
  33.  
  34. <!--  End of menu -->  
  35.  
  36. <!--  Main content -->
  37.  
  38.         <div id="main">
  39.  
  40.         <div id="body-left"></div>
  41.         <div id="sidebar-left"></div>
  42.         <div id="body-right"></div>
  43.         <div id="sidebar-right"></div>
  44.         <div id="content"></div>
  45.  
  46.         </div>
  47.  
  48. <!-- End of main content -->
  49.  
  50. <!-- Footer -->
  51.  
  52.         <div id="footer">
  53.                 <div id="footer-left"></div>
  54.                 <div id="footer-right"></div>
  55.                 <div id="footer-center"></div>
  56.         </div>
  57.  
  58. <!-- End of footer --> 
  59. </div>
  60.  
  61. </body>
[HTML] pobierz, plaintext


CSS:
[HTML] pobierz, plaintext 
  1. body,html {
  2. margin: 0;
  3. padding: 0;
  4. height: 100%;
  5. }
  6. #container {
  7. width: 100%;
  8. height: 100%;
  9. margin: 0 auto;
  10. }
  11.  
  12. #header {
  13. width: 100%;
  14. height: 100px;
  15. }
  16.  
  17. #header-left {
  18. background: url(1.png) no-repeat left;
  19. float: left;
  20. width: 89px;
  21. height: 207px;
  22. }
  23.  
  24. #header-center{
  25. height: 207px;
  26. margin-left: 5%;
  27. background: url(3.png) repeat-x;
  28. }
  29.  
  30. #header-right {
  31. float: right;
  32. background: url(2.png) right no-repeat;
  33. width: 89px;
  34. height: 207px;
  35. }
  36.  
  37. #logo{
  38. padding: 50px 0 0 20px;
  39. width: 30%;
  40. float: left;
  41. }
  42.  
  43. #top-right{
  44. padding: 50px 50px 0 0;
  45. float: right;
  46. }
  47.  
  48. #menu{
  49.         clear: both;
  50.         width: 100%;
  51.         background-color: black;
  52.         height: 68px;
  53.         padding: 0;
  54.         margin: 0;
  55. }
  56.  
  57. #menu-left{
  58.         background: url(a.png) left no-repeat;
  59.         height: 68px;
  60.         float: left;
  61.         width: 77px;
  62. }
  63.  
  64. #menu-right{
  65. float: right;
  66. background: url(b.png) right no-repeat;
  67. width: 77px;
  68. height: 68px;
  69. }
  70.  
  71. #menu-center{
  72. height: 68px;
  73. margin-left: 77px;
  74. background: url(c.png) repeat-x;
  75. }
  76.  
  77. #main{
  78.         clear: both;
  79.         width: 100%;
  80.         background-color: #DADADA;
  81.         /* for testing only */
  82.         height: 300px;
  83.         padding: 0;
  84.         margin: 0;
  85. }
  86.  
  87. #body-left{
  88.         background: url(body-left.png) left repeat-y;
  89.         float: left;
  90.         width: 50px;
  91.  
  92. }
  93.  
  94. #body-right{
  95.         background: url(body-right.png) left repeat-y;
  96.         float: right;
  97.         /* aby wyrównać do prawej strony bo obrazek za duży */
  98.         width: 45px;
  99. }
  100.  
  101. #sidebar-left{
  102.         color:#000000;
  103.         width: 50px;
  104. }
  105.  
  106. #sidebar-right{
  107.         color:#000000;
  108.         width: 50px;
  109. }
  110.  
  111. #content{
  112.         height: 800px;
  113.         margin-left: 50px;
  114. }
  115.  
  116. #footer{
  117.         clear: both;
  118.         height: 192px;
  119. }
  120.  
  121. #footer-left{
  122.         background: url(footer-left.png) left no-repeat;
  123.         height: 192px;
  124.         float: left;
  125.         width: 140px;
  126. }
  127.  
  128. #footer-right{
  129.         background: url(footer-right.png) left no-repeat;
  130.         height: 192px;
  131.         float: right;
  132.         width: 140px;
  133. }
  134.  
  135. #footer-center{
  136.         height: 192px;
  137.         margin-left: 140px;
  138.         background: url(footer.png) repeat-x;
  139. }
[HTML] pobierz, plaintext


Z góry dzięki! Jeśli istnieje prostszy sposób, to proszę o podpowiedzi:) Chciałbym aby strona na joomli wyglądała jak oryginał: http://chris.vot.pl

zdemotywowany
19.01.2012, 15:05:14
Tę część daj jako nadrzędny div. Niech w tym divie znajduje się wszystko: nagłówek, treść i stopka, a samo się tak będzie robić.
_chris_
19.01.2012, 15:38:43
Którą cześć? Możesz mi kod napisać? nie cały tylko symbolicznie jak to zrobić.
zdemotywowany
19.01.2012, 15:51:33
Zobacz jak to wygląda na Twojej stronie, złóż sobie ją tak żeby nie mieściła się zawartość w przeglądarce i zobaczysz jak Ci się rozleci. Tam dobrze widać, że jest element nadrzędny, który robi za tło.
Damonsson
19.01.2012, 15:59:47
DIVmania. Sztuka dla sztuki. Robienie pustych DIVów z samym tłem, jest bezsensu i dużo nie odbiega od tabelek. Przepisz to porządnie tak jak się powinno robić szablony, google pomoże. A skoro te boki idą przez całą stronę to czemu nie dasz tego jako multiple-background po lewej i po prawej do body?
_chris_
19.01.2012, 17:07:31
Dobrze mówisz! Tylko powiedz mi jak to zrobić? Jak ustawić tło na prawą stronę inne, na lewą inne? Tak samo jest w nagłówku i menu. Divy boczne tylko po to żeby wyświetlać grafikę.
Kulfon
19.01.2012, 17:53:47
Ot choćby tak: Klik
_chris_
19.01.2012, 17:58:19
CSS3 obsługują wszystkie przeglądarki?
Damonsson
19.01.2012, 18:11:50
Do maxymalnie dwóch (a masz tylko lewe i prawe) różnych teł nawet IE6 obsłuży, z odpowiednimi hackami/fixami. Google Ci powie, jak masz to zrobić.
_chris_
19.01.2012, 19:34:40
Genialne! Jestem programistą który lubi się uczyć wszystkiego nowego, przeczytałem 2-3 książki odnośnie HTML, CSS itd i kilka tutków a takich rzeczy nie znalazłem. Dzisiaj się męczyłem z tym ponad 4 godziny na wszystkie możliwe sposoby a tu 10 minut i logo zrobione biggrin.gif Działam dalej, polecam się na przyszłość, a przypuszczam że napiszę jeszcze odnośnie tego szablonu bo chcę kilka zmian wprowadzić.
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.