Hallo zusammen,
ich möchte mir ein <h1>-Tag so definieren, dass ein kleines Icon neben meinen Überschriften positioniert wird.
Derzeit mache ich das so:
html:
css:
Und nun frage ich mich, ob man das nicht geschickter machen kann?
Mein Ziel wäre es denselben Effekt zu erreichen, wobei man den HTML-Quelltext wie folgt vereinfachen kann:
Habt ihr dazu irgendwelche Ideen?
Vielen Dank im Vorraus für jede Hilfe!
PS: Im Anhang findet ihr, wie es optimalerweise aussehen sollte!
ich möchte mir ein <h1>-Tag so definieren, dass ein kleines Icon neben meinen Überschriften positioniert wird.
Derzeit mache ich das so:
html:
HTML:
<div id="heading">
<h1>Meine Überschrift</h1>
</div>
css:
CSS:
#heading
{
background-position:left;
background-image:url(../Data/Images/dreieck-12.gif);
background-repeat:no-repeat;
}
#heading h1
{
margin-left:15px;
font-size:larger;
color:Red;
}
Und nun frage ich mich, ob man das nicht geschickter machen kann?
Mein Ziel wäre es denselben Effekt zu erreichen, wobei man den HTML-Quelltext wie folgt vereinfachen kann:
HTML:
<h1>Meine Überschrift</h1>
Habt ihr dazu irgendwelche Ideen?
Vielen Dank im Vorraus für jede Hilfe!
PS: Im Anhang findet ihr, wie es optimalerweise aussehen sollte!