Zum Inhalt springen

Homepage unabhängig von Auflösung machen


Sebi80

Empfohlene Beiträge

Hallo,

habe mal wieder ein kleines Problem, welches ich selbst durch intensiveres Suchen bei Google noch nicht beheben konnte.

Also ich will da eine Homepage basteln, die nicht unbedingt abhängig von der Auflösung des Nutzers ist.

Da ich mal davon ausgehe, dass momentan die Auflösungen zwischen 800 x 600 und 1600 x 1200 schwanken will ich eben auf beiden eine etwa gleichwertig angezeigte Homepage haben.

Frage 1:

Ist das überhaupt möglich?

Frage 2:

Wenn ja mit welcher Lösung bekomm ich sowas hin?

Ich habe schon versucht, die Bilder bzw den Header für 1600 x 1200 zu machen und dann die Angaben prozentual zu machen, d.h. width = 100 %

Leider verzerrt es die Bilder dann bei 800 x 600 doch so dass das Ergebnis für mich nicht zufriedenstellend ist.

Wäre dankbar für eine Antwort :)

Gruss Sebi

Link zu diesem Kommentar
Auf anderen Seiten teilen

1. : ja

2. : mein Tip:

baue die Header (und Footer oder Nav) grafiken so, das sie je aus 2 oder mehr bereichen bestehen

Beispiel, header:

Du hast ein Bild, das machst du so das für "irgendeine" auflösung passt. Alles wichtige sollte auf der niedrigsten Auflösung zu sehen sein (ich empfehle 1024) bei 100% bildgröße. Alles was dann über den Bildschirm hinausgeht, ist nur zusätzlich. Bei Auflösungen die höher sind als das bild breit, sollte ein Bereich des bildes sich endlos wiederholen können (horizontal einfarbig, vertikal egal wie oder Textur).

Link zu diesem Kommentar
Auf anderen Seiten teilen

nein.

Aber zwei Beispiele:

1 Div-Layer mit dem wiederholenden Hintergrundbild.

2. Div-Layer mit dem nicht-wiederholenden bild.

Div2 vor Div1, beide Absolut positioniert.

Alternative:

tabelle. Als Td-Hintergrund das Wiederholende Bild, als TD-Inhalt das nicht-wiederholende.

die alternative sollte auch in gleicher Taktik mit Div funktionieren.

Link zu diesem Kommentar
Auf anderen Seiten teilen

Frage 1:

Ist das überhaupt möglich?

Frage 2:

Wenn ja mit welcher Lösung bekomm ich sowas hin?

zu 1:

Natürlich, HTML selbst war nie dafür gemacht, eine Seite für eine bestimmte Auflösung zu "designen".

zu 2:

http://www.csszengarden.com/

EDIT:

Ach ja, mit unabhängig von der Auflösung ist nicht gemeint, dass man bei 800x600 genauso wie bei 1600x1200 alles auf einer Seite, ohne scrollen, sieht. So kommt mir dein Versuch mit den verzerrten Grafiken nämlich vor.

EDIT2:

Nur horizontal scrollen sollte man eben vermeiden...

Link zu diesem Kommentar
Auf anderen Seiten teilen

zu 1:

Natürlich, HTML selbst war nie dafür gemacht, eine Seite für eine bestimmte Auflösung zu "designen".

zu 2:

http://www.csszengarden.com/

EDIT:

Ach ja, mit unabhängig von der Auflösung ist nicht gemeint, dass man bei 800x600 genauso wie bei 1600x1200 alles auf einer Seite, ohne scrollen, sieht. So kommt mir dein Versuch mit den verzerrten Grafiken nämlich vor.

EDIT2:

Nur horizontal scrollen sollte man eben vermeiden...

Dank dir, mir reicht es schon wenn das horizontal Scrollen vermieden wird :)

Die verzerrten Bilder entstehen dann, wenn ich die Breite und Länge des Headerbildes prozentual angebe :)

Link zu diesem Kommentar
Auf anderen Seiten teilen

Also ich hab mir die Seite mal angeschaut und muss sagen, dass ich da leider wenig durchblicke, kann aber an meinem Englisch liegen.

Bei der Seite geht es eigentlich nur darum, was man mit CSS alles machen kann (und das man eben keine Tabellen braucht, sondern nur gut strukturierten Inhalt). Es ist ein Inhalt, den du mit 100en verschiedener Designs (verschiedene externe CSS-Dateien) ansehen kannst.

Außerdem gibt es das ganze auch auf deutsch ;)

http://www.csszengarden.com/tr/deutsch/

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...