Beiträge von Silence

Silence · 11. September 2022

Hallo zusammen,

Ich möchte divs wie folgt positionieren:

html-seminar.de/woltlab/attachment/3300/

Ich hatte immer das Problem, dass der untere Rand von IMG-3 nicht in einer Linie mit IMG-1 ist.

Nun habe ich im Internet eine Möglichkeit gefunden, dass die vier nebeneinanderliegenden Divs gleich hoch sind. Allerdings sind nun IMG-2 und IMG-3 auch nebeneinander und ich schaffe es nicht, dass sie untereinander richtig positioniert sind.

html-seminar.de/woltlab/attachment/3301/

Code

<style>
#flex-container {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.img-panel {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 20%;
    padding: 10px;
    float: left;
    border: 1px solid #aaa;
}
img {
    width: 100%;
}
</style>
</head>

<body>
<div id="flex-container" >
  <div class="img-panel"> <img src="../images/img-1.jpg" alt=""> </div>
  <div class="img-panel">
    <div class="col-img"><img src="../images/img-2.jpg" alt=""></div>
    <div class="col-img"><img src="../images/img-3.jpg" alt=""></div>
  </div>
  <div class="img-panel"> <img src="../images/img-1.jpg" alt=""> </div>
  <div class="img-panel">
    <div class="col-img"><img src="../images/img-2.jpg" alt=""></div>
    <div class="col-img"><img src="../images/img-3.jpg" alt=""></div>
  </div>
</div>
</body>

Alles anzeigen

Habt ihr einen Tipp für mich?

Silence · 23. Juli 2021

Super, danke, funktioniert. Man muss nicht alles verstehen

Das mit dem figure-Tag schau ich mir mal an, danke für den Tipp.

Silence · 23. Juli 2021

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:

html-seminar.de/woltlab/attachment/3144/

Silence · 23. Juli 2021

Sorry, hier ist er.

CSS

.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;
}

Alles anzeigen

Silence · 22. Juli 2021

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

html-seminar.de/woltlab/attachment/3143/

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?

Code

<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>

Alles anzeigen

Danke im Voraus für eure Hilfe

Beiträge von Silence

Divs positionieren

Hintergrund hinter dem Bild, Text davor

Hintergrund hinter dem Bild, Text davor

Hintergrund hinter dem Bild, Text davor

Hintergrund hinter dem Bild, Text davor