Hallo,

also ich versuche eine Homepage zu basteln.
Folgendes Problem. Am Rechner an der Uni sieht sie prima aus. Wenn ich sie zu Hause öffne ist alles ein wenig verschoben. Wenn ich das Fenster dann verkleiner ist es grausig ! Wie kann ich das ändern ?? was muss ich achen damit sich die Boxen/Bilder automatisch der Bildschirmgröße anpassen ??

Danke für die Hilfe !!

Gruß Rebekka

Angehängte Grafiken

Hompageproblem1.jpg (89,0 KB, 18x aufgerufen)

Ohne einen Link zur Seite kann man nicht viel sagen, außer: Wirf jegliches height und position: absolute; raus und verwende statt letzterem (falls nötig) float & clear.

Verwende außerdem ggf. min-width für body (z.B. 760px) und max-width für die eigentliche Website (z.B. 1200px oder mehr), damit die Fließtext-Zeilen nicht so unendlich lang werden und der Nutzer zu ihrer angenehmeren Lesbarkeit nicht den Viewport kleinziehen muss.

Dass sich dagegen auch die Bilder/Grafiken der Viewport-Größe anpassen, ist bei herkömmlichen Websites eher nicht sinnvoll.

__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)

Hallo Heiko,

danke für deine Antwort.

Also der Link zur Seite ist hier.:

Hauptseite

Warum die Bilder jetzt nicht angezeigt werden weiß ich jetzt auch nicht

Das sich die Bilder nicht automatisch anpassen hab ich gecheckt. Aber wie mache ich es dann, dass wenn ich das Fenster verkleiner ein ansehnlicher Ausschnitt zu sehen ist ?

Gruß Rebekka

Bevor Du dir über das Aussehen Gedanken machst, solltest Du den HTML-Code sauber schreiben. Aktuell ist nicht mal das Grundgerüst der HTML-Datei korrekt.
[Invalid] Markup Validation of http://fabday.fh-potsdam.de/~s11215/p3b/html%20+%20css/Kuchen%20und%20Schinken/ - W3C Markup Validator

Welches Grundgerüst ich meine? Siehe: SELFHTML: HTML/XHTML / Allgemeine Regeln fr HTML / Grundgerst einer HTML-Datei

Die Bilder hast Du momentan falsch referenziert. Nach deinen Angaben müssten Sie ausgehend von der CSS-Datei unter "../bilder/buch1.jpg" liegen, also dort:
fabday.fh-potsdam.de/~s11215/p3b/html + css/bilder/buch1.jpg
Dort liegen sie aber nicht. Also kontrolliere genau wo Du die Bilder abgelegt hast und gib den Pfad korrekt an.

Wie erwartet (Dein Screenshot ließ es ahnen) wimmelt es von height und pos. abs. - all diese Deklarationen sollten als erstes komplett raus. Außerdem nie leere Elemente zum Unterbringen von Deko-Grafiken.

Grafiken entweder als img, sofern inhaltlich relevant, oder als background-image, sofern nur Deko. Und letztere immer möglichst zusammenfassen, um HTTP-Anfragen zu Gunsten der Performance zu sparen - google auch "CSS-Sprites".

Mehr kann ich dazu leider jetzt nicht schreiben, denn ich muss weg.

__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)

Hallo Heiko,

Weshalb meinst du, das es nicht sinnvoll sei?
Dagegen spräche IMO nur, daß die Bilder beim Skalieren im Browser an Qualität verlieren, und daß es manchmal ziemlich knifflig ist, die Bilder wie gewünscht skalieren zu lassen, wie in meinen Thread zu sehen ist.

Wenn ich mir jetzt vorstelle, daß User mit niedrigem viewport, genauso wie User mit sehr hohem, beide einen 300px hohen Header angezeigt bekommen, dann ist das doch im ersten Fall sehr ungünstig.


Gruß
Simo

Mehrere Gründe sprechen imho dagegen:

1. per Browser kleinskalierte Bilder haben schlechtere Qualität als per Photoshop
2. kleines Bild sehen, aber u.U. deutliches größeres laden müssen
3. gerade Header haben in der Regel background-images, aber das dann nötige background-size läuft z.B. nicht im IE < 9
4. Höhenskalierung wirkt sich auf die Breite aus, damit die Grafik weder verzerrt noch abgeschnitten wird - soll das Bild bzw. der Header also bei einem Viewport mit geringer Höhe gleichzeitig auch schmaler werden? (nicht sinnvoll z.B. bei Breitbild-Laptops)

Wenn es um den Header geht, würde ich entweder gar nicht erst einen Riesen-Header kommen lassen, oder nur per media queries, z.B. per min-device-height (min-height finde ich hier weniger sinnvoll, da es damit u.U. zu Nachladen bei z.B. manueller Veränderung der Viewport-Höhe kommt).

Nicht ganz so nutzerfreudlich wäre der umgekehrte Weg: Riesen-Header per default, und für Browser, die media queries kennen, per max-device-height den kleineren Header kommen lassen.

__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)

An Hintergrundbilder habe ich jetzt noch gar nicht mal gedacht, sondern nur an Bilder, die per <img>-tag eingebunden werden.
Ja, diese Bilder müssen dann zum Erhalt der Proportionen auch schmaler werden. Konkretes Beispiel, das ich vor Augen habe, ist die Datei in meinem Thread:
http://xhtmlforum.de/css/67731-probl...er-bilder.html
Dort bestimmen die Grafiken die Header-Höhe, was Absicht ist, denn Hintergrundbilder lassen sich ja noch nicht skalieren.
Außerdem wollte ich vermeiden, was du unter Punk-2 angesprochen hast:

(*)bzw nur einen kleinen Bildausschnitt sehen

Der Unterschied war mir nicht bekannt. Danke für die Info.
Darf ich noch mal hartnäckig sein und nachfragen, warum der Besucher das nicht wollen sollte, daß bei manueller Veränderung der Viewport-Höhe ein entsprechend großes/kleines Bild nachgeladen wird?
Das frißt zwar Ressourcen durch einen zusätzlichen HTTP-Request, aber letztendlich hat er dann doch eine auf seinen aktuellen viewport optimierte Webseite.

Ja, das ist klar.

Gruß
Simo