Frage zum Wiki-Artikel „float“

[Horst]

Hallo,

habe hier leider keinen Hinweis gefunden. Ich würde gerne eine mittig zentrierte, 1.000 px breite Seite erstellen.

Der 1. Hintergrund "allgemein" = body = Kachelfoto = komplette Seite, soll fixiert sein. Wäre also klassischer "Standart".

Nun zu meinem Problem:

Der 2. Hintergrund, ein "Foto 1600 x 1200 px" soll hinter der linken Hälfte der 1000er Skroll-Seite beginnen aber ebenfalls, wie 1. fixiert bleiben.

Ich müßte also zwischen dem "body" und dem "container" eine Art "Zwischenebene" haben wo das HG-Bild 500px links der Mitte anfängt und nach rechts, über die Mitte: 1100 px nach rechts raus läuft und ebenfalls fixiert bleibt.

Dann soll sich darüber die eigentliche Seite mit 1000 px drüber skrollen lassen.

Hat jemand ne Idee, wie ich den 2. Hintergrund / das Foto vom Zentrum 500px nach links und fix positionieren kann ?

Herzlichen Dank vorab. LG, Horst

[Matthias Scharwies]

Servus!

Hallo,

habe hier leider keinen Hinweis gefunden. Ich würde gerne eine mittig zentrierte, 1.000 px breite Seite erstellen.

Tipp 1:

Lass es, das widerspricht den Grundsätzen modernen Webdesigns:

wichtiger Grundlagenartikel im Wiki: HTML/Tutorials/responsive Webdesign

Tipp 2:

kein float, sondern margin: auto

wichtiger Grundlagenartikel im Wiki: Inhalte zentrieren

postion:fixed und background-position

Das mag in deiner Vorstellung bei 1000px gut aussehen, auf mobilen Geräten aber wohl eher nicht.

Tipp 3

Ein bisschen steht hier zu Parallax Scrolling mit Links auf weitere Beispiele.

Herzliche Grüße

Matthias Scharwies

[Horst]

Hallo Matthias, DANKE für Deine Antwort (stürze mich da gleich auch in die anderen Antworten rein). - JA, muß mich da wieder hinein knien, in die vielen Neuigkeiten. Dein 1. von den 3 Tipps, in Prozenten könnte meine Lösung verheißen. - Ich probiere es noch heute aus. - Herzlichen Dank, Horst

[Horst]

Hallo Matthias, habe gerade (11:37) ne Skizze hochgeladen, will sie nicht zu jedem Posting dabei tun. @ Admin: Diese hier bitte ggf. löschen, DANKE. LG, Horst

[Gunnar Bittersmann]

@@Horst

habe hier leider keinen Hinweis gefunden.

Das liegt weniger am Hier, eher am Jetzt.

Ich würde gerne eine mittig zentrierte, 1.000 px breite Seite erstellen.

Du bist ein Zeitreisender aus dem Jaht 1997? Willkommen in 2017!

Für wen willst du die Seite erstellen? Für dich? Für andere? Willst nur du sie lesen? Sollen andere sie lesen?

„Mittig zentriert“ heißt, ich bekäme nur die Mitte von den 1000px zu sehen? Also weder die linken 340px noch die rechten 340px? Mein Viewport des Browserfensters ist nämlich 320px breit. Bei anderen Nutzern ähnlich schmal.

Der 1. Hintergrund "allgemein" = body = Kachelfoto = komplette Seite, soll fixiert sein.

Fängt deine Zählung bei 0 oder bei 1 an? Im ersten Fall ist der 0. Hintergrund die komplette Seite; im zweiten Fall ist der 1. Hintergrund ≠ body. Es gibt das html-Element, das auch gestylt werden kann.

Der 2. Hintergrund, ein "Foto 1600 x 1200 px"

Das heißt in Kilobyte wieviel? Vermutlich zu viel.

soll hinter der linken Hälfte der 1000er Skroll-Seite beginnen […] wo das HG-Bild 500px links der Mitte anfängt und nach rechts, über die Mitte: 1100 px nach rechts raus läuft

?? Kannst du das mal aufmalen?

Hat jemand ne Idee, wie ich den 2. Hintergrund / das Foto vom Zentrum 500px nach links und fix positionieren kann ?

Mit der CSS-Eigenschaft background-position, eventuell mit calc()-Funktion.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Ich würde gerne eine mittig zentrierte, 1.000 px breite Seite erstellen.

Mein Viewport des Browserfensters ist nämlich 320px breit. Bei anderen Nutzern ähnlich schmal.

Was du gern würdest: eine mittig zentrierte, maximal 1.000 px breite Seite erstellen.

Das geht mit der CSS-Eigenschaft max-width. Und vergiss, dass es im Jahre 1997 mal px gab. Sämtliche Breiten- und Höhenangaben^[1] sollten sich auf die Schriftgröße (em, rem) oder die Größe des Containers (%) bzw. des Viewports (vw, vh, vmin, vmax) beziehen.

Zum Beispiel so.^[2]

LLAP 🖖

---

1. außer vielleicht dünne Linien (Rahmen) ↩︎

2. Das sollte ich mal von XHTML 1 auf HTML5 umschreiben. Und die ganzen Vendor-Präfixe können auch weg. ↩︎

[JürgenB]

Hallo,

beim horizontalen und vertikalen Zentrieren bzw. Ausrichten von Elementen habe ich z. B. hier mit folgendem CSS gute Erfahrungen gemacht:

#xyz { 
  width:10em;                      /* Größe des Elements */
  position:absolute;
  left:50vw; top:50vh;             /* Position der Mitte des Elements */
  transform: translate(-50%,-50%); /* Element um seine halbe Größe verschieben */
}

Wenn das umgebende Element nicht static positioniert ist, bezieht sich die Ausrichtung auf dieses Element.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

beim horizontalen und vertikalen Zentrieren bzw. Ausrichten von Elementen habe ich z. B. hier mit folgendem CSS gute Erfahrungen gemacht:

#xyz { 
  width:10em;                      /* Größe des Elements */
  position:absolute;
  left:50vw; top:50vh;             /* Position der Mitte des Elements */
  transform: translate(-50%,-50%); /* Element um seine halbe Größe verschieben */
}

Habe ich an der Wurzel auch so gemacht. Warum eigentlich? Mit Flexbox geht’s doch auch.

Wenn das umgebende Element nicht static positioniert ist, bezieht sich die Ausrichtung auf dieses Element.

Dann sollten aber top und left in % angegeben sein.

LLAP 🖖

[Horst]

Hallo Jürgen, DANKE auch für Deine Antwort. Das mit "Größe des Elements" kenne ich nur bzgl. Schriften. Liest sich auch ganz gut, wenn das auf Seitenbereiche angewendet werden kann (???). Werde ich nachher mal versuchen. - Herzlichen Dank, Horst

[Horst]

Hallo Billy, DANKE für Deine Antwort (stürze mich da gleich auch in die anderen Antworten rein). - JA, ich bin noch ein Dinosaurier, den die Neuzeit aufgeweckt hat, lach. Muß mich da wieder hinein knien, in die vielen Neuigkeiten. Ich habe da was ganz bestimmtes im Kopf. Habe mich vielleicht blöd ausgedrückt. Die Lösung könnte ggf. in Prozenten (Matthias) liegen.

• Natürlich sollen auch "andere" die Seiten lesen.
• Meine "Steinzeit"-Seiten sind sicherlich nicht der neueste Schrei, sind aber auch auf den kleineren "Bildschirmen" relativ gut zu sehen. Auch auf Smartphone.
• html-Element stylen: Gute Idee !
• Foto (Luftbildaufnahme) = 1600 x 1000, als JPG mit 10 % = 250 KB.
• Skizze: Gerne (hoffe sie ist hier zu sehen ?).
• "calc()"-Funktion ? sagt mir nix, schnorchel ich aber.

Herzlichen Dank, Horst

Entwurf-Wiki-mini.jpg

[Horst]

Hmmm - klappt nicht mit der Skizze. Vielleicht via Mail ? PN ?

[Auge]

Hallo

Es gibt direkt unter dem Eingabefeld eine Zeile, die mit „Bilder hierher ziehen oder klicken, um sie hochzuladen. Beachten Sie die Nutzungsbedingungen.“ beschriftet ist. Folge dieser Anweisung und du kannst Bilder hochladen. Eine Einbindung aus einer externen Quelle funktioniert mit dem Button „Bild hinzufügen“.

Ist das so unauffällig, dass man das nicht findet?

Tschö, Auge

[Horst]

Hallo "Auge", doch, doch, habe ich schon gesehen. Und auch probiert. Ohh, hatte es via Safari gemacht und ging nicht. Nun, via FireFox klappt es. DANKE !!! LG, Horst