Alsó dobozt mindig az oldal aljára
Hali!
A probléma elég érdekes: szeretném elérni, hogy egy táblázatmentes oldalon az alsó doboz mindig az oldal legalján legyen elérhető. Ha position: absolute és bottom: 0-al próbálkozok, akkor ha a tartalom túllép egy megadott szintet, a szöveg becsúszik a lábrész alá, és ez ugye nem egy szép látvány... Nem lehetne ezt áthidalni? A height: 100%-ra tojnak a böngészők, nem tudok tovább lépni. Várom az ötleteket. Előre is köszi:)
A kód:
■ A probléma elég érdekes: szeretném elérni, hogy egy táblázatmentes oldalon az alsó doboz mindig az oldal legalján legyen elérhető. Ha position: absolute és bottom: 0-al próbálkozok, akkor ha a tartalom túllép egy megadott szintet, a szöveg becsúszik a lábrész alá, és ez ugye nem egy szép látvány... Nem lehetne ezt áthidalni? A height: 100%-ra tojnak a böngészők, nem tudok tovább lépni. Várom az ötleteket. Előre is köszi:)
A kód:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
- "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <title>Bokatex Kft. - Kezdőlap</title>
- <style type="text/css">
- BODY
- {
- height: 100%;
- margin: 0px;
- padding: 0px;
- padding-bottom: 0px;
- background-color: #FFFFFF;
- color: #000000;
- }
- #header
- {
- width: 100%;
- height: 90px;
- color: #000000;
- background-color: #666666;
- vertical-align: middle;
- }
- #footer
- {
- width: 100%;
- height: 48px;
- min-height: 100%;
- background-color: #FFFFFF;
- background-image: url('img/title/back.gif');
- background-repeat: repeat-x;
- background-position: bottom;
- text-align: center;
- }
- #container
- {
- width: 100%;
- min-height: 100%;
- padding-bottom: 48px;
- border: solid 1px #000000;
- }
- #menuside
- {
- height: 100%;
- float: left;
- width: 180px;
- margin: 0px;
- padding: 0px;
- background-color: #666666;
- }
- #contentside
- {
- min-height: 100%;
- margin-left: 183px;
- padding: 0px;
- padding-bottom: 50px;
- padding-top: 3px;
- max-width: 36em;
- }
- #haromszog
- {
- height: 48px;
- background-image: url( 'img/main_down.gif' );
- background-repeat: no-repeat;
- background-position: center;
- font-family: Arial, Verdana, Helvetica, Sans-serif;
- font-size: 13px;
- font-weight: normal;
- color: #000000;
- text-decoration: none;
- text-align: center;
- }
- #lentiszoveg
- {
- padding-top: 30px;
- }
- </style>
- </head>
- <body>
- <div id="header">
- <img src="img/bokaico.gif" width="118" height="88" alt="Bokatex Kft." name="boklogo" style="float: left; padding: 1px 0px 1px 33px;"/>
- </div>
- <div id="container">
- <div id="menuside">
- Menürendszer
- </div>
- <div id="contentside">
- Tartalom<br>
- Még tartalom<br>
- Sok tartalom<br>
- Tartalom<br>
- Még tartalom<br>
- Sok tartalom<br>
- Tartalom<br>
- Még tartalom<br>
- Sok tartalom<br>
- </div>
- <div id="footer">
- <div id="haromszog"><div id="lentiszoveg">Ön a <b>000000</b> látogatónk</div></div>
- </div>
- </div>
- </body>
- </html>
ha jól értem
http://www.themaninblue.com/experiment/footerStickAlt/
sok szerencsét (magamnak is),
Tasi
Köszi :)