| | | | |
| |||||||
| HTML, Usability und Barrierefreiheit Themen rund um Textauszeichnung, Formatierung, Barrierefreiheit und Usability. |
 |
| | LinkBack | Themen-Optionen | Thema bewerten |
18.09.2006, 11:45
| |
| Erfahrener Benutzer Registriert seit: 17.07.2005
Beiträge: 160
 |  footer ständig unten bei 2-Spaltigem Layout? Hallo Ich möchte ein 2-spaltiges Layout erstellen, bei dem der Footer ständig zuunterst ist, egal wieviel text geschrieben wurde. Einspaltig funktionitert das ganz prima hier das CSS file: Code: @CHARSET "ISO-8859-1";
html{
height: 100%;
margin:0;
padding:0;
}
body{
color: red;
background-color: #F3F3F3;
margin:0;
padding:0;
height: 100%;
}
#page{
height: 100%; /* das hier für den IE für andere siehe #page[id] */
padding:0;
margin-left: auto;
margin-right: auto;
width: 750px;
border-left: 1px solid #3B3B3B;
background-color: white;
color: #3B3B3B;
position: relative;
}
#page[id] {
height:auto;
min-height:100%;
}
#header{
width: 750px;
height: 200px;
padding:0;
margin:0;
background-image: url(../pictures/head_6.jpg);
background-repeat: no-repeat;
position: relative;
}
#content{ /*enthält #links und #rechts*/
position:relative;
padding-bottom: 55px;
}
#left{
width: 490px; /*750px Gesamtbreite minus 200px rechts minus 2*20px padding
von rechter Spalte minus 20px padding links*/
float: left;
margin:0;
padding-left: 20px;
padding-top: 20px;
}
#right{
float: right;
width: 200px;
margin: 0;
padding: 20px;
}
.box{
background-image: url(../pictures/boxtitel_1.jpg);
background-repeat: no-repeat;
background-color: #F3F3F3;
color: #3B3B3B;
margin:0;
padding: 0 10px 10px 10px;
}
#footer{
position: absolute;
bottom: 0;
clear:both;
width:710px; /*40px kleiner als Breite des Containers, da auf jeder Seite noch 20px padding*/
height:30px;
margin:0;
padding: 10px 20px 0px 20px;
border-top: 1px dotted #3B3B3B;
}
Code: <body> <div id="page"> <div id="header"> </div> <div id="content"> Seitenfüllendes Blabla... Seitenfüllendes Blabla... Seitenfüllendes Blabla... <!-- </div> <!-- <div id="right"> <div class="box"> Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... </div> <!-- <div class="box"> Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... </div> <div class="box"> Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... Boxenfüllendes Blabla... </div> </div> </div> <div id="footer"> Footer </div> </div> </body> Der Footer wird Ende Bildschirm angezeigt, anstatt wie gewünscht ende Text, es scheint also, als ob der inhalt von #rechts und #links nicht als Inhalt von #content angesehen wird, dies zeigt sich wenn ich einen Rahmen um content lege! Ich hoffe das war jetzt nicht allzu verwirrend. Bin für eure Tips dankbar! Besten Dank |
|  |
 | |
| PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten | |
|
24.09.2006, 15:26
| |
| moderatives Dielektrikum  Registriert seit: 21.05.2008
Beiträge: 35.987
PHP-Kenntnisse: Fortgeschritten   | Lass doch die absolute positionierung des footers weg oder setz sie auf position:relative; , dann klappts jedenfalls in meinem firefox. |
|
| |
|
24.09.2006, 21:53
| |
| Erfahrener Benutzer Registriert seit: 17.07.2005
Beiträge: 160
| Funktioniert nun! Lag daran, dass ich vergass zu clearen! Besten Dank |
|
| |
| |
| Themen-Optionen | |
| Thema bewerten | |
|
|
Ähnliche Themen | ||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Problem mit CSS Layout | Kein Genie | HTML, Usability und Barrierefreiheit | 3 | 16.03.2007 10:52 |
| Firefox will mein 3-spaltiges Layout mit Footer nicht (CSS)! | vampsoftchef | HTML, Usability und Barrierefreiheit | 1 | 28.02.2007 00:22 |
| Footer position fixed | andrew22 | HTML, Usability und Barrierefreiheit | 1 | 14.11.2006 16:00 |
| 2-spaltiges Layout | dh1sbg | HTML, Usability und Barrierefreiheit | 7 | 13.11.2006 13:52 |
| css layout frage | HTML, Usability und Barrierefreiheit | 1 | 23.02.2006 20:56 | |
| [Erledigt] Problem mit Layout bei Firefox | HTML, Usability und Barrierefreiheit | 3 | 14.11.2005 15:42 | |
| Problem mit CSS Layout | HTML, Usability und Barrierefreiheit | 5 | 15.10.2005 21:46 | |
| problem mit layout | Beitragsarchiv | 12 | 13.10.2005 12:41 | |
| [Erledigt] Probleme bei Fehlerausgabe und bei Layout | PHP Tipps 2005-2 | 3 | 01.10.2005 09:26 | |
| 3 Div Layout, Problem da Mitte zu lang | faragerri | HTML, Usability und Barrierefreiheit | 3 | 11.08.2005 10:17 |
| [Erledigt] <div> layout funtzt nicht!! | HTML, Usability und Barrierefreiheit | 7 | 20.04.2005 19:10 | |
| Dynamisches Layout über DIV-Tags | R4v3r | HTML, Usability und Barrierefreiheit | 3 | 19.03.2005 02:43 |
| Layout mittels DIV und CSS | HTML, Usability und Barrierefreiheit | 4 | 21.12.2004 13:02 | |
| Layout alt gegen Neu :) | themonk | Off-Topic Diskussionen | 65 | 26.10.2004 13:53 |
Dieser Inhalt ist unter einer Creative Commons-Lizenz lizenziert.
