CSS HTML Frage...

[DT]Nightstr3am · 23. November 2014

Tach Community,

Ich habe ein kleines Problem bei HTML und CSS.

Ich möchte gerne eine "dt-List" erstellen mit Bildern und darunter die Beschreibung.

Soweit so gut, jetzt ist aber das Problem das die Bilder alle untereinander sind, aber diese sich eig. automatisch nebeneinander schieben sollten, mit der dazugehörigen Beschreibung.
Wenn das funktioniert wollte ich die Beschreibung via :hover einblenen und ausblenden lassen, weiß aber nicht wie das geht.

Folgendes habe ich bereits:

Code

<nav>
			<dl>
				<dt><img src="iphone6_pic.jpg"></dt>
				<dd>blabla blabla, blaaaa....</dd> 
				<dt><img src="iphone6_pic.jpg"></dt>
				<dd>blabla blabla, blaaaa....</dd>
				<dt><img src="iphone6_pic.jpg"></dt>
				<dd>blabla blabla, blaaaa....</dd>
				<dt><img src="iphone6_pic.jpg"></dt>
				<dd>blabla blabla, blaaaa....</dd>
				<dt><img src="iphone6_pic.jpg"></dt>
				<dd>blabla blabla, blaaaa....</dd>
				<dt><img src="iphone6_pic.jpg"></dt>
				<dd>blabla blabla, blaaaa....</dd>
			</dl>
		</nav>

Alles anzeigen

Und in CSS

Code

img:hover
{
	border: 4px solid;
	border-color: grey;
}
nav
{
	float: left;
}
dt > img{
	margin: 10px;
}

Alles anzeigen

Slash™ · 23. November 2014

das mit dem nebeneinander bekommst du mit,
display:inline; hin

also

Code

dt > img{
	margin: 10px;
display:inline;
}

[DT]Nightstr3am · 23. November 2014

Nein funktioniert nicht wirklich

Kinimod · 23. November 2014

Stichwort: Float

Beispiel:

Wir nehmen zwei Blockelemente (im Beispiel: div).

Code

<div style="float: left;"> <!-- Wir floaten das Element nach links. -->
     //Bild 1
</div>


<div style="float: left;"> <!-- Wir floaten das Element nach links, wenn noch Abstand zwischen dem ersten Bild bestehen soll, verwende hier bitte noch ein margin-left. -->
     //Bild 2
</div>


<!-- Nun beenden wir das Floating mit der Clear Eigenschaft, ansonsten entstehen Fehler -->
<div style="clear: both;"></div>

Alles anzeigen

Beide Bilder werden nun nebeneinader angezeigt, sobald jedoch kein Platz ist, fließt das zweite Element darunter.

[DT]Nightstr3am · 23. November 2014

@Mr.Reese: das muss ich jetzt in die HTML File schreiben? Wäre es in CSS nicht besser?

Kinimod · 23. November 2014

Ist ja nur ein Beispiel, Du kannst auch die Elemente benennen und den CSS Code in eine extra Datei schreiben, so wie Du möchtest.

Kannst auch btw nochmal hier schauen, hier ist das alles schön erklärt:
http://www.w3schools.com/css/css_float.asp

Diverse · 23. November 2014

Ja zur besseren Übersicht sollte das Float ins CSS.
Wenn du mit Float und display:inline; arbeitest sollte es gehen.

[DT]Nightstr3am · 23. November 2014

Dankeschön

breadfish.de 12. März 2022