ugrás a tartalomhoz

CSS Lábléc?

coder · 2004. Nov. 10. (Sze), 17.37
Hi!

Egy ilyen elrendezést szeretnék megcsinálni táblázatok nékül:

[fejléc]
tartalom
[lábléc]

Úgy kéne hogy működjön, hogy a lábléc mindíg a böngésző ablak alján legyen, akkor is, ha a tartalom röbidebb annál, hogy letolja addig. Persze ha a tartalom hosszabb mint a böngészőablak, akkor normálisan scrollozzon a böngésző, és csak lescrollozva látsszon a lábléc (tehát nyilván "postion: absolute; bottom: 0px;" kilőve).

Van valami ötletetek, nem szeretnék ilyen táblázatban táblázat stílusban lámázni, de nem tudom hogy oldjam ezt meg, pedig már 2 órája ezzel szenvedek.
‹ IE6 SP2 + Javascript Saját sztenderd? ›
 ■
1

min width

attlad · 2004. Nov. 10. (Sze), 18.45
  1. <style>  
  2. * {  
  3.   margin: 0;  
  4.   padding: 0;  
  5. }  
  6.   
  7. body {  
  8.   height: 100%;  
  9. }  
  10.   
  11. #container {  
  12.   position: relative;  
  13.   width: 700px;  
  14.   border: 1px solid black;  
  15.   min-height: 99%;  
  16.   height: expression(this.scrollHeight < document.body.clientHeight - 2 ? document.body.clientHeight : "auto" );  
  17. }  
  18.   
  19. #header {  
  20.   height: 80px;  
  21.   background-color: yellow;  
  22. }  
  23.   
  24. #content {  
  25.   background-color: #EEE;  
  26.   padding-bottom: 50px;  
  27. }  
  28.   
  29. #footer {  
  30.   background-color: green;  
  31.   height: 50px;  
  32.   position: absolute;  
  33.   bottom: 0;  
  34.   width: 100%  
  35. }  
  36. </style>  
  37. <div id="container">  
  38.   <div id="header">header</div>  
  39.   <div id="content">  
  40.     content<br>  
  41.     content<br>  
  42.     content<br>  
  43.     content<br>  
  44.     content<br>  
  45.     content<br>  
  46.     content<br>  
  47.     content<br>  
  48.   </div>  
  49.   <div id="footer">footer</div>  
  50. </div>  
Lehet, h van egyszerűbb megoldás, ez IE5-6 + Firefox alatt működik, Opera alatt is, de úgy tűnik, h Opera alatt min-height bugos kicsit, mert ablak átméretezésnél nem számolja újra. Ezt pl. úgy meg tudod oldani, h JS-sel onresize eseményre újra megadod min-height-ot Operának. IE-s CSS expression-t meg conditional comments-el tudod validdá tenni.

Attila
2

Persze a téma min-height aka

attlad · 2004. Nov. 10. (Sze), 18.46
Persze a téma min-height akart lenni, nem min-width...

Attila
4

valid...

bbalint · 2004. Nov. 10. (Sze), 18.59
(szvsz) attól még nem lesz érvényes CSS az a kód-rész, amit csak az internet explorer talál meg, a böngészők meg nem ... akkor valid valami, ha arra egy kód ellenőrző aszongya hogy az.

bbalint
5

valid oldal

attlad · 2004. Nov. 10. (Sze), 19.20
Ez igaz, de az oldal valid lesz, az hogy az az egy rész nem valid nem árt senkinek, már csak azért se mert kommentbe van, ezért a "kód ellenőrzőnek" semmi köze hozzá, h oda mit írok.

Attila
3

footerdemo

Jano · 2004. Nov. 10. (Sze), 18.50
Itt megtalalod a megoldast:
http://scott.sauyet.name/CSS/Demo/FooterDemo1.html
6

Köszi szépen a megoldásoka

coder · 2004. Nov. 10. (Sze), 19.26
Köszi szépen a megoldásokat Attila és Jano!

Az a druva, hogy az Attila féle megoldás jól működik, de beszól ez a nyamvadt IE6 SP2 ("To protect your security... IE has restricted...), most próbálgatom conditional commenttel.

A Jano által írt linken lévő oldal meg tök jól megy pl. Firefoxszal, de megintcsak IE6-tal nem úgy néz ki ahogy kéne :(

Ezzel a szutyok IE6-tal csak a baj van :(