IMG Tags von DIV Tags umschlungen

Gosi · 27. Februar 2016

Hallo Leute,

habe folgenden Quellcode geschrieben und habe nun folgendes Problem

ich möchte gerne um jeden img Tag ein Div zaubern um unter dem Bild einen Text hineinschreiben.
Dies sollte sich danach auch responsiv verhalten.

mein Problem ist nun dass wenn ich einen DIV Tag um das element füge, die Datei sich nach oben verschiebt
und eig den Bottom als "Nullpunkt verwendet.

Kann mir da einer helfen ?

HTML

<div id="wrapper_home">        <div id="content">            <div id="row">                <div class="inhalt">                    <img src="images/flyer-fb_300px.jpg">                    <p>Hier sollte ein Text und ein <a href="#">Link </a>herkommen</p>                </div>                <div class="inhalt">                    <img src="images/flyer-fb_300px.jpg">                    <p>Auch hier soll der Text erscheinen mit einem <a href="#">Link</a>welcher nicht größer als die vorgegebene Box sein darf denn sonst wandert das Div in </p>                </div>                <div class="inhalt">                    <img src="images/flyer-fb_300px.jpg">                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd <a href="#">LINK</a>gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>                </div>                    <img src="images/flyer-fb_300px.jpg">                </div>            </div>        </div>

und hier die dazugehörige css Datei

CSS

#content{height: auto;width: 100%;text-align: center;}.inhalt{width: 300px;height: 700px;display: inline-block;}

kann das sein dass ich hier irgendwas vergessen habe ? oder falsch geschrieben habe ??

Bitte um Hilfe MFG

MrMurphy · 27. Februar 2016

Hallo

Aus deiner bisherigen Problembeschreibung geht leider nicht hervor, wie das Layout aussehen soll. Quellcodeschnipsel sind für eine konkrete Hilfe in der Regel auch nicht ausreichend. Zumal wenn es auch um Grafiken geht, diese uns aber nicht vorliegen.

Nach deiner bisherigen Beschreibung sind eher die dafür vorgesehenen figure- und figcaption-Elemente geeignet. Als umgebendes Element zum Beispiel ein section-Element. Das lässt sich aber nur im Zusammenhang mit der kompletten Seite beurteilen. Der Quelltext im body-Bereich könnte dann so aussehen:

Code

<body>
   <section>
      <figure class="inhalt">
         <img src="http://lorempixel.com/300/150/transport/2" alt="kleines Flugzeug" />
         <figcaption>Hier sollte ein Text und ein <a href="#">Link </a>herkommen</figcaption>
      </figure>
      <figure class="inhalt">
         <img src="http://lorempixel.com/300/150/transport/2" alt="kleines Flugzeug" />
         <figcaption>Auch hier soll der Text erscheinen mit einem <a href="#">Link</a>welcher nicht größer als die vorgegebene Box sein darf denn sonst wandert das Div in </figcaption>
      </figure>
      <figure class="inhalt">
         <img src="http://lorempixel.com/300/150/transport/2" alt="kleines Flugzeug" />
         <figcaption>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd <a href="#">LINK</a>gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</figcaption>
      </figure>
      <figure>
         <img src="http://lorempixel.com/300/150/transport/2" alt="kleines Flugzeug" />
      </figure>
   </section>
</body>

Alles anzeigen

Die Ausrichtung der Elemente kann mittels CSS mit dem Flexbox-Modell erreicht werden. Aber wie schon geschrieben ist zumindest mir noch nicht klar, was du im Endeffekt erreichen möchtest. Wenn du keine unrealistischen Wünsche hast kann ich dir wahrscheinlich auch ein CSS-Beispiel erstellen.

Gruss

MrMurphy

Gosi · 28. Februar 2016

Hallo MrMurphy,

sorry für die ungenügende Beschreibung.

Ich versuche es nochmal zu erklären:

Ich möchte gerne in meine Website 4 blöcke debeneinander anzeigen wie auf dem Bild dargestellt einbauen.
Das funktioniert soweit ganz gut.
habe den Code per Bootstraps eingepflegt und hier fängt mein neues/altes Problem wieder an
Sobald ich ein Bild einfüge, verscheibt sich das gesamte DIV nach oben und verwendet den Punkt "margin-bottom" als Nullpunkt somit sind die gesamten DIV blöcke nicht mehr gleich groß und verschieben sich.
Werden jetzt aber Platzhalter von placehold.it verwendet, bleibt die gesamte Box so wie sie sein soll.

html-seminar.de/woltlab/attachment/903/
ist zustand

html-seminar.de/woltlab/attachment/902/
soll zustand

Meine frage:
Warum passiert das, bzw warum wird die vorgegeben höhe im css max-height:500px trotzdem überschritten ?

Gosi · 28. Februar 2016

hier noch der HTML Code

HTML

</div>
            <div id="master">
                <div class="row">
                  <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <h3>Live</h3>
                      <img src="images/flyer-fb_250.jpg" alt="">
                      <div class="caption">

                        <p><a href="#" class="btn btn-primary" role="button">mehr</a></p>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="row">
                  <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                         <h3>News</h3>
                      <img src="images/frontcover_250.jpg" alt="">
                      <div class="caption">

                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et...
                      <a href="#" class="btn btn-primary" role="button">mehr</a> </p>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="row">
                  <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <h3>Facebook</h3>
                      <img src="http://www.placehold.it/300x200" alt="">
                      <div class="caption">

                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et...
                        <a href="#" class="btn btn-primary" role="button">mehr</a> </p>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="row">
                  <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                         <h3>Bilder des letzen Auftrittes</h3>
                      <img src="http://www.placehold.it/300x200" alt="">
                      <div class="caption">

                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et...
                        <a href="#" class="btn btn-primary" role="button">mehr</a> </p>
                      </div>
                    </div>
                  </div>
                </div>
            </div>

Alles anzeigen

und noch die CSS

CSS

#master{
    text-align: center;
    margin-top: 50px;
}




.row{
    position: relative;
    margin-top: 0px;
    display: inline-block;
    border: solid #fff 2px;
    padding: 5px;
    margin: 10px;
    max-width: 310px;
    max-height: 600px;
    background-color: #000;
    opacity: 0.9;
}
.row p{ color: #fff;
    font-family: 'Cinzel', serif;
    text-shadow: #000 1px 1px;
    text-align: center;
}




h3{
    color: #fff;
    font-family: 'Cinzel', serif;
    text-shadow: #000 1px 1px;
    text-align: left;
    border-bottom: white solid 2px;
}
.caption{
    margin-top: 10px;
    width: 100%;
    border:solid white 1px;   
}

Alles anzeigen

IMG Tags von DIV Tags umschlungen

Jetzt mitmachen!

Teilen