Hallo,

ich möchte ein kleines Profilbild (96x96 Pixel) umrahmen und rechts ausrichen. Unter dem Rahmen soll der Benutzername stehen. Hierzu mein Code:

HTML-Code:

/*CSS*/
.avatar_div {
	float:right;
	font-size:0.6em;
	text-align:right;
}
img.avatar {
	border:1px solid gray;
	border-radius:8px;
	display: block;
	padding:5px;
}

<!--HTML-->
<div class="avatar_div">
    <img src="avatarname.jpg" alt = "Passender Alt-Text" class="avatar">
    Benutzername
</div>

Stimmt mein Code soweit? Was macht es denn für einen Unterschied, ob ich ".avatar" oder "img.avatar" verwende? Wie würdet ihr die beiden Klassen benennen?

Danke und viele Grüße, eee!

Zitat von eee

Was macht es denn für einen Unterschied, ob ich ".avatar" oder "img.avatar" verwende?

Naja, bei ersterem werden alle Elemente ausgewählt, die "avatar" als Klasse haben und beim zweiten nur alle img Element mit dieser Klassen.

Zitat von eee

Wie würdet ihr die beiden Klassen benennen?

Ich würde es so machen:

Code css:

1 2 3 4 5 6 7 8 9 10 11 12

.avatar {     float:right;     font-size:0.6em;     text-align:right; }   .avatar > img {     border:1px solid gray;     border-radius:8px;     display: block;     padding:5px; }

HTML-Code:

<div class="avatar">
    <img src="avatarname.jpg" alt = "Passender Alt-Text">
    Benutzername
</div>

1. Es ist semantisch
2. Du sparst eine Klasse

Vielen Dank, sieht sehr übersichtlich aus und macht genau was es soll. Noch eine Frage: Angenommen ich möchte auf einer Seite das Profilbild nur umrahmen (ohne Beschriftung, ohne Ausrichtung), wie kann ich auf die Formatierung von ".avatar > img" zugreifen? <img src="bild.jpg" class="avatar"> funktioniert leider nicht.

Dann würde ich das so erweitern

Code javascript:

1 2 3 4 5 6 7 8 9 10 11 12

.avatar {     float:right;     font-size:0.6em;     text-align:right; }   .avatar > img, avatar_img {     border:1px solid gray;     border-radius:8px;     display: block;     padding:5px; }

Jetzt kannst du entweder dieses bisherige Markup benutzen

HTML-Code:

<div class="avatar">
    <img src="avatarname.jpg" alt = "Passender Alt-Text">
    Benutzername
</div>

oder auch nur das

HTML-Code:

<img src="avatarname.jpg" alt = "Passender Alt-Text" class="avatar_img">

Jetzt hast du leider wieder zwei Klassen im Spiel. Aber das ist besser als ".avatar" für zwei verschiedene Zwecke zu benutzen.

Ausgezeichnet, vielen Dank für die Info! Jetzt bin ich wieder etwas klüger