16.06.2006, 21:56
|
||||
|
||||
So geht's in FX 1.5, Netscape 7, Opera 7 bis 8.5, und IE 5.0 bis 6. Das Markup bleibt gleich (bis auf den Inhalt von #footer), die Regel für #footer wird erweitert (Fettschrift), und es kommen 2 Regeln hinzu. Ob man innerhalb von #footer nun span benutzt, oder ein zweites p oder auch strong etc., kann man sich natürlich aussuchen (es sollte allerdings mindestens ein p sein, damit auch ohne CSS ein Absatz entsteht), und auch immer schauen, wie das Ganze ohne CSS aussieht. Schön wäre auch eine Liste für die 3 Links!
Code:
<div id="footer"> <span>Copyright 2006 by Safran Quader</span> <p>Impressum | Kontakt | Disclaimer</p> </div> <div id="rechts2"></div> Code:
#footer {
position: relative;
background: url('images/footer.jpg');
color: #fff;
height: 90px;
clear: both; }
#footer span {
display: block;
position: absolute;
left: 3px;
bottom: 3px; }
#footer p {
position: absolute;
bottom: 3px;
right: 3px;
margin: 0;
padding: 0; }
Geändert von heiko_rs (16.06.2006 um 22:04 Uhr) 
|
| Sponsored Links |
|
24.06.2006, 15:55
|
||||
|
||||
|
Hallo,
kann mir wer bitte noch einmal kurz helfen? Ich habe einen Hintergrund der sich vertikal wiederholt eingebaut und dementsprechend musste ich den Footer umpositionieren. Ich denke Position: absolute war dazu offensichtlich die falsche Wahl, denn der IE protestiert nun heftig. Ich denke das es eine vernünftigere Lösung gibt, aber mir fällt keine ein. Am liebsten würde ich diesen doofen Browser ausschließen. Warum wird der eigentlich noch so oft benutzt? Ich komme mit ihm mittlwerweile gar nicht mehr zurecht. Naja, egal.. Vielen Dank im Vorraus!
|
|
24.06.2006, 18:42
|
||||
|
||||
|
Die Variante per position: absolute; sollte man eh nicht verwenden. Warum, wird auf der Seite erklärt, auf der die beste Lösung (per negativem margin-top) geschildert wird: FooterStickAlt
Um diese Variante umzusetzen, ändere Dein Markup, so daß Du 3 allein stehende Container hast (in dieser Reihenfolge): 1. Einen Container für alle Inhalte 2. #rechts2 3. #footer Dann wendest Du auf 1. die 100%-Höhe an und weist ihm den sich bis unten fortsetzenden Hintergrund zu. Dann schiebst Du 2. per negativem margin-top nach oben (seine eigene Höhe plus Höhe von 3.), und dann schiebst Du 3. ebenfalls per negativem margin-top (entsprechend seiner Höhe) nach oben. Dabei muß für die Elemente innerhalb von 1. natürlich genug Platz nach unten sein, was Du durch entsprechendes padding-bottom für die enthaltenen Elemente erreichst (nicht für 1., da das padding dann zur 100%-Höhe addiert würde). Damit 1. die Floats einschließt (der Footer kann ja nun nicht mehr clearen), wendest Du am Besten "Clearfix" an. Das unterstützt zwar der IE nicht, aber da 1. eine Dimension hat (in Form der Höhe), schließt er die Floats automatisch mit ein.
|
 |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Anfängerfrage: Zentrierung in Galerie und Border-Problem | goldbeere | CSS | 3 | 04.11.2013 19:07 |
| Container am unteren Rand & Content 100% Höhe | KILLHILL | CSS | 1 | 23.10.2009 15:46 |
| Positionierung von Container horizontal | mayhemtl | CSS | 9 | 11.08.2007 15:25 |
| ul im container am unteren ende platzieren | SKVler | CSS | 8 | 17.09.2006 18:30 |
| Container nimmt nicht die Höhe seines Inhalts an | Lestat | CSS | 10 | 04.08.2005 13:47 |
Linear-Darstellung
