nicht angemeldet
Box mit zentriertem Text erstellen
0 0 
Gunnar Bittersmann
Box mit zentriertem Text erstellen
Hallo,
vorneweg: Ich habe mir neu die Grundlagen von HTML und CSS beigebracht und bin demzufolge noch ein Anfänger auf dem Gebiet.
Zu meiner Frage:
Ich möchte eine Box erstellen, in der ein Bild angezeigt wird. Auf diesem Bild soll Text zu sehen sein. Um diesen Text soll eine Art durchsichtiger Rahmen sein, in dem der Text zentriert ist. Außerdem soll der Text/Rahmen sowohl vertikal als auch horizontal in dem Hintergrundbild zentriert werden.
Kann es leider nicht alleine hinbekommen. Folgende Probleme treten auf:
- Ich weiß nicht, wie ich die Schrift vertikal zentriert am Bild ausrichten kann.
- Ich schaffe es nicht, den Rahmen um den Text durchsichtig zu machen, ohne dabei den Text durchsichtig werden zu lassen.
- Ich weiß nicht, wie ich den Rahmen um den Text an die Länge/Höhe des Textes anpassen kann.
Hoffe, das war verständlich und ihr könnt mir weiterhelfen. Vielen DANK!
-
Hallo
- Ich weiß nicht, wie ich die Schrift vertikal zentriert am Bild ausrichten kann.
Mittels CSS und Flexbox.
- Ich schaffe es nicht, den Rahmen um den Text durchsichtig zu machen, ohne dabei den Text durchsichtig werden zu lassen.
Als Hintergrund- und/oder Rahmenfarbe eine Farbangabe mit Alphakanal verwenden, aktuell rgba oder hsla.
- Ich weiß nicht, wie ich den Rahmen um den Text an die Länge/Höhe des Textes anpassen kann.
Das macht der Rahmen von alleine. Der Inhalt von Containern bestimmt seine Größe. Die Abstände des Inhalts werden mittels CSS mit Angaben wie padding, border und margin bestimmt.
Das ist das ganz normale Verhalten. Wenn das nicht funktioniert hat der Webseitenersteller an anderer Stelle Angaben gemacht, die dieses Verhalten unterdrücken.
Gruss
MrMurphy
-
Vielen DAnk für die schnelle Antwort!
Leider konnte ich 1) und 2) nicht lösen.
Was ist eine Flexbox und was ein Alphakanal? Wie setze ich das praktisch um?
-
Hallo
Leider konnte ich 1) und 2) nicht lösen.
Um dir konkret helfen zu können benötigen wir einen Link zu deinen aktuellen Bemühungen. Wenn wir dir einen Quelltext vorlegen bist du bei deinem Kenntnisstand wahrscheinlich damit überfordet, den in deine Seite zu übernehmen.
Was ist eine Flexbox und was ein Alphakanal? Wie setze ich das praktisch um?
Damit wollte ich dir die entscheidenden Stichworte liefern, nach denen du suchen und die Ergebnisse lernen kannst.
Gruss
MrMurphy
-
-
@@ManU.K
Ich möchte eine Box erstellen, in der ein Bild angezeigt wird.
Zur Dekoration, also ein Hintergrundbild?
background-image.Auf diesem Bild soll Text zu sehen sein. Um diesen Text soll eine Art durchsichtiger Rahmen sein
padding.Außerdem soll der Text/Rahmen sowohl vertikal als auch horizontal in dem Hintergrundbild zentriert werden.
Das ginge mit
display: table-cell: BeispielOder doch besser mit Flexbox: Beispiel
Beachte: Bei
display: table-cellwirktmin-heightnicht, dafür wirktheightwie min-height.LLAP 🖖
--
„Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe-
Vielen Dank für eure Antworten!
Ich kriege es inzwischen soweit hin, dass ich mittels flex eine Box mit Text (=item) in einer anderen Box (=container) sowohl vertikal als auch horizontal ausrichten kann.
Jetzt ist aber mein Problem, dass der container, ein Bild ist. Ich kann das item ja nicht in ein Bild legen. Ich hoffe ihr versteht mein Problem.
-
@@ManU.K
Ich hoffe ihr versteht mein Problem.
Nein. Und das sagte dir MrMurphy1 auch schon.
LLAP 🖖
--
„Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe-
@@ManU.K
Ich hoffe ihr versteht mein Problem.
Nein. Und das sagte dir MrMurphy1 auch schon.
LLAP 🖖
„Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
So sieht mein Code aktuell aus:
<style> .container{ background-color:antiquewhite; width: 100%; height:10em; display: flex; align-items: center; justify-content: center; } .item{ background-color: aqua; text-align: center; width: 100px;; } </style></head>
<body>
<div class="container"> <div class="item">TEXT</div> </div>
</body>
Damit bekomme ich einen "Container", der vertikal und horizontal ein zentriertes "Item" enthält. Jetzt will ich statt eines einfachen divs ein Bild und das "Item" soll in diesem Bild zentriert werden. Wie mache ich das?
-
Hallo
Jetzt will ich statt eines einfachen divs ein Bild und das "Item" soll in diesem Bild zentriert werden. Wie mache ich das?
Das Bild wird als Hintergrundbild in den Container .container eingefügt.
Gruss
MrMurphy
-
[Vollzitat entfernt]
Das wars! Vielen Dank!!!! Konnte wieder einiges lernen :)
-
-
-
-
-