Werbung:
![]()
Ich würde erstmal einen CSS-Reset durchführen, um die voreingestellten Randabstände margin (außen) / padding (innen) der verwendeten Blockelemente (<h1>, <p>) zurückzusetzen, sie in den Browser auf ein einheitliches Maß zu trimmen, da sie sich in ihnen auch unterscheiden.
Vermutlich war's das dann auch schon, und Du kannst abschließend die negativen margin-top-Werte revidieren, damit die Elemente nach dem durchgeführten Reset nicht zu weit oben sitzen.
Vermutlich war's das dann auch schon, und Du kannst abschließend die negativen margin-top-Werte revidieren, damit die Elemente nach dem durchgeführten Reset nicht zu weit oben sitzen.
- https://de.wikipedia.org/wiki/Reset-Stylesheet
- https://blog.selfhtml.org/2007/05/01/browserstyles-zuruecksetzen-reset-css/
- http://www.elmastudio.de/tipps-und-tricks-zum-css-reset/
- ...
Korrekt
Werbung:
![]()
Dann mach' Dich besser mit dem CSS3-Flexbox-Modell vertraut (Links folgen im Anschluß), um das "2-Spalten-Layout" entspannt und problemlos nach Deinen Vorstellungen aufzusetzen - anstatt daran zu verzweifeln, eine Vielzahl von Elementen mittels (z.T. negativer) margin-Werte aus ihrem normalen Textfluß herauszubrechen, um sie (u.a. nach oben) punktgenau an ihre anvisierte Position (in der Bildschirmausgabe) zu verrücken.
Der Inhalt der gebildeten Spaltenblöcke (links= #simson, #simsonbeschreibung / rechts = #frosersee) wird ohne großes Zutun automatisch oben ausgerichtet, sodass sich beide Bilder nun exakt auf derselben Höhe / vertikalen Position nebeneinander befinden.
Zudem läuft die Wartung/Pflege bei zukünftigen Änderungen/Erweiterungen wesentlich einfacher u. komfortabler vonstatten. Mit einer komplexeren Seitenstruktur, als der hier gezeigten, gestaltet es sich ansonsten zu einem schier nicht lösbaren Unterfangen.
Ich hab Dir mal fix* ein Fiddle-Demo gestrickt, damit Du das Resultat des Flexbox-Konzepts live in einem Preview erleben kannst, und im direkten Vergleich zu Deiner Vorgehensweise feststellen wirst, mit welch' geringem Aufwand sich Deine Vorstellungen von Seiteneinteilung und Ausrichtung der Inhalte per Flexbox umsetzen lässt; im CSS Zeile #31-37, alles übrige ist gestalterische Zugabe, ohne funktionellen Hintergrund.
* = für den erfahrenen/geübten Praktiker eine Angelegenheit von wenigen Minuten
Anmerkung: Da mein Beispiel Dir das Flexbox-Modell nur vom Grundsatz her näher bringen soll, und eben deshalb keine gebrauchsfertige Lösungsvorlage darstellt, habe ich die Details Deines präsentierten HTML-/CSS-Codes außer Acht gelassen, und beispielsweise alternative HTML-Elemente gewählt, die die Seitenstruktur semantisch aussagekräftiger auszeichnen, als es dem allgemeinen Blockelement <div> jemals gelingen könnte, sowie alle ID-Bezeichner ersatzlos aus HTML u. CSS entfernt. Die besitzen eine Daseinsberechtigung, wenn JavaScript ins Spiel kommt, um das DOM zu manipulieren, und ein involviertes Objekt über seine eindeutige/einzigartige ID im HTML-Code selektiert werden soll.
* = für den erfahrenen/geübten Praktiker eine Angelegenheit von wenigen Minuten
Anmerkung: Da mein Beispiel Dir das Flexbox-Modell nur vom Grundsatz her näher bringen soll, und eben deshalb keine gebrauchsfertige Lösungsvorlage darstellt, habe ich die Details Deines präsentierten HTML-/CSS-Codes außer Acht gelassen, und beispielsweise alternative HTML-Elemente gewählt, die die Seitenstruktur semantisch aussagekräftiger auszeichnen, als es dem allgemeinen Blockelement <div> jemals gelingen könnte, sowie alle ID-Bezeichner ersatzlos aus HTML u. CSS entfernt. Die besitzen eine Daseinsberechtigung, wenn JavaScript ins Spiel kommt, um das DOM zu manipulieren, und ein involviertes Objekt über seine eindeutige/einzigartige ID im HTML-Code selektiert werden soll.
