Html / CSS: Abstand zwischen vier Bildern?
Hey.
Ich möchte gerne zwischen meinen vier Bildern einen Abstand von 0,5cm - 2cm.
Wie und wo trage ich das ein?
<ul>
<h4><li><a href="Forum.html">Forum</a></li></h3>
<h4><li><a href="Kontakt.html">Kontakt</a></li></h3>
<h4><li><a href="shop.html">Vintage Kleidung & Möbel</a></li></h4>
<h4><li><a href="Startseite.html">Startseite</a></li></h4>
<img src="Vintage0.jpg" width="250" height="250" alt="vinjacke">
<Img src="Vintage3.jpg" width="250" height="250" alt="vinjacke">
<Img src="Vintage4.jpg" width="250" height="250" alt="vinjacke">
<Img src="Vintage5.jpg" width="250" height="250" alt="vinjacke">
(Für mich ist das ziemliches Neuland. Bitte Rücksicht nehmen, ich mache das erst seit vorgestern)
PS.: Das ist nur ein Teil meiner HTML-Datei! Ich möchte nur, dass ihr einen kleinen Ausschnitt seht.
Danke.
4 Antworten
<!-- du kannst den Abstand mit css festlegen (wäre übersichtlicher), aber da du ja nicht danach gefragt hast, hier die html lösung:-->
<img src="Vintage0.jpg" width="250" height="250" alt="vinjacke" style="margin: 2cm">
<Img src="Vintage3.jpg" width="250" height="250" alt="vinjacke" style="margin: 2cm">
<Img src="Vintage4.jpg" width="250" height="250" alt="vinjacke" style="margin: 2cm">
<Img src="Vintage5.jpg" width="250" height="250" alt="vinjacke" style="margin: 2cm">
<!-- ich würde dir nicht cm sonder pixel(px) als einheit empfehlen, aber du hast auch nicht nach dieser Info gefragt-->
Margin steht immer für den Abstand um eines Objektes Herum. Versuch es mal mit Attribut:
style="margin:32px"
innerhalb deines Img Elements. Schöner ist es, wenn du dir für sowas eine css Datei anlegst. Dort kannst du dann einfach
img{
margin: 32px;
}
eintragen, und das gilt dann für alle Bilder. Wenn es nicht für alle Bilder gelten soll, kannst du auch Klassen durch ein class="bilderMitAbstand" vergeben, welche du durch ein Punkt vor dem Klassennamen im css selektieren kannst.
.bilderMitAbstand{
margin: 32px;
}
Wie man das CSS einbindet siehst du hier:
Du musst mit CSS margin hinzufügen
LG
- das <h> element kommt in das <li> element
- das <ul> ist ja garnicht geschlossen, das musst du vor den <img> Tags schließen oder die <img> Tags ebenfalls in ein <li> packen.
- Für die Übersichtlichkeit am Besten die CSS-Datei auslagern. Abstände macht man mit margin (Äußerer Abstand) und padding (Innerer Abstand), da gibt unmengen an Videomaterial auf Youtube auch für Anfänger :)
Das <ul> ist geschlossen, habe es nur nicht mit rein kopiert.
</ul>
<ul>
<li><h3><a href="Forum.html">Forum</a></h3></li>
<li><h3><a href="Kontakt.html">Kontakt</a></h3></li>
<li><h4><a href="shop.html">Vintage Kleidung & Möbel</a></h4></li>
<li><h4><a href="Startseite.html">Startseite</a></h4></li>
<li><img src="Vintage0.jpg" width="250" height="250" alt="vinjacke"></li>
<li><Img src="Vintage3.jpg" width="250" height="250" alt="vinjacke"></li>
<li><Img src="Vintage4.jpg" width="250" height="250" alt="vinjacke"></li>
<li><Img src="Vintage5.jpg" width="250" height="250" alt="vinjacke"></li>
</ul>
Das hat funktioniert, Danke. kannst du mir noch verraten wie man Bilder nebeneinander setzt. Momentan habe ich alle 4 Bilder untereinander mit einem Abstand von 32px. Ich weiß, das man Bilder mit dem Befehl "Border" nebeneinander setzen kann. Wo muss das Border hin?..Danke