Wie positioniere ich 2 Bilder links und rechts neben einer Überschrift?

Michael Pichler

Mein Code:

<html>
<head>
<title>Seite2.html</title>
</head>
<style>

#div1
{
height:130;
width:1573;
background-color:yellow;
border: 5px solid orange;
margin-bottom:5px;
padding.5px;
}

h1
{
text-align:center;
}
</style>

<body>

<div id = "div0">
<div id = "div1">
<h1>New York</h1>
<img src = "newyork.jpg" style="height:100;width:100;float:left;margin-right:40">
<img src = "newyork.jpg" style="height:150;width:200;float:right">
</div>
<div id = "div5">
<div id = "div2">
</div>
<div id = "div3">
</div>
</div>
<div id = "div4">
</div>
</div>

</body>
</html>

Das Programm macht die Bilder links und rechts unterhalb der Überschrift ich möchte sie aber NEBEN der Überschrift. PS:Ich muss die 2 Bilder und die Überschrift in div1 machen.

Hoffe auf baldige Antworten!

LG DerAskTyp

justanotherperson

Also ich würde erstmal damit anfangen die Bilder auch wirklich "um den Titel herum zu bauen". Und den Float nimm erstmal raus. Das führt sonst wieder zu Problemen.
Den Rest kannst du mit CSS machen, wenn du den Titel mittig haben willst usw. . Hast du das nur übersehen, oder warum bist du darauf nicht gekommen?

Grüße
justanotherperson

P.S.: Achja, ich habe bin stark der Annahme überzeugt, dass du eine Hausaufgabe bekommen hast. Ansonsten würde es nicht so heißen:

Zitat

PS:Ich muss die 2 Bilder und die Überschrift in div1 machen.

Vor allem mit der Betonung auf "muss". Damit das klar ist: Foren sind nicht dazu da, um deine Hausaufgaben zu machen. Oder wenn diese Annahme nicht stimmt, begründe diese Aussage glaubhaft.

Michael Pichler

Danke, aber wenn ich die BEIDEN Bilder vor der Überschrift einfüge befinden sie sich "in" der Devision. Füge ich aber das letzte Bild nach der Überschrift,so befinden sich das bild nicht "in" der Devision.

justanotherperson

Meinst du das hier?

Edit:
Also im Prinzip ist doch die Aufgabe erfüllt. Du hast die Bilderlinks und rechts neben den Titel gepackt. Oder?

MrMurphy

Hallo

Zitat

Ich muss die 2 Bilder und die Überschrift in div1 machen.

Das ist die sinnvollste Lösung - wenn es denn unbedingt ein div sein soll.

Allerdings ist dein Quelltext recht unstrukturiert und enthält sinnfreie Angaben. So willst du zum Beispiel ein Bild mit einer Höhe von 150px in ein div mit einer Höhe von 130px quetschen. Das kann nur Probleme geben.

Ich tendiere zur folgenden Lösung:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Bilder neben Text 01</title>
   <style>
      body {
         margin: 0;
      }
      #div1 {
         background-color: yellow;
         border: 5px solid orange;
         display: flex;
         justify-content: space-between;
         align-items: center;
      }
      figure {
         max-width: 100%;
         margin: 0;
      }
      img {
         display: block;
         width: 100%;
      }
      #div1 h1 {
         white-space: nowrap;
      }
      #div1 figure:nth-child(2) {
         order: -1;
      }
   </style>
</head>
<body>
   <div id="div1">
      <h1>New York</h1>
      <figure>
         <img src="http://lorempixel.com/100/100/nature" alt="Beispielbild">
      </figure>
      <figure>
         <img src="http://lorempixel.com/200/150/technics" alt="Beispielbild">
      </figure>
   </div>
</body>
</html>

Alles anzeigen

Gruss

MrMurphy

threadi

https://www.html.de/threads/wie-po…rschrift.55164/

Tags