Hilfe bei CSS Text mittig zu Bild

[T-Rex]

Moin Hannes,

ich weiß nicht was in der Aufgabe gegeben ist und was nicht. Wenn das HTML nicht vorgegeben ist und du es selbst gebastelt hast, dann könntest du es ja verändern.

Ich möchte nicht gerne über andere sprechen, mache es hier aber mal doch. Gunnar ist für mich ein Gott in HTML und CSS. Was er sagt ist gesetzt! Ich glaube aber er hat so seine Schwächen mit praktischen Dingen. Deshalb würde ich sagen, wir versuchen mal deine Hausaufgabe (oder was auch immer) zu lösen und kümmern uns nicht so um den "richtigen" Ansatz. Solltest du dich irgendwann richtig für Websachen interessieren kann ich dir nur raten dich in selfhtml tief ein zu lesen!

Aber gut zur Aufgabe. Wir ignorieren mal ob das Bild wichtig ist für die Seite oder nicht. Deshalb steht nur im Blickpunkt wie man ein Bild leicht positionieren kann. Und das geht am besten, wenn man es als Hintergrundbild setzt.

Deshalb hätte ich schonmal die erste Box <div class='hintergrund'></div>. Da steht das Bild mittel background-image drin. Jetzt musst du dafür sorgen, dass nur 50% davon angezeigt werden und die angezeigten 50% links stehen. Das darfst du machen ;).

In der <div> Box würde mehrere Boxen mit dem Text verschachteln. Am Ende würde das dann so aussehen:

<div class='hintergrund'>
   <div class='text_wrapper'>
      <div class='header'>
         Ich bin eine Überschrift
      </div>
      <div class='text'>
         Auch gibt es niemanden...
      </div>
   </div>
</div>

Div ist hier nur als Dummy gedacht. Die richtigen HTML Elemente darfst du dir selbst raussuchen 😉.

hintergrund hat eine Breite von 100%. text_wrapper wird als inline-block und text-align: right und einer breite von 60% definiert. Außerdem gibst du ihm noch einen margin-top und margin-bottom von 10px (oder mehr, je nach bedarf). Du kannst es auch flexibel gestallten in dem du margin-bottom auf 1vw setzt. Dann ist hat es 1% der Breite des sichtbaren Bereichs. Somit hätten wir schonmal den oberen und unteren Abstand. Hintergrund grau, border mit 5px solid white und ein padding 10px sollten die Box im groben stylen.

So ungefähr würde ich es lösen. Bei den Größenangaben würde ich nach Augenmaß entscheiden bzw. die musst du halt ein wenig anpassen.

Sorry dass ich es dir nicht komplett löse. Du sollst ja auch noch was lernen 😀. Achja, wenn das HTML vorgegeben ist und du es nicht ändern darfst, dann funktioniert mein Lösungsvorschlag natürlich nicht. Dann müsstest du mittels display flex oder position absolute dir was zusammenbasteln.

Ich hoffe dennoch, dass ich helfen konnte
Gruß
Professor T-Rex