1. Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
    Information ausblenden

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

Dieses Thema im Forum "HTML, XHTML & CSS" wurde erstellt von therealgherkhin, 13 Februar 2018.

  1. therealgherkhin

    therealgherkhin Neues Mitglied

    Registriert seit:
    13 Februar 2018
    Beiträge:
    7
    Punkte für Erfolge:
    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:
    1. <!DOCTYPE html>
    2.     <head>
    3.           <meta charset="utf-8">
    4.         <title>Schülerübersicht der SSH www.Schüler-SSH.de</title>
    5.         <link href="stylesheet.css" rel="stylesheet">
    6.      
    7.     </head>
    8.     <body id="body">
    9.         <h1 class="wilkommen">Bodywarmer - Stay warm all day long</h1>
    10.          <div class="topnav">
    11.   <a class="active" href="index.html">Home</a>      
    12.   <a href="products.html">Produkte</a>
    13.   <a href="kontakt.html">Kontakt</a>
    14.   <a href="infos.html">Info´s</a>
    15.         </div>
    16.        <div id="middlelayer">
    17.          
    18.             <img src="lukasscholz.jpg" id="lukasscholzbild" alt="Lukas Scholz">
    19.             <ul id="lukasscholztext">
    20.                 <ul style="margin-bottom: 20px"><u><b>Lukas Scholz</b></u></ul>
    21.                 <ul style="margin-bottom:20px"> <u><b>Herkunft:</b></u> Hoym, Deutschland </ul>
    22.                 <ul style="margin-bottom:20px"> <u><b>Referenzen:</b></u> Webdesigner und Produktentwickler </ul>
    23.                 <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.
    24.                     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>
    25.            </ul>
    26.          
    27.          
    28.             <img src="isabellutmann.JPG" id="isabellutmannbild" height="227px" width="340px" alt="Isabell Utmann">
    29.               <ul id="isabellutmanntext">
    30.                 <ul>Isabell Utmann</ul>  
    31.            </ul>
    32.          
    33.         </div>
    34.            
    35.     </body>
    36. </html>
    CSS:
    Code (text):
    1. #body {
    2.     background-color: #D4D4D4;
    3. }
    4.  
    5. .wilkommen {
    6.         text-align: center;
    7.         color: #333;
    8.         text-decoration: none;
    9. }
    10.  
    11.  
    12.  
    13.     body {margin:0;}
    14.  
    15. .topnav {
    16.   overflow: hidden;
    17.   background-color: #333;
    18.  
    19. }
    20.  
    21. .topnav a {
    22.   float: left;
    23.   display: block;
    24.   color: #f2f2f2;
    25.   text-align: center;
    26.   padding: 14px 20px;
    27.   text-decoration: none;
    28.   font-size: 21px;
    29. }
    30.  
    31. .topnav a:hover {
    32.   background-color: #ddd;
    33.   color: black;
    34. }
    35.  
    36. .topnav a.active {
    37.     background-color: #FFC04C;
    38.     color: white;
    39. }
    40.  
    41. #middlelayer{
    42.     width: 60%;
    43.     height: 100%;
    44.     margin-left: 20%;
    45.     margin-top: 80px;
    46.     border-radius: 8px;
    47.     background-color: white;
    48.     float: left;
    49.     position: relative;
    50.  
    51.    
    52. }
    53.  
    54. #lukasscholzbild {
    55.     margin-left: 15px;
    56.     margin-top: 15px;
    57.     float: left;
    58.     clear: left;
    59. }
    60.  
    61. #lukasscholztext{
    62.     color: #333;
    63.     margin-left: 300px;
    64.     margin-top: 30px;
    65.  
    66. }
    67.  
    68. #karte{
    69.    background-color: #D4D4D4;
    70.     margin-top: 30px;
    71.     margin-left: 14%
    72. }
    73.  
    74. #kontakte {
    75.     text-align: center;
    76.     line-height: 30px;
    77.     background-color: #D4D4D4
    78. }
    79.  
    80. #isabellutmannbild {
    81.     float: left;
    82.     clear: left;
    83.     margin-top: 25px;
    84.     margin-left: 15px;
    85. }
    86.  
    87.  
    Vielen dank für eure Hilfe :)
     
    Werbung:

    Jetzt registrieren, damit diese Werbung verschwindet
  2. MrMurphy

    MrMurphy Senior HTML'ler

    Registriert seit:
    28 Juli 2009
    Beiträge:
    1.441
    Punkte für Erfolge:
    63
    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
     
  3. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    914
    Punkte für Erfolge:
    43
    Ich habe mal in einer Testseite das HTML und CSS aufgebaut, um Bilder und Texte so anzuordnen, wie Du es dir vorstellst:
    Code (text):
    1.         #middlelayer {
    2.             width: 60%;
    3.             height: 100%;
    4.             margin-left: 20%;
    5.             margin-top: 80px;
    6.             border-radius: 8px;
    7.             background-color: white;
    8.             display: flex;
    9.             flex-direction: column;
    10.         }
    11.         figure {
    12.             display: flex;
    13.             flex-direction: row;
    14.         }
    15.         figure .wimg {
    16.             flex: 1 1 40%;
    17.             min-width: 1px;
    18.         }
    19.         figure img {
    20.             width: 100%;
    21.             height: auto;
    22.         }
    23.         figcaption {
    24.             flex: 1 1 60%;
    25.             margin-left: 1em;
    26.         }
    27.         .bold-under {
    28.             font-weight: bold;
    29.             text-decoration: underline;
    30.         }
    31.  
    Code (text):
    1.     <div id="middlelayer">
    2.         <figure>
    3.             <div class="wimg">
    4.                     <img src="images/catimage11.png" alt="Lukas Scholz">
    5.                 </div>
    6.             <figcaption>
    7.                 <p>
    8.                     <span class="bold-under">Herkunft:</span>
    9.                     Hoym, Deutschland
    10.                 </p>
    11.                 <p>
    12.                     <span class="bold-under">Referenzen:</span>
    13.                     Webdesigner und Produktentwickler
    14.                 </p>
    15.                 <p>
    16.                     <span class="bold-under">Beschreibung:</span>
    17.                     Lukas kam mit 13 Jahren auf die Sportschule in Halle und zeigte schnell einen unternehmerischen Geist. Gepaart mit der Affinität
    18.                     zu technischen Prozessen entschloss er sich 2018 mit seinen Mitgründern Isabell Utmann und Ian Streißenberger
    19.                     die Firma "Bodywarmer" zu gründen.
    20.                 </p>
    21.             </figcaption>
    22.         </figure>
    23.         <figure>
    24.                 <div class="wimg">
    25.                         <img src="images/catimage12.png" alt="Lukas Scholz">
    26.                     </div>
    27.                 <figcaption>
    28.                 <p>
    29.                     Die Beschreibung für das zweite Bild
    30.                 </p>
    31.             </figcaption>
    32.         </figure>
    33.     </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.
     
  4. Aaron3219

    Aaron3219 Aktives Mitglied

    Registriert seit:
    6 Oktober 2015
    Beiträge:
    686
    Punkte für Erfolge:
    43
    Ich bin nicht MrMurphy, aber damit:

    Code (text):
    1. figure img {
    2.             width: 100%;
    3.             height: 100%;
    4.             max-width: 100px;
    5. }
    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/
     
  5. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    914
    Punkte für Erfolge:
    43
    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.
     
  6. MrMurphy

    MrMurphy Senior HTML'ler

    Registriert seit:
    28 Juli 2009
    Beiträge:
    1.441
    Punkte für Erfolge:
    63