therealgherkhin
Neues Mitglied
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:
CSS:
Vielen dank für eure Hilfe :)
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 :)
