Verschiedenes: Footer, Hintergrund, Auflösung

Hallo zusammen,

Ich poste mal hier im html Forum, wenngleich ich nicht sicher bin, ob das alles reine html Lösungen sein werden…

Ich arbeite gerade an dieser website: click
Wie man sieht ist sie ja noch lange nicht perfekt.

Ich möchte daher noch folgende Dinge verbessern, wollte aber erstmal hier nachfragen, bevor ich loslege.

[ul]
[li]der Footer soll immer am unteren Bildschirmrand fixiert sein. Zusätzlich möchte ich erreichen, dass auch das Hintergrundbild immer unten, direkt oberhalb des Footers ausgerichtet ist. Ist dies prinzipiell möglich?[/li][li]Ich möchte die Seite von 1024 x 768 px auf dynamische Auflösung anpassen. Was muss ich denn diesbezüglich in Richtung meines Logos und Hintergrundbildes beachten? Mein Logo ist im Moment 998 x 140 px groß. Was passiert mit dem Bild, wenn ich die website auf dynamische Auflösung einstelle, also z.B. jemand 1280 x 1024 px Auflösung eingestellt hat? Verzerrt sich dann das Bild? Sollte ich es vorher vergrößern? Die gleiche Frage stelle ich mir für das Hintergrundbild. Wird dieses sich verzerren?[/li][li]Wenn ich die Auflösung auf dynamische Größe verändere, sollte ich dann die Größe für das Logo auch anpassen? Andernfalls würde ich vermuten, dass es auf der fixierten Größe stehenbleibt. Oder kann ich diesen Teil des Codes prinzipiell entfernen?[/li][/ul]
[HTML] [/HTML]

Ich glaube, das wärs fürs erste. Freue mich über jeden Tipp. Vielen lieben Dank!! :stuck_out_tongue:

Zum Footer einfach mal anschauen:
[URL=„http://aktuell.de.selfhtml.org/artikel/css/footer/“]http://aktuell.de.selfhtml.org/artikel/css/footer/

D[/URL]as Logo setzt du mit eine relativen Breite fest, dann kann sich die Höhe anpassen. Oder eben andersrum. Dann noch ein absoluter Maximalwert für die sich frei anpassende Länge und das Logo ist sicher.

Vielen Dank schonmal für die Tipps. Bräuchte da aber nochmal Hilfe, bitte.
Ich habe jetzt meinen Footer fixiert. Wobei fixiert das falsche Wort ist, ich möchte ihn am Seitenende ausrichten. Ich habe dafür diese Seite zu Hilfe genommen:
Footer immer unten anordnen

Ich scheine aber irgendwo einen Fehler zu haben, denn der Footer erscheint jetzt bei mir scheinbar fixiert irgendwo in der Mitte der Seite.

Dies ist mein html-code:

[CODE]

Agrarservice Bernd Schich


Herzlich willkommen!

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

























Kontakt Impressum AGB
[/CODE]

Dies ist meine Footer.css

[CODE]* {
margin: 0;
padding: 0;
}

html, body {
height: 100%;
}

p, h1 {
padding-bottom: 10px;
}

#wrapper {
position: relative;
min-height: 100%;
}

#content {
padding: 1em 1em 2.5em 1em;
}

#footer {
position: absolute;
bottom: 0;
width: 100%;
line-height: 1.5em;
text-align: center;
}

  • html #wrapper {
    height: 100%;
    }[/CODE]

Wahrscheinlich seh ich grad den Wald vor lauter Bäumen nicht :-/

Kann mir jemand sagen, wo mein Fehler liegt? Vielen Dank!

Dafür sorgt derzeit die absolute Positionierung des Footers. Nimmst du diese raus ordnet sich der Footer automatisch unten ein, siehe auch hier:
Verschiedenes: Footer, Hintergrund, Auflsung

Noch der obligatorische Hinweis: Tabellen sind nicht für Layouts gedacht. Inhalt hat im Head nichts zu suchen, also zB. die Divs content und wrapper.

Ähm das macht natürlich Sinn :oops: Änder ich gleich heute abend ab, hätt ich natürlich auch von selbst drauf kommen können :-?

Danke für den Hinweis, ich werd das noch entsprechend überarbeiten. Bin eh noch nicht durch mit dem Layout.
Wollt das ganze auch noch mal durch den html validator laufen lassen.

Auf jeden Fall danke schonmal für deine Hilfe! :smiley:

Das meiner Meinung nach beste Tutorial für einen Footer, der immer ganz unten ist: A CSS Sticky Footer
Ich würde mit dynamischer Größe bei dir aufpassen. Die Bilder sind eh schon nicht die schärfsten (also etwas verpixelt). Wenn die dann noch gestreckt werden sieht es vll. nicht mehr so gut aus…

Was für eine Auflösung für die Bilder wäre denn am idealsten für dynamische Auflösung?
Ich hab noch die Originalfotos unbearbeitet auf dem Rechner.

Im Original hat der Header 2481 x 788 px
und der Hintergrund 2481 x 1392 px

Ich hatte die fürs erste nur verkleinert, weil ich dachte das wäre besser.
Meinst du mit den unbearbeiteten Originalen würde das besser funktionieren?

Das ist schwer pauschal zu beantworten. Das ist eine Abwägung zwischen visuellem Eindruck und Bildgröße. Zu große Bilder laden vielleicht zu lange (und werden in kleinen Viewports ohnehin nicht benötigt), zu kleine Bilder sehen in großen Viewports vielleicht nicht mehr gut aus.

Ich würde es aber mit der Bildgröße nicht übertreiben. Es ist schließlich nur ein dezentes Hintergrundbild. Du solltest das Bild aber nach JPEG umwandeln. GIF ist Platzverschwendung.

Naja, 2481px ist dann doch etwas groß. Dann dauert das Laden bei langsamen Verbindungen etwas zu lange.
Ich würde die wohl auf 1440px skalieren, größere Auflösungen sind doch recht selten, denk ich…

Ok danke, dann werd ich das so machen :smiley:
Eine Frage hab ich noch…ich habe das Hintergrundbild jetzt so positioniert:

BODY, HTML { font-family : Verdana, Tahoma, Geneva, Arial, Helvetica, sans-serif; font-size: 8pt; background: url(../images/background_800pxheight.gif); background-repeat: no-repeat; background-position: 0px 70px;

Eigentlich hätte ich es am liebsten, wenn der Footer sich am Hintergrundbild unten ausrichtet, abr ich bekomm’s nicht hin.
Die .css sieht so aus:

[code]* {
margin: 0;
padding: 0;
}

html, body {
height: 100%;
}

p, h1 {
padding-bottom: 10px;
}

#wrapper {
position: relative;
min-height: 100%;
}

#content {
padding: 1em 1em 2.5em 1em;
}

#footer {
bottom: 0;
position:relative;
width: 100%;
line-height: 1.5em;
text-align: left;
}

  • html #wrapper {
    height: 100%;
    }[/code]

Wo hab ich denn hier noch einen Denkfehler?

Die interessantere Frage ist, was du machst, wenn der Content einmal länger als <Höhe des Hintergrundbilds> wird.

Vielleicht ist diese Technik nützlich für dich:

Vielen Dank für die Tipps. Hab’s jetzt erstmal so gemacht:

#footer { bottom: 10px; position: absolute; left: 0px; top: 850px; width: 998px; line-height: 1.5em; text-align: left;