zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Automatische Anpassung an den Bildschirm

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.06.2012, 21:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.06.2012
Beiträge: 2
Rebekka befindet sich auf einem aufstrebenden Ast
Standard Automatische Anpassung an den Bildschirm

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
Dateityp: jpg Hompageproblem1.jpg (89,0 KB, 18x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.06.2012, 21:34
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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.)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 23.06.2012, 10:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.06.2012
Beiträge: 2
Rebekka befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 23.06.2012, 12:49
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.12.2006
Beiträge: 887
threadi sorgt für eine eindrucksvolle Atmosphärethreadi sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 23.06.2012, 13:10
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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.)
Mit Zitat antworten
  #6 (permalink)  
Alt 24.06.2012, 21:48
Neuer Benutzer
neuer user
 
Registriert seit: 01.07.2011
Beiträge: 28
simo befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von heiko_rs Beitrag anzeigen
Dass sich dagegen auch die Bilder/Grafiken der Viewport-Größe anpassen, ist bei herkömmlichen Websites eher nicht sinnvoll.
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
Mit Zitat antworten
  #7 (permalink)  
Alt 24.06.2012, 22:54
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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.)

Geändert von heiko_rs (24.06.2012 um 22:59 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 25.06.2012, 21:51
Neuer Benutzer
neuer user
 
Registriert seit: 01.07.2011
Beiträge: 28
simo befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von heiko_rs Beitrag anzeigen
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)
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:

Zitat:
Zitat von heiko_rs Beitrag anzeigen
2. kleines Bild(*) sehen, aber u.U. deutliches größeres laden müssen
(*)bzw nur einen kleinen Bildausschnitt sehen

Zitat:
Zitat von heiko_rs Beitrag anzeigen
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).
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.

Zitat:
Zitat von heiko_rs Beitrag anzeigen
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.
Ja, das ist klar.

Gruß
Simo
Mit Zitat antworten
Antwort

Stichwörter
anpassung, automatisch, bilder, schrift

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
"Hintergrund"-Bild über kompletten Bildschirm - IE scrollt nicht bzw. nur teilweise RollingStones CSS 4 17.12.2011 17:50
Safari in iOS5 (iPhone): Automatische Anpassung von Schriftgrößen AndreasB CSS 0 20.10.2011 17:35
Automatische Anpassung der Div-Größe speedy77 CSS 11 03.12.2007 11:58
Automatische gegenseitige Anpassung benachbarter DIVs lindner CSS 2 07.12.2006 21:49
Probleme mit min-height, automatische Anpassung der height anderer Spalten mkuegle CSS 5 01.06.2006 18:42


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:55 Uhr.