Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS] Height 100% - za krótki div w ff i ie7 a pod ie6 jest ok, Szablon z div z zawartością na samej górze
MOniToR
post
Post #1





Grupa: Zarejestrowani
Postów: 182
Pomógł: 2
Dołączył: 16.11.2003
Skąd: Wrocław / Skokowa

Ostrzeżenie: (10%)
X----

Jak w temacie. Chcę aby w tym szablonie div z zawartością strony i innym tłem rozciągał się do samego dołu strony, gdzie jest stopka.
Bardzo dobrze wszystko się rozciąga gdy zawartość strony jest na tyle długa, że nie ma pustej przestrzeni, jednak gdy zawartość strony jest krótka i własnie potrzebne jest takie rozciągniecie to ukazuje się ono tylko w IE6. Proszę o pomoc. 

[HTML] pobierz, plaintext 
  1. <?php // no direct access defined( '_JEXEC' ) or die( 'Restricted access' ); ?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml"
  5. xml:lang="<?php echo $this->language; ?>"
  6. lang="<?php echo $this->language; ?>" >
  7. <head>
  8. <link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template_css.css" type="text/css" />
  9. </head>
  10. <body>
  11.  
  12. <div id="wrapper"><div id="centercontent">
  13. <div class="insidecenter">
  14. <div id="main">
  15. TUTAJ JEST ZAWARTOSC
  16. </div>
  17. </div></div><div id="header">
  18. TUTAJ JEST HEADER Z LOGIEM
  19. </div>
  20. <div id="sitename">&nbsp; &nbsp; &nbsp; &nbsp; tutaj wyświetla się nazwa strony
  21. </div>
  22. <div id="leftcontent">
  23. LEWA KOLUMNA
  24. </div><div id="rightcontent">
  25. PRAWA KOLUMNA
  26. </div>
  27. <div id="clearfooter"></div> 
  28. </div>
  29. <div id="footer">
  30. TRESC STOPKI
  31. </div>
  32.  </body>
  33. </html>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. * {
  2. 	margin: 0;
  3. }
  4. body {
  5.     margin: 0 auto;
  6.     padding: 0px;
  7.     font-family: Tahoma;
  8.     font-size: 11px;
  9.     text-align: center;
  10.     background-color: #000000;
  11.     color: #949494;
  12.     height:100% ;
  13.     text-align:center;
  14. }
  15. html, body{height:100%;}  
  16.  
  17. #wrapper {
  18.     position: relative;
  19.     width: 850px;
  20.     background-image: url('../images/all_bg.jpg');
  21.     background-repeat: repeat-y;
  22.     margin: 0 auto;
  23.     min-height: 100%;
  24.     height: auto  !important;
  25.     height: 100%;
  26.     margin-bottom:-19px;
  27. }
  28.  
  29. #header {
  30.     background-image: url('../images/top.jpg');
  31.     background-repeat: no-repeat;
  32.     position: absolute;
  33.     width: 822px;
  34.     height: 105px;
  35.     margin: 0 auto;
  36.     top: 0px;  
  37.     padding-bottom:80px;
  38.     margin-left: -411px;
  39.     left:50%;
  40. }
  41.  
  42. #leftcontent {
  43.     position: absolute;
  44.     height: auto;
  45.     left: 8px;
  46.     top: 130px;
  47.     width: 171px;
  48.     padding: 5px;
  49.     text-align: left;
  50. }
  51.  
  52. #sitename {
  53.     position: absolute;
  54.     width: 822px;
  55.     height: 16px;
  56.     margin: 0 auto;
  57.     margin-top: 106px;
  58.     top: 1px;
  59.     background-image: url('../images/top_path_bg.jpg');
  60.     background-repeat: repeat-x;
  61.     text-align: left;
  62.     padding-top: 5px;
  63.     margin-left: -411px;
  64.     left:50%;
  65. }
  66.  
  67. #centercontent {
  68.     text-align: left;
  69.     margin-left: 183px;
  70.     margin-right: 183px;
  71.     height:100%; 
  72.     min-height:100%;
  73. }
  74.  
  75. #rightcontent {
  76.     position: absolute;
  77.     right: 8px;
  78.     top: 130px;
  79.     width: 171px;
  80.     padding: 5px;
  81.     text-align: left;
  82. }
  83.  
  84. .insidecenter {
  85.     text-align: center;
  86.     padding: 100px 0 0 0;
  87.     height:100%; 
  88.     min-height:100%; 
  89. }
  90.  
  91. #main {
  92.     margin: 2px auto;
  93.     margin-top: 0px;
  94.     padding: 5px;
  95.     width: 463px;
  96.     background-color: #2D2D2D;
  97.     min-height: 100%;
  98.     height: auto !important;
  99.     height: 100%;
  100.     position:static;
  101. }
  102.  
  103. .footer {
  104.     background-image: url('../images/footer_bg.jpg');
  105.     background-repeat: repeat-x;
  106.     height: 19px;
  107.     width: 822px;
  108.     margin: 0 auto;
  109.     margin-left: -411px;
  110.     left:50%;
  111.     position:relative;
  112.     text-align: center;
  113.     padding-top: 4px;
  114.     color: #454545;
  115.     bottom:0px;
  116. }
  117.  
  118. #clearfooter {
  119.     height:19px;
  120. }
[HTML] pobierz, plaintext


To nie jest chyba taki prosty szablon i chyba nie będzie takie proste mi pomóc. Jeżeli kogos to jest to kawałek mojego szablonu pod joomle. Przykład online: http://j15.dev.mamboassistance.com

Ten post edytował MOniToR 28.12.2007, 00:52:06


--------------------
Tworzenie stron WWW Wrocław
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 1)
vokiel
post
Post #2





Grupa: Zarejestrowani
Postów: 2 592
Pomógł: 445
Dołączył: 12.03.2007

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

może to Ci pomoże: Sticky-footer


--------------------
"It's in our hands... It always was..." | It's in my hands: blog.vokiel.com... It always be...
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: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

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

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