Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS][HTML]Automatyczne dopasowywanie się div do wysokości
--_chris_--
post
Post #1





Goście
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 (IMG:style_emoticons/default/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
(IMG:http://chrisu.home.pl/1_.png)
(IMG:http://chrisu.home.pl/2_.png)
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
_chris_
post
Post #2





Grupa: Zarejestrowani
Postów: 45
Pomógł: 0
Dołączył: 19.08.2011

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

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 (IMG:style_emoticons/default/biggrin.gif) Działam dalej, polecam się na przyszłość, a przypuszczam że napiszę jeszcze odnośnie tego szablonu bo chcę kilka zmian wprowadzić.
Go to the top of the page
+Quote Post

Posty w temacie
- -_chris_-   [CSS][HTML]Automatyczne dopasowywanie się div do wysokości   19.01.2012, 14:17:39
- - zdemotywowany   Tę część daj jako nadrzędny div. Niech w tym divie...   19.01.2012, 15:05:14
- - _chris_   Którą cześć? Możesz mi kod napisać? nie cały tylko...   19.01.2012, 15:38:43
- - zdemotywowany   Zobacz jak to wygląda na Twojej stronie, złóż sobi...   19.01.2012, 15:51:33
- - Damonsson   DIVmania. Sztuka dla sztuki. Robienie pustych DIVó...   19.01.2012, 15:59:47
- - _chris_   Dobrze mówisz! Tylko powiedz mi jak to zrobić?...   19.01.2012, 17:07:31
- - Kulfon   Ot choćby tak: Klik   19.01.2012, 17:53:47
- - _chris_   CSS3 obsługują wszystkie przeglądarki?   19.01.2012, 17:58:19
- - Damonsson   Do maxymalnie dwóch (a masz tylko lewe i prawe) ró...   19.01.2012, 18:11:50
- - _chris_   Genialne! Jestem programistą który lubi się u...   19.01.2012, 19:34:40

« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 2.10.2025 - 21:31
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn