Absolute Positionierung passte eher in die Zeit, in der es nur wenige Bildschirmgrößen gab. Heute ist meiner Meinung nach eher das Ziel eine Website passend und lesbar auf vielen unterschiedichen Geräten anzuzeigen. #4
danke für den Hinweis, aber es soll ja grundsätzlich skalierbar bleiben. Das hatte mit Anka auch wunderbar funktioniert. Wenn man aber jetzt auf der Webseite schaut, dann ist der footer alles andere als das. Bei mobilden Geräten schaut das auch extrem bescheiden aus....
#5
Ist meine Frage wirklich so schwer zu lösen, dass ich keine Hilfe erhalte? Würde mich wirklich sehr über einen engagierten Helfer oder eine Helferin freuen. #6
Hallo moonbootman Du hast bei deinen Aenderungen irgendwo ein DIV nicht richtig geschlossen. Zeige doch mal dein angepasstes;). #7
danke für Deine Antwort und Deine Hilfsbereitschaft. Habe sie mal in eine TXT umgewandelt, damit ich sie hochladen kann.... Css - Wie erstellen Sie einen footer im html-Dokument. lG Enrico
#8
Hallo Enrico Versuche es mal damit. #9
Perfekt, Problem gelöst! Herzlichen Dank!
Arbeiten wir die zusätzlichen Angaben in die CSS-Angaben ein:
padding: 0;}
html, body {
height: 100%;}
min-height: 100%;
Das Ergebnis in Demo 2 sieht schon besser aus. Leider jedoch nicht im Internet Explorer 6, der die Eigenschaft min-height nicht interpretieren kann (noch ältere IE-Versionen werden nicht berücksichtigt). Da dem #wrapper somit Breite und Höhe fehlen, wird im IE 6 der Hintergrund auch nicht durchgehend angezeigt. Also benötigen wir für den Internet Explorer 6 (er ist immer noch genügend verbreitet) einmal wieder eine Spezialangabe. Damit der #wrapper auf 100% Höhe kommt, wird für den IE 6 eingefügt:
* html #wrapper {
Dieses Beispiel beschränkt sich auf den wesentlichen Code, damit der Footer unten angeordnet ist. Natürlich kann man nun noch dem Wrapper eine feste Breite zuweisen, ihn zentrieren und in den Content andere Elemente wie z. B. Footer immer unten, die Zweite - Templates und Design - Joomla.de Supportforum - Das deutsche Joomla! Forum. Header, Navi und eben den eigentlichen Inhalt einfügen. In Demo 3 wurden einige derartige Angaben eingebaut. Sie sollte in allen gängigen Browsern, einschließlich dem Internet Explorer 6 gleich dargestellt werden.
5em;
article h1 {
color:#000000;
font-weight:bold;
text-align: center;}
footer {
width:100vw;
height:5em;
background-color: #000000;
Das was und eigentlich interessieren sollte ist die ID "wrapper" (#wrapper), hier wird die minimale Höhe des "wrappers" auf 100% des sichtbaren Bereiches festgelegt (vh). Jetzt kommt eine Möglichkeit die man seit HTML5 eingeführt hat, nähmlich "calc". Man kann ENDLICH mal absolute (px, pt, cm usw. ) mit relativen (em, %, vh, usw. ) kombinieren. In diesen Fall sagen wir den Browser: "Wenn der Inhalt nich mehr Platz braucht nimm 100% der sichtbaren Höhe und ziehe davon die Höhe des Footers (5em) und den Rahmen des Footers (6px, 3px unterer Rahmen, 3px oberer Rahmen) ab. Html footer immer unten google. " Hier könnt ihr euch das mal live anschauen, oder einfach runterladen. download
Fatal error: Array and string offset access syntax with curly braces is no longer supported in /customers/c/c/a/ on line 36
Aus Jux und Tollerei wollte ich jetzt einen Facebook-Like und einen -Teilen-Button mit einbauen, und das in einem Footer. Die Buttons habe ich beide jeweils in ein Div gepackt und diesen per "float: left;" gesagt, das sie sich nebeneinander von links anordnen sollen. Zumindest stand in sehr vielen anderen Foren in denen ich mich umgesehen habe so ziemlich überall genau das. Bei mir funktioniert das aus unerfindlichen Gründen leider nicht, die Buttons werden untereinander angeordnet. Html footer immer unten free. Zur Seite kommt ihr hier:
(Am Besten auf Lautlos stellen, nervige Musik im Hintergrund, außerdem hat sich der Footer von ganz unten in die Mitte der Seite verschoben, als ich die Seite am Localhost bearbeitet habe war das noch nicht so, komisch... )
Ich hoffe jemand von euch weiß woran es liegt und kann mir helfen. :)
Vielen Dank und LG, Bluedragon1
Das Tag
Hallo
Zitat:
Der Footer ist schön unten in der Galerie, nicht jedoch in den Bereichen wo der Inhalt nicht gross genug ist. Das ist nicht Sinn von HTML / CSS. Deshalb gibt es dafür auch keine direkte Lösung, sondern es muss mehr oder weniger getrickst werden. Der Oberbegriff dazu lautet Sticky Footer. Dahinter verbergen sich verschiedene Lösungen mit unterschiedlichen Nachteilen. Meist spielt irgendein Browser dabei auch nicht mit. Footer in HTML unten, aber ohne fixed? (CSS). Ich hoffe mir kann jemand auf die Schnelle helfen. Nein, für eine Lösung muss der aktuelle Quelltext überarbeitet werden. Insgesamt solltest du deine Seite zunächst so anpassen, dass sie auch ohne Sticky Footer zwar schlicht, aber nicht zerschossen aussieht. Danach suchst du dir eine Sticky Footer-Lösung aus mit der du zurechtkommst und baust die ein. Grundlage ist aber immer ein sauberer Quelltext. Deiner ist noch recht verbastelt und muss angepasst werden. Weiterhin solltest du nicht versuchen wenig Text auf möglichst viele Seiten zu verteilen. Deine aktuellen Inhalte sind eher für eine einseitige Webseite geschaffen, maximal jedoch zwei Seiten.
Problem:
Man legt auf einer HTML-Seite einen Footer an und dieser rutscht, sollte der Inhalt nicht so lang sein, in die Mitte o. in des untere drittel des Bildschirms. Er bleibt auf alle fälle nicht unten, wie man es erwartet. Lösung 1
Man setzt die Eigenschaften des Footer auf "psoition: fixed;", was aber nicht so schön ist weil der Footer dann immer unten bleibt. Egal wie lange der Text ist, der Footer ist unten und überdeckt ggf den Text. Lösung 2
Die ist, meiner Meinung nach die Beste und ich werde sie hier erklären. Wie es funktioniert, worauf man achten sollte usw.. Diese Lösung ist zwar etwas arbeitsintensiever aber es lohnt sich. 1. Schritt
Wir legen eine Schale um den Inhalt und lassen der Footer außen vor. Dumm ausgedrückt, aber wem was besseres einfällt kann mir das mailen. So nun zum Beispiel:
Footer unten