Hallo,
Ich würde in folgende Richtung tendieren.
<div id="adresse" class="kontaktinfos">
<span>Name & Vorname</span>
<span>Straße & Hausnummer</span>
<span>PLZ Ort</span>
</div>
<div id="kontakt" class="kontaktinfos">
<span>0000 - 000000</span>
<span>eMail Adresse</span>
</div>
<div id="zeiten" class="kontaktinfos">
<span>Mo. - Fr. 9.00 bis 18.00 Uhr</span>
<span>Sa. 9.00 bis 14.00 Uhr</span>
<span>Termine nach Vereinbarung</span>
</div>
>
> Den von mir aus deinen Klassen generierten IDs (`#adresse`{:.language-css}, `#kontakt`{:.language-css} und `#zeiten`{:.language-css}) weist du nun die jeweiligen Bilder als Hintergrund zu. Über `.kontaktinfos span`{:.language-css} gibst du an, dass die spans als Blockelemente angezeigt werden, damit die Infos zeilenweise angezeigt werden. Über den selben Selektor (`.kontaktinfos span`{:.language-css}) regelst du auch den Abstand der Texte zum linken Rand des jeweiligen div, so dass sie rechts neben den Hintergrundbildern stehen (das ist, wenn ich dich richtig verstanden habe, dein Wunsch).
vielen Dank für deine Hilfe und Erklärung. Hab dieses nun so umgesetzt
~~~html
<div id="adresse" class="kontaktinfos">
<span>Name & Vorname</span>
<span>Straße & Hausnummer</span>
<span>PLZ Ort</span>
</div>
Und mein CSS dazu sieht so aus
#adresse {
width:32%;
display:inline-block;
margin-top:3.5em;
background:url(../img/icons/kontakt.jpg) no-repeat;
min-height:4.063em;
}
.kontaktinfos span {
display:block;
vertical-align:top;
padding-left:4em;
}
Online ist es auch zu sehen: http://friseursalon.bplaced.net/ sollte es nicht gleich angezeigt werden, bitte STRG + F5 drücken.