Super, danke, funktioniert. Man muss nicht alles verstehen 
Das mit dem figure-Tag schau ich mir mal an, danke für den Tipp.
Beiträge von Silence
-
-
Ja, aber das funktioniert ja auch (siehe erste Reihe). Was ich nicht verstehe ist, dass das der graue Hintergrund hinter dem Bild verschwindet.
Also richtig ausschauen würde es so:
-
Sorry, hier ist er.
Alles anzeigenCode- .row{
- width: 80%;
- margin: auto;
- padding: 50px 0;
- border: solid;
- }
- .content{
- display: flex;
- justify-content: center;
- align-items: center;
- border: solid #FF0004;
- }
- .w75{width: 75%; margin: auto;}
- .i15{width: 19%;}
- .imagebox img { width: 100%;
- border: #FFFFFF 10px solid}
- .minibox{
- margin-left: auto;
- margin-right: auto;
- margin-top: -50%;
- text-align: center;
- display:flex;
- justify-content: center;
- width: 50%;
- height: 30px;
- background-color: #cccccc!important;
- }
- .minibox2{
- margin-left: auto;
- margin-right: auto;
- display:flex;
- justify-content: center;
- align-items:center;
- height: 30px;
- width: 50%;
- background-color: #cccccc!important;
- margin-top: -10%;
- }
- .minibox3{
- margin-left: auto;
- margin-right: auto;
- display:flex;
- justify-content: center;
- align-items:center;
- height: 30px;
- width: 50%;
- background-color: #cccccc!important;
- }
-
Hallo zusammen,
bin etwas verwirrt, ich dachte immer, entweder ist ein div vor einem anderen oder dahinter. In meinem Fall irgendwie beides.
Um es verständlicher zu machen, hier ein Screenshot
Die Rahmen machen die verschiedenen divs sichtbar. Die roten Felder sind Grafiken mit einem weißen Rahmen.
Darunter ist jeweis ein div mit grauer Hintergrundfarbe und einem Text darin.
Dieser Text soll über dem Bild sein - das habe ich mit margin: -50% gemacht. Der Text ist sichtbar, der Hintergrund nicht.
Bei den unteren Reihen ist margin - 10% und ganz unten 0.
Wie man sieht verschwindet der der Hintergrund hinter dem Bild, der Text ist aber dort wo er sein soll.
Wie kann das sein?
Alles anzeigenCode- <div class="row">
- <div class="content w75">
- <div class="imagebox i15 left">
- <div> <img src="images/block_1/testbild.jpg" alt=""/></div>
- <div class="minibox">Cleo</div>
- </div>
- </div>
- ...
- <div class="content w75">
- <div class="imagebox i15 right">
- <div> <img src="images/block_1/testbild.jpg" alt=""/></div>
- <div class="minibox">Fotografie</div>
- </div>
- </div>
- </div>
Danke im Voraus für eure Hilfe