Überschrift mit Icon links daneben

[theghostdog]

Hall zusammen,

ich will eine Überschrift die links daneben ein Icon (Bild 50x50) hat. Die Überschrift ist unterstrichen. Nun soll das Bild genau über der Unterstreichung sein, also 2 px über der linie oder so. Ich bekomme das aber irgenwie nicht hin. jemand nen tipp? hier mein html code:

Code: Alles auswählen

[...]
<img class="headlineIcon" src="./files/icon.jpg"/><h2>Testüberschrift</h2>
[...]


und der dazugehörige CSS Style:

Code: Alles auswählen


img.headlineIcon{
   float:left;
   margin-top: 5px;
   margin-bottom: 5px;
   padding-right: 5px;
   padding-left: 5px;
   width: 50px;
   height: 50px;
}

h2 {
   font-size: larger;
   font-weight: bold;
   margin-bottom:5px;
   border-bottom:1px solid #D1d1d1;
   text-align:left;
}


jemand einen tip? danke.

mfg ghostdog

[skittles]

Machs ohne <img> Tag!
Lös doch das ganze per http://xhtml.doku.info/referenz/css_farbe.html

[theghostdog]

hi,

erst mal danke für deine antwort. da sind jedoch 2 probleme:

1) das bild soll links neben der überschrift stehen, nicht der hintergrund der überschrift sein
2) das bild soll über ein cms modul bestimmt werden, also immer ein anderes bild sein, wie bekomme ich also das bild in das background-image=url(...) pattern??? kann man zur laufzeit ne css variable setzen ? geht sowas?

mfg

[skittles]

1. ja das ist kein Problem!
Einfach mit den Werten für background-position arbeiten, und den Text dann mit Hilfe von padding-left nach rechts hineinversetzen
2. ohne php oder ähnlichem nicht!

[theghostdog]

hi,

ich habe php. wie geht es dann?

[Laus]

Wenn du mit php deine Seiten Dynamisch über das cms generierst dann brauchs du doch nur mit einem "random script" das Bild bei jeder neuen ausgabe ändern. Google mal danach da wirst du bestimmt fündig. Eine solche funktion gibt es in html oder css leider nicht.

[theghostdog]

hallo,

erst mal danke für die antworten. also ich will nicht ein zufalls icon anzeigen, der user soll es auswählen und es soll in etwa dann so aussehen:

Code: Alles auswählen


|-----|
|   I |
|-----| Überschrift 2


I für Icon. Im moment sieht es bei mir leider so aus:

Code: Alles auswählen

|-----|
|   I | Überschrift 2
|-----|


also ich will ersters, das muß doch möglich sein. mfg

[Laus]

Hallo

Das erreichst du indem du die Eigenschaft vertical-align:bottom verwendest.
Auch ein display:block für das Icon wäre ein Lösungsansatz. Das ganze ist aber immer abhängig von deinem Docktype und dem weiteren Aufbau deiner Seite. Aber darüber lässt du uns ja im Unklaren, somit können wir nur Raten.