Frage Wie setze ich einen weiteren text neben ein neues Bild?

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
13 Februar 2018
7
0
1
19
#1
Hallo zusammen,
ich habe bereits auf meiner Website ein Bild eingefügt und geschafft neben diesem Bild rechts ein text zu platzieren...
Nun wollte ich ein weiteres Bild einfügen, dass unter dem ersten ist und einen weiteren Text rechts davon platzieren, allerdings erscheint der text immer wieder neben dem ersten Bild und sobald ich versuche den Text mithilfe von margin-top weiter nach unten zu verschieben verschiebt sich automatisch das 2. Bild weiter nach unten...

Wie könnte ich es schaffen den Text rechts neben dem Bild zu platzieren, sodass dies auch für ein 3. Bild funktionieren könne?

HTML:
HTML:
<!DOCTYPE html>
<html>
    <head>
          <meta charset="utf-8">
        <title>Schülerübersicht der SSH www.Schüler-SSH.de</title>
        <link href="stylesheet.css" rel="stylesheet">
      
    </head>
    <body id="body">
        <h1 class="wilkommen">Bodywarmer - Stay warm all day long</h1>
         <div class="topnav">
  <a class="active" href="index.html">Home</a>       
  <a href="products.html">Produkte</a>
  <a href="kontakt.html">Kontakt</a>
  <a href="infos.html">Info´s</a>
        </div>
       <div id="middlelayer">
          
            <img src="lukasscholz.jpg" id="lukasscholzbild" alt="Lukas Scholz">
            <ul id="lukasscholztext">
                <ul style="margin-bottom: 20px"><u><b>Lukas Scholz</b></u></ul>
                <ul style="margin-bottom:20px"> <u><b>Herkunft:</b></u> Hoym, Deutschland </ul>
                <ul style="margin-bottom:20px"> <u><b>Referenzen:</b></u> Webdesigner und Produktentwickler </ul>
                <ul style="line-height: 18px"> <u><b>Beschreibung:</b></u> Lukas kam mit 13 Jahren auf die Sportschule in Halle und zeigte schnell einen unternehmerischen Geist.
                    Gepaart mit der Affinität zu technischen Prozessen entschloss er sich 2018 mit seinen Mitgründern Isabell Utmann und Ian Streißenberger die Firma "Bodywarmer" zu gründen. </ul>
           </ul>
          
          
            <img src="isabellutmann.JPG" id="isabellutmannbild" height="227px" width="340px" alt="Isabell Utmann">
              <ul id="isabellutmanntext">
                <ul>Isabell Utmann</ul>   
           </ul>
          
        </div> 
            
    </body>
</html>
CSS:
Code:
#body {
    background-color: #D4D4D4;
}

.wilkommen {
        text-align: center;
        color: #333;
        text-decoration: none;
}



    body {margin:0;}

.topnav {
  overflow: hidden;
  background-color: #333;
 
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
  font-size: 21px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
    background-color: #FFC04C;
    color: white;
}

#middlelayer{
    width: 60%;
    height: 100%;
    margin-left: 20%;
    margin-top: 80px;
    border-radius: 8px;
    background-color: white;
    float: left;
    position: relative;
  
    
}

#lukasscholzbild {
    margin-left: 15px;
    margin-top: 15px;
    float: left;
    clear: left;
}

#lukasscholztext{
    color: #333;
    margin-left: 300px;
    margin-top: 30px;

}

#karte{
   background-color: #D4D4D4;
    margin-top: 30px;
    margin-left: 14%
}

#kontakte {
    text-align: center;
    line-height: 30px;
    background-color: #D4D4D4
}

#isabellutmannbild {
    float: left;
    clear: left;
    margin-top: 25px;
    margin-left: 15px;
}
Vielen dank für eure Hilfe :)
 

MrMurphy

Senior HTML'ler
28 Juli 2009
1.464
215
63
#2
Hallo

Zunächst brauchst du als Grundlage einen aktuellen, fehlerfreien HTML-Quelltext.

Und dann vergiß float (oder auch ähnlich veraltete Techniken wie position) zum Layouten, sondern verwende das dafür vorgesehene Flexboxmodell (kurz: Flexbox, display: flex).

Ohne ein gewissen Grundlagenwissen wirst du nicht weit kommen. So ist es sachlich falsch Text direkt in ul-Elemente zu schreiben.

Gruss

MrMurphy
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.149
244
63
65
#3
Ich habe mal in einer Testseite das HTML und CSS aufgebaut, um Bilder und Texte so anzuordnen, wie Du es dir vorstellst:
Code:
        #middlelayer {
            width: 60%;
            height: 100%;
            margin-left: 20%;
            margin-top: 80px;
            border-radius: 8px;
            background-color: white;
            display: flex;
            flex-direction: column;
        }
        figure {
            display: flex;
            flex-direction: row;
        }
        figure .wimg {
            flex: 1 1 40%;
            min-width: 1px;
        }
        figure img {
            width: 100%;
            height: auto;
        }
        figcaption {
            flex: 1 1 60%;
            margin-left: 1em;
        }
        .bold-under {
            font-weight: bold;
            text-decoration: underline;
        }
Code:
    <div id="middlelayer">
        <figure>
            <div class="wimg">
                    <img src="images/catimage11.png" alt="Lukas Scholz">
                </div>
            <figcaption>
                <p>
                    <span class="bold-under">Herkunft:</span>
                    Hoym, Deutschland
                </p>
                <p>
                    <span class="bold-under">Referenzen:</span>
                    Webdesigner und Produktentwickler
                </p>
                <p>
                    <span class="bold-under">Beschreibung:</span>
                    Lukas kam mit 13 Jahren auf die Sportschule in Halle und zeigte schnell einen unternehmerischen Geist. Gepaart mit der Affinität
                    zu technischen Prozessen entschloss er sich 2018 mit seinen Mitgründern Isabell Utmann und Ian Streißenberger
                    die Firma "Bodywarmer" zu gründen.
                </p>
            </figcaption>
        </figure>
        <figure>
                <div class="wimg">
                        <img src="images/catimage12.png" alt="Lukas Scholz">
                    </div>
                <figcaption>
                <p>
                    Die Beschreibung für das zweite Bild
                </p>
            </figcaption>
        </figure>
    </div>
Leider habe ich es nicht geschafft, das Seitenverhältnis der Bilder beizubehalten ohne einen zusätzlichen Container. Vielleicht kann MrMurphy sagen, ob und wie es ohne den geht.
 

Aaron3219

Aktives Mitglied
6 Oktober 2015
864
177
43
17
#4
Leider habe ich es nicht geschafft, das Seitenverhältnis der Bilder beizubehalten ohne einen zusätzlichen Container. Vielleicht kann MrMurphy sagen, ob und wie es ohne den geht.
Ich bin nicht MrMurphy, aber damit:

Code:
figure img {
            width: 100%;
            height: 100%;
            max-width: 100px;
}
funktioniert es und du kannst den image-Wrapper entfernen. Das max-width, macht es responsive und ist gleichzeitig die Größenangabe.

https://jsfiddle.net/Aaron3219/hpfvudrr/
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.149
244
63
65
#5
Danke für den Hinweis, so funktioniert es tatsächlich. Das sind so die Mysterien von CSS, dass es mit height:100% funktioniert und mit height:auto nicht. Ich hätte es genau anders herum erwartet.