ugrás a tartalomhoz

méretezés

Batka1985 · 2009. Dec. 9. (Sze), 13.56
Sziasztok, kéne egy kis segítség ismét:D a következőben: az oldalam felépítése fejléc, tartalom, lábléc, és a tartalom mellett bal oldalt egy menü. Mind a 4 elem külön div-ben. A problémám h a különböző menüpontok más-más mennyiségű szöveges adatot tartalmaznak, amik a content div-ben jelennek meg mindig, és ha túl sok a szöveg a lábléc alá nyúlik a tartalom. Most a content div-nek fix szélesség és magasság értékeket adtam meg, gondolom ez a hiba. De hogy csináljam meg h a lábléc mindig igazodjon a tartalomhoz, persze egy minimális content méret azért legyen. Itt arra gondolok hogy ha megjelenítendő szöveges tartalom csak 6-7 mondat, akkor ne ugorjon fel a lábléc a tartalom közepéhez.
Itt a weblap teljes css kódja is:
  1. #container {  
  2.     width:850px;  
  3.     margin:0 auto;  
  4.       
  5.       
  6. }  
  7. #sidebar_left {  
  8.     width:170px;  
  9.     float:left;  
  10.     background:#800000 ;  
  11. }  
  12.   
  13. #content {  
  14.     margin-left: 170px;  
  15.     background:#FFFFFF;  
  16.     width: 680px;  
  17.     height: 1200px;  
  18.     color: red;  
  19.     text-align: center;  
  20.     font-size: 12px;  
  21. }  
  22. body { }  
  23.   
  24. /* colors and others */  
  25. #container {  
  26.     background: #ffdead ;  
  27. }  
  28. #header {  
  29.     background-image: url('head.jpg');  
  30.     height: 170px;  
  31.     border: solid;  
  32.     border-color: #800000;  
  33.     border-width: 2px;  
  34.       
  35.       
  36. }  
  37.   
  38.   
  39.   
  40.   
  41. #footer {  
  42.     background:#deb887;  
  43.     color:#999999;  
  44.     border-style: solid;  
  45.     border-width: 2px;  
  46.     border-color: #800000;  
  47. }  
  48.   
  49. p, h1, h2, h3, h5 {  
  50.     margin:0;  
  51.     padding:10px;  
  52. }  
  53.   
  54. #flags {border-color: #800000;  
  55.     border-style: solid;  
  56.     border-width: 0px 2px 2px 2px;  
  57.     background-color: #deb887;  
  58.     height: 22px;}  
  59.       
  60. #flags table {float: right;  
  61.           padding: 0px 1px;  
  62.           margin: 0px;  
  63.          }    
  64.   
  65. #header h1, #footer h5 {  
  66.     text-align:center;  
  67. }  
  68. #header h1 {color: #800000;  
  69.          padding-right: 80px}  
  70.   
  71. #sidebar_left ul {  
  72.     list-style:none;  
  73.         margin: 0px;  
  74.         padding: 0px;  
  75.     width:170px;  
  76.     border:1px solid white;  
  77.     background-color: #800000;  
  78.     color: white;  
  79.           
  80.         }  
  81. #sidebar_left li {  
  82.         padding: 2px 2px;  
  83.     border-style: solid;  
  84.     border-color: white;  
  85.     border-width: 1px 0;  
  86.       
  87.         }  
  88.           
  89. a {text-decoration: none;  
  90.    font-size: 13px;  
  91.    font-family: sans-serif;  
  92.    font-weight: bold;  
  93.    color: white;  
  94.    display: block;  
  95.    padding: 2px 0px 0px 2px;  
  96.    width:100%; /* IE */  
  97.    }  
  98.   
  99.   
  100.   
  101.   
  102. /*MENU BEFORMAZOTT*/  
  103.   
  104. ul,li,a {  
  105.         display:block;  
  106.         margin:0;  
  107.         padding:0;  
  108.         border:0;  
  109.     }  
  110.   
  111.       
  112.   
  113.     li {  
  114.         position:relative;  
  115.         padding:1px;  
  116.         padding-left:26px;  
  117.         /*background:url("images/item_moz.gif") no-repeat;*/  
  118.         z-index:9;  
  119.     }  
  120.         li.folder   { background:url("images/item_folder.gif") no-repeat; }       
  121.         li.folder ul {  
  122.             position:absolute;  
  123.             left:120px; /* IE */  
  124.             top:5px;  
  125.         }         
  126.             li.folder>ul { left:140px; } /* others */  
  127.   
  128.       
  129.         li>a { width:auto; } /* others */  
  130.   
  131.     /*li.folder:hover{background-color: #deb887}*/  
  132.           
  133.       
  134.     /* regular hovers */  
  135.   
  136. a:hover {  
  137.     border-color:gray;  
  138.     background-color:#deb887;  
  139.     color:black;  
  140.     }  
  141.       
  142. li a.submenu {  
  143.         /*background:url("white.gif") right no-repeat;*/  
  144.     }     
  145.       
  146. li.folder a:hover {  
  147.     background-color:#deb887; /*ALMENUS MENUKET KEZEKI*/  
  148.         }  
  149.       
  150.       
  151.     /* hovers with specificity */  
  152.       
  153.     li.folder:hover { z-index:10; }       
  154.           
  155.     ul ul, li:hover ul ul {  
  156.         display:none;  
  157.     }  
  158.   
  159.     li:hover ul, li:hover li:hover ul {  
  160.         display:block;  
  161.     }  
‹ Linkek hibaüzenő oldalra dobnak Időzítés helyett gombnyomás ajax ›
 ■
1

clear: both

Poetro · 2009. Dec. 9. (Sze), 16.40
A #footer-nek adj clear:both-t.
2

Köszi működött

Batka1985 · 2009. Dec. 10. (Cs), 15.34
Köszi működött