Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [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
zdemotywowany
post
Post #2





Grupa: Zarejestrowani
Postów: 74
Pomógł: 3
Dołączył: 15.01.2012

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

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ć.
Go to the top of the page
+Quote Post
_chris_
post
Post #3





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

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

Którą cześć? Możesz mi kod napisać? nie cały tylko symbolicznie jak to zrobić.
Go to the top of the page
+Quote Post
zdemotywowany
post
Post #4





Grupa: Zarejestrowani
Postów: 74
Pomógł: 3
Dołączył: 15.01.2012

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

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.
Go to the top of the page
+Quote Post
Damonsson
post
Post #5





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

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

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?
Go to the top of the page
+Quote Post
_chris_
post
Post #6





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

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

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ę.
Go to the top of the page
+Quote Post
Kulfon
post
Post #7





Grupa: Zarejestrowani
Postów: 45
Pomógł: 2
Dołączył: 24.12.2010

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

Ot choćby tak: Klik
Go to the top of the page
+Quote Post
_chris_
post
Post #8





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

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

CSS3 obsługują wszystkie przeglądarki?
Go to the top of the page
+Quote Post
Damonsson
post
Post #9





Grupa: Zarejestrowani
Postów: 2 355
Pomógł: 533
Dołączył: 15.01.2010
Skąd: Bydgoszcz

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

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ć.
Go to the top of the page
+Quote Post
_chris_
post
Post #10





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
« 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: 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 Aktualny czas: 22.08.2025 - 14:31
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn