Zum Inhalt springen
View in the app

A better way to browse. Learn more.

Fachinformatiker.de

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Homepage unabhängig von Auflösung machen

Empfohlene Antworten

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

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

Hast du da eine Seite bzw. ein Tutorial, wo so etwas beschrieben ist?

Danke schonmal für deine Antwort.

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.

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

OK Danke nochmals.

Werde dann mal im Netz suchen, da ich nicht genau weiss, was Div Layer ist bzw . wie das angewandt wird.

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

Also ich hab mir die Seite mal angeschaut und muss sagen, dass ich da leider wenig durchblicke, kann aber an meinem Englisch liegen. Kannst du mir vielleicht mal n Stichwort sagen, nach dem ich bei Google suchen kann.

Sonst blick ich das gar nicht mehr :)

css

css-3 row/column layout

.....

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/

Archiv

Dieses Thema wurde archiviert und kann nicht mehr beantwortet werden.

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.