Hilfe bei CSS Text mittig zu Bild
hannes_green
- css
- html
Hallo zusammen,
ich habe eine kleine HTML/CSS Aufgabe, die ich erledigen soll. Jedoch bin ich im Programmieren ein kompletter Anfänger und komme nicht weiter.
Der Aufbau muss sich flexibel an dem Content der grauen Box ausrichten. Wenn der Text länger wird, muss sich das Bild automatisch in der Höhe anpassen.
Ich habe bereits einen Code zusammen gebastelt, aber der Textblock ist nicht mittig zum Bild zentriert und wahrscheinlich auch noch nicht flexibel.
Könnte mir jemand kurz behilflich sein? Das wäre nice :)
Mein Code:
<head>
<meta charset="UTF-8">
<title>HTML/CSS</title>
</head>
<style>
.grid-container {
display: grid;
}
.textbox {
display: flex;
background-color: rgb(224, 224, 224);
border: 20px solid rgb(255, 255, 255);
padding: 40px;
margin-left: 36%;
position: fixed;
z-index: 9;
justify-content: center;
align-content: stretch;
overflow: auto;
align-items: center;
}
.bild {
max-width: 100%;
max-height: 100%;
position: fixed;
z-index: 8;
align-content: stretch;
overflow: auto;
}
body {
margin: 25px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
h1 {
color: #892823;
font-family: "Open Sans", "Open Sans Bold";
font-size: 20px;
}
p {
text-align: justify;
font-size: 18px;
font-family: "Open Sans", "Open Sans Bold";
font-weight: 400;
line-height: 1,5em;
}
</style>
<body>
<div class="bild">
<img src="https://cdn1.site-media.eu/images/0/6433929/dachdeckerei-fischer-haeuser.jpg"
alt="Wohnhäuser in Berlin">
</div>
<div class="textbox">
<div>
<h1>Ich bin eine Überschrift</h1>
<p>
Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können. Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender körperlicher Betätigung, außer um Vorteile daraus zu ziehen? Aber wer hat irgend ein Recht, einen Menschen zu tadeln, der die Entscheidung trifft, eine Freude zu genießen, die keine unangenehmen Folgen hat, oder einen, der Schmerz vermeidet, welcher keine daraus resultierende Freude nach sich zieht? Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können. Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender körperlicher Betätigung, außer um Vorteile daraus zu ziehen? Aber wer hat irgend ein Recht, einen Menschen zu tadeln, der die Entscheidung trifft, eine Freude zu genießen, die keine unangenehmen Folgen hat, oder einen, der Schmerz vermeidet, welcher keine daraus resultierende Freude nach sich zieht?
</p>
</div>
</div>
</body>
</html>
@@hannes_green
Der Aufbau muss sich flexibel an dem Content der grauen Box ausrichten. Wenn der Text länger wird, muss sich das Bild automatisch in der Höhe anpassen.
Hä? Ich verstehe nicht, was das werden soll.
Das Bild soll ein gewisses Stück über und unter dem Text herausragen.
Aber wie breit soll das Bild sein? Soll es sein Seitenverhältnis beibehalten? Oder feste (Maximal-)Breite und der sichtbare Teil des Bildes wird links und rechts bzw. oben und unten beschnitten?
Wenn letzteres, dann ist es wohl kaum ein Inhaltsbild, sondern Dekoration. Warum steht das dann als <img>
im Markup und nicht als background-image
im Stylesheet?
Und wie soll abgeschnitten werden? Soll das Bild zentriert sein und links und rechts bzw. oben und unten gleich viel abgeschnitten werden?
Wie breit ist der Text? Maximalbreite?
Wie soll das bei schmaleren Viewports aussehen?
Fragen über Fragen …
🖖 Живіть довго і процвітайте
Hallo Gunnar,
mir scheint, als sollte das eine Hausaufgabe (Ferienübung oder Übung für ein Grundstudium Info) werden, und Hannes hat im Unterricht / in der Vorlesung nicht genug kapiert und will hier die Lösung bekommen. Responsivität ist nicht unbedingt etwas, was im Unterricht behandelt wird, und deshalb nicht im Scope der Aufgabe. Vermute ich… Dass Dir das aufstößt, weiß ich 😉
Wenn die Aufgabe hier aber genauso rudimentär wiedergegeben wird, wie das Thema im Unterricht verstanden wurde, können wir nicht viel helfen.
Jedoch bin ich im Programmieren ein kompletter Anfänger
Good News, Hannes - für HTML und CSS muss man nicht programmieren. Programmierung ist was ganz anderes. Mit HTML und CSS beschreibt man nur, welchen Inhalt man hat (HTML) und wie er aussehen soll (CSS).
Sicherlich hast Du einen Lerntext erhalten oder eine Vorlesung gehört. Die Aufgabe sollte für deinen erwarteten Lernstand gemacht sein und daher für Dich machbar.
Flexbox ist eine gute Idee, um vertikal zu zentrieren. Man kann das aber auch allein mit Margins lösen. Das Bild könnte sinnvoll ein background-image sein. Aber das ist ohne genaue Kenntnis der Aufgabe schwer zu beurteilen.
Rolf
@@Rolf B
mir scheint, als sollte das eine Hausaufgabe (Ferienübung oder Übung für ein Grundstudium Info) werden, und Hannes hat im Unterricht / in der Vorlesung nicht genug kapiert und will hier die Lösung bekommen.
Ja, den Eindruck habe ich auch.
Flexbox ist eine gute Idee, um vertikal zu zentrieren. Man kann das aber auch allein mit Margins lösen. Das Bild könnte sinnvoll ein background-image sein.
So hab ich’s. Nur ein div
für die Komponenente, d.h. bspw.
<div>
<h2>…</h2>
<p>…</p>
</div>
Zu schade, dass man die Lösung nocht nicht veröffentlichen darf. 😉
🖖 Живіть довго і процвітайте
@@Gunnar Bittersmann
Zu schade, dass man die Lösung nocht nicht veröffentlichen darf. 😉
Ist die Abgabefrist schon vorbei?
Egal, ich hab sowieso einige Sachen drin, die so nicht abgeschrieben werden können, ohne dass es auffällt.
“Hello? Anybody home? Hey think, McFly… You realize what would happen if I hand in my homework in your handwriting?”
Mein erster Versuch funktioniert, wenn die Box transparenten Hintergrund hat.
Bei eigener Hintergrundfarbe hatte ich schon befürchtet, man bräuchte zusätzliches Markup. Hab es dann aber im zweiten Versuch mit z-Indizes doch hinbekommen.
Das ist meine Interpretation der Aufgabe. Da es Hannes nicht für nötig hielt, zu sagen, wie er’s denn gerne hätte, war ja genug Interpretationsspielraum.
Und es ist auf diesen Inhalt zugeschnitten, insb. background-position
. Bei anderen Bildern müssten da andere Werte stehen, je nachdem, wo im Bild sich das Hauptmotiv befindet.
🖖 Живіть довго і процвітайте
Danke sehr für die Antworten!
Im Prinzip habe ich ja alles soweit angepasst und erstellt, nur fehlt mir noch das Wissen, das Bild automatisch zu skalieren oder in der proportionalen Größe zum Text zu versehen. Das heißt, wenn in der textbox mehr Text hineinkommen soll, sodass in Folge dessen die Box natürlich größer wird, so soll dann auch das Bild mit größer werden >>> Der Textblock muss immer horizontal zentriert zum Bild sein.
Viele Grüße
Hallo hannes_green,
Der Textblock muss immer horizontal zentriert zum Bild sein.
So sieht es nicht aus. Ich würde sagen: er ist vertikal zentriert.
Oder eher andersrum: Das Bild ist vertikal zum Textblock zentriert, da der Textblock die führende Rolle haben soll.
Gunnar hat gezeigt, wie ein <div> als Container um <h1> und <p> liegt (das <div> könnte auch ein <section>, <article> oder <main> Element sein). So ein div hast Du auch selbst schon verwendet. Dieser Container passt sich in seiner Höhe an den Inhalt von <h1> und <p> an.
Wenn Du nun diesem Container oben und unten Padding gibst und das Bild als background-image setzt (ohne repeat und mit Ausrichtung links) bist Du eigentlich fertig.
Wenn das Bild kein Deko-Element ist, sondern relevanter Inhalt, muss es ein img Element sein. In dem Fall hast Du mehr Arbeit, weil das Bild ja den Text unterschneiden soll. Ist es relevanter Inhalt?
Rolf
Cool Danke sehr Rolf! Das Bild ist kein relevanter Inhalt, der Textblock ist wesentlich (besonders in seinem Verhalten sich dem Inhalt automatisch anzupassen in der Höhe, wenn mehr Text reingeschrieben wird).
@@hannes_green
Danke sehr für die Antworten!
Es waren eher offene Fragen – die du komplett ignoriert hast.
Glückwunsch! Du hast alles, was in deinem Ursprungsposting schon klar war, nochmal wiederholt und uns über alles, was unklar war, weiterhin im Unklaren gelassen. So wird das nichts.
🖖 Живіть довго і процвітайте
Dann musst du mal an deiner Kommunikation arbeiten. Aus deinen Posts bin ich nicht schlau geworden 💁♂️
@@hannes_green
Dann musst du mal an deiner Kommunikation arbeiten.
Du beißt in die Hände, die dich füttern. 🤡
Aus deinen Posts bin ich nicht schlau geworden 💁♂️
Da könnten dir gezielte Nachfragen helfen. Ignorieren hilft jedenfalls nicht weiter.
🖖 Живіть довго і процвітайте
Dann musst du mal an deiner Kommunikation arbeiten.
😂
Ich hole schon mal Popcorn aus dem Schrank… ツ
@@Bimmelbeule
Ich hole schon mal Popcorn aus dem Schrank… ツ
Da muss ich dich enttäuschen. Wenn jemand, der es selbst auf Nachfrage nicht schafft, sein Problem zu kommunizieren, mit dem Finger auf andere zeigt, ist das selbst mir zu blöd, mich weiter darauf einzulassen.
🖖 Живіть довго і процвітайте
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
Hallo T-Rex,
text_wrapper wird als inline-block und text-align: right und einer breite von 60% definiert.
Warum kein padding-left von 40% auf .hintergrund? Das .text_wrapper div kannst Du dann unauffällig entsorgen.
Gunnar (...) Ich glaube aber er hat so seine Schwächen mit praktischen Dingen.
Im Gegenteil. Du verwechselst "praktisch" mit "zum Lernen vereinfacht" oder "unter Ausschluss eines Teils der Anwender:innen".
Die praktische Anwendung dieser Aufgabe muss all das berücksichtigen, wonach Gunnar gefragt hat. So weh es auch tut. Webfrontends waren vor 25 Jahren mal was, was man an einem Wochenende in der VHS lernen konnte. Die heutigen Anforderungen sind komplexer. Und wenn man das missachtet, ist das Ergebnis unpraktisch.
Rolf
@@Rolf B
Die praktische Anwendung dieser Aufgabe muss all das berücksichtigen, wonach Gunnar gefragt hat. So weh es auch tut. Webfrontends waren vor 25 Jahren mal was, was man an einem Wochenende in der VHS lernen konnte. Die heutigen Anforderungen sind komplexer.
Wobei sich meine Nachfragen außer der letzen nicht erst auf responsive design beziehen, sondern schon auf Hannes’ Anforderung „Der Aufbau muss sich flexibel an dem Content der grauen Box ausrichten. Wenn der Text länger wird, muss sich das Bild automatisch in der Höhe anpassen.“
Schon bei der Darstellung auf breiten Viewports will das überlegt sein, wie sich das Bild in der Komponte denn verhalten soll. Und diese Überlegung sollte Hannes anstellen. Wenn wir schon eine Lösung für ihn finden sollen, sollte er zumindest die Aufgabe präzisieren.
🖖 Живіть довго і процвітайте
Servus!
Hallo zusammen,
ich habe eine kleine HTML/CSS Aufgabe, die ich erledigen soll. Jedoch bin ich im Programmieren ein kompletter Anfänger und komme nicht weiter.
Das ist ja ein Media-Objekt.
Bei erneutem Anschauen finde ich die Lösung als Listenelemente schon zu kompliziert.
Hier wäre es wohl besser, ganz einfach anzufangen und das im Wiki neu zu machen!
Es sollte aber, wie @Gunnar Bittersmann betont hatte, von Anfang an responsiv sein.
Ich würde es in Grid Layout machen; evtl. wäre da sogar ein Einsatz der modernen container-queries möglich/interessant.
Herzliche Grüße
Matthias Scharwies
@@Matthias Scharwies
Das ist ja ein Media-Objekt.
Den Begriff höre ich zum ersten Mal in dieser Bedeutung. Und ich finde ich ihn irreführend. Für mich ist ein Media-Objekt ein Bild, ein Video oder ein Audio; nicht eine Box mit einem solchen und Text dazu.
Ich würde es in Grid Layout machen
Den Gedanken hatte ich auch mal. Da braucht man aber wohl zusätzliches Markup; mit nur einem div
drumherum ist es nicht getan.
Aber wie @Rolf B schon sagte, kriegt man das auch mit margin
/padding
hin.
🖖 Живіть довго і процвітайте
Servus!
@@Matthias Scharwies
Das ist ja ein Media-Objekt.
Den Begriff höre ich zum ersten Mal in dieser Bedeutung. Und ich finde ich ihn irreführend. Für mich ist ein Media-Objekt ein Bild, ein Video oder ein Audio; nicht eine Box mit einem solchen und Text dazu.
„The Media Object pattern is: image thingy on the left, heading and text on the right.
That’s what Nicole Sullivan called it and the name stuck.“
Auf der Suche nach Zick-Zack (bei geordneten Listen) stieß ich auf die Variation, die Bilder immer abwechselnd anzuordnen.
Herzliche Grüße
Matthias Scharwies
Hallo Matthias,
der Wiki-Artikel ist in der Tat nicht so toll. Die li Elemente kommen daher, dass hier eine Liste von Media-Objekten gestaltet wird. Deswegen finde ich die gar nicht so schlimm. Aber für die Erklärung des Patterns braucht man sie nicht, da wäre vermutlich eine figure besser.
Der Link auf Jay Freestone ist interessant wegen der Idee, aber wenn man schon auf ihn verweist, dann sollte man auch auf Konzeptunterschiede in Media-Objekten verweisen. Freestone schreibt über ein Flag-Objekt, bei dem man Wert darauf legt, dass Bild und Überschrift auf einer gemeinsamen Achse vertikal zentriert sind. Das Jahreszeiten-Media-Objekt, das im Wiki gezeigt wird, hat einen anderen Anspruch: Bild und Überschrift sind vertikal nach oben ausgerichtet und der Bildtext steht unter der Überschrift. Der Footer ist etwas, das unter dem Bild steht und aus meiner Sicht nur einen Sinn ergibt, wenn soviel Text da ist, dass unter dem Bild Weißraum bleibt.
Weitere Mankos: Das Grid passt sich nicht an seinen Inhalt an. Erweitert man den Text, hängt er unten aus dem Grid hinaus. Da ist noch einiges zu tun.
Die Überarbeitung sollte auf die möglichen Design-Zielsetzungen eingehen und die eventuell nötigen Unterschiede in der Grid-Definition beschreiben. Auto-Placement von Komponenten ist da eher kontraproduktiv, glaube ich.
Ein "generischer Media-Container" wäre nett, den man als fertigen Block seinen Stylesheets hinzufügt, aber da muss man aufpassen, nicht in die Bootstrap-Falle zu laufen und Layoutklassen zu erschaffen. Denn man müsste nun den Container (z.B. das li-Element) per Klasse als media-container festlegen und die Elemente darin, wieder mit Klassen, als Bild, Titel und Inhalt. Die Advanced Version wäre möglicherweise ein custom-element, da kann man die verwendeten Stylerules per JavaScript tweaken. Keine Ahnung, was da richtig ist. Gunnar, welche Zielrichtung würdest Du empfehlen?
Rolf
@@Matthias Scharwies
„The Media Object pattern is: image thingy on the left, heading and text on the right.
That’s what Nicole Sullivan called it and the name stuck.“
Dass Nicole Sullivan den Begriff gewählt hat, heißt nicht, dass er gut gewählt ist.
Und dass der Begriff bei Chris Coyier hängengeblieben ist, heißt nicht, dass er von vielen so verwendet wird.
Für mich ist und bleibt er missverständlich. Und SELFHTML sollte hier keinen missverständlichen Begriff verwenden.
🖖 Живіть довго і процвітайте
Hallo Gunnar,
ja, man findet erstaunlich wenige Treffer im Netz, wenn man den Begriff sucht.
Immerhin ist ein Schwergewicht dabei: MDN.
Ich stimme Dir aber zu, dass man unter Media Object eher das Mediendings verstehen könnte und nicht den kompletten Block. Ich finde "Media" auch zu unspezifisch, ein Video würde ich auf diese Weise eher nicht präsentieren. Und Audio sowieso nicht.
"Bebilderter Textblock" ist aber auch so richtig sch...recklich. Hast Du eine bessere Idee, dem Pattern einen Namen zu geben?
Rolf
@@Rolf B
"Bebilderter Textblock" ist aber auch so richtig sch...recklich. Hast Du eine bessere Idee, dem Pattern einen Namen zu geben?
Bei uns beim Tagesspiegel haben wir sowas als „Teaser“. Die Benennung bezieht sich aber auf den Zweck, Artikel anzuteasern (schönes denglisches Wort). Die Verwendung einer Bild-Text-Box mag auf anderen Seiten eine völlig andere sein.
Was spricht gegen „Bild-Text-Box“?
🖖 Живіть довго і процвітайте
Hallo Gunnar,
Was spricht gegen „Bild-Text-Box“?
Ah, bah - da fehlt doch jeglicher Glamour! 😉
Rolf
Hallo,
Ich stimme Dir aber zu, dass man unter Media Object eher das Mediendings verstehen könnte
als ich den Begriff gestern zum ersten Mal gelesen habe, dachte ich spontan an das object-Element von HTML mit einem Audio- oder Videoclip als verknüpftem Inhalt.
Ich finde "Media" auch zu unspezifisch, ein Video würde ich auf diese Weise eher nicht präsentieren. Und Audio sowieso nicht.
Ja, das stimmt wohl.
"Bebilderter Textblock" ist aber auch so richtig sch...recklich. Hast Du eine bessere Idee, dem Pattern einen Namen zu geben?
Leider nein.
Einen schönen Tag noch
Martin
Hast Du eine bessere Idee, dem Pattern einen Namen zu geben?
Hm. Wenn man schon alles benamen muss:
Servus!
"Bebilderter Textblock" ist aber auch so richtig sch...recklich. Hast Du eine bessere Idee, dem Pattern einen Namen zu geben?
Weil wir's gestern von containern hatten:
Ahmad Shadeed hat bei seinen „Karten“ eine News Card, wobei ich Teaser auch gut finde, da mir aber eher nur Text als Text-mit-Bild vorstelle.
Herzliche Grüße
Matthias Scharwies