Wie bekomme ich die Bilder und die Texte sortiert?
Ich möchte das die Bilder abwechseln immer links und rechts sind. Der Text soll dabei immer in der Mitte bleiben. An Smartphones sollen die Bilder dann allerdings immer zwischen den Texten seinen also Überschrift...Bild....Text....Bild....Text....Bild....Text. Folgenden Code habe ich bereits aber wie ihr seht funktioniert das nicht: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.bildlinks{
float: left;
padding: 3px;
border: 5px solid#ccc;
margin-right: 10px;
margin-top: 10px;
width: 250px;
height: 250px;
}
.bildrechts{
float: right;
padding: 3px;
padding-top: 20px;
border: 5px solid#ccc;
margin-right: 10px;
margin-top: 10px;
width: 250px;
height: 250px;
}
.textbild{
padding-top: 45px;
}
</style>
<h2>Starseite</h2>
<p class="textbild"><img class="bildlinks" src="images/spiritplace6.png" alt="SpiritPlace Logo" />Lorem ipsum, dolor sit amet consectetur adipisicing elit. Neque, quia totam explicabo sint cupiditate saepe quas aliquid autem dolor quibusdam quam fugit ex enim voluptatem ut quis aspernatur magni recusandae?</p>
<p class="textbild"><img class="bildrechts" src="images/spiritplace6.png" alt="SpiritPlace Logo" />Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto, soluta!</p>
<p class="textbild"><img class="bildlinks" src="images/spiritplace6.png" alt="SpiritPlace Logo" padding-top="20px" />Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, amet. At placeat, ad consectetur doloribus quis dolor, esse ut tempora cum eum harum vero accusantium excepturi temporibus dolore nihil blanditiis?</p>
</body>
</html>
Gerne CSS einzeln!
1 Antwort
Beim HTML-Code würd ich den Text in ein extra <p>-Element packen, und dafür dann Text + Bild in ein Div, dann kannst du den Text einrücken etc., ohne das Bild zu beeinflussen. Ist nicht unbedingt nötig, aber find ich besser, denn da hat man mehr Freiheit beim Gestalten, und sieht standardmäßig auch schöner aus.
Und beim CSS fehlte nurnoch ein display: inline-block; und die Media Query für das Handy-Format.
Hier, so klappt's:
HTML:
<h2>Starseite</h2>
<div class="textbild">
<img class="bildlinks" src="images/spiritplace6.png" alt="SpiritPlace Logo" />
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Neque, quia totam explicabo sint cupiditate saepe quas aliquid autem dolor quibusdam quam fugit ex enim voluptatem ut quis aspernatur magni recusandae?</p>
</div>
<div class="textbild">
<img class="bildrechts" src="images/spiritplace6.png" alt="SpiritPlace Logo" />
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto, soluta!</p>
</div>
<div class="textbild">
<img class="bildlinks" src="images/spiritplace6.png" alt="SpiritPlace Logo" padding-top="20px" />
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, amet. At placeat, ad consectetur doloribus quis dolor, esse ut tempora cum eum harum vero accusantium excepturi temporibus dolore nihil blanditiis?</p>
</div>
CSS:
.bildlinks{
float: left;
padding: 3px;
border: 5px solid#ccc;
margin-right: 10px;
margin-top: 10px;
width: 250px;
height: 250px;
}
.bildrechts {
float: right;
padding: 3px;
padding-top: 20px;
border: 5px solid#ccc;
margin-right: 10px;
margin-top: 10px;
width: 250px;
height: 250px;
}
.textbild {
display: inline-block;
width: 100%;
padding-top: 45px;
}
@media only screen and (max-width: 600px) {
.bildrechts, .bildlinks {
float: none;
display: block;
margin: 0 auto;
}
}
Meinst du so?
.bildlinks {
float: left;
padding: 3px;
border: 5px solid#ccc;
margin-right: 10px;
margin-top: 10px;
width: 250px;
height: 250px;
}
.bildrechts {
float: right;
padding: 3px;
padding-top: 20px;
border: 5px solid#ccc;
margin-right: 10px;
margin-top: 10px;
width: 250px;
height: 250px;
}
.textbild {
display: inline-block;
width: 100%;
padding-top: 45px;
}
.textbild p {
width: calc(100% - 550px);
}
.bildrechts + p {
float: right;
}
.bildlinks + p {
float: left;
}
@media only screen and (max-width: 800px) {
.bildrechts, .bildlinks {
float: none;
display: block;
margin: 0 auto;
}
.textbild p {
float: none;
width: 100%;
margin: 10px;
}
}
Mit den Bildern klappt es Top allerdings muss jetzt nur noch der Text in der Mitte sein also Mittig vom Bildschirm soll der runterlaufen