✔ Einfache Frage: selbstdefiniertes h1-Element

[Eroli]

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:

    <div id="heading">
        <h1>Meine Überschrift</h1>
    </div>

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:

<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!

 

[Netzwerkidi]

Hai,

ist doch ganz ok.

So ginge es auch:

<h1><img src="/Data/Images/dreieck-12.gif" alt="Zum roten Eck" />Meine Überschrift</h1>

Dann wird die Ecke aber auch angezeigt, wenn CSS deaktiviert ist.

 

[para_noid]

Du brauchst an sich nur margin mit padding zu tauschen, um nur das eine Element stylen zu müssen.

<h1 class="dreieck">Meine Überschrift</h1>

h1.dreieck
{
    background:url(../Data/Images/dreieck-12.gif) no-repeat left bottom transparent;
    padding-left: 15px; /*Innenabstand nach links setzen*/
    color: red;
    font-size: larger;
}

Wenn die Angaben für alle h1 gelten soll kannst du das mit der Klasse auch weglassen.

 

[Eroli]

Hi para_noid,

genau so etwas hatte ich gesucht

Kann ich jetzt noch nur den Text ein, zwei Pixel runtersetzen? Geht das?

EDIT: Hab beim Background-Image das bottom entfernt. Das hat das Problem gelöst, aber mich würde trotzdem interessieren, ob das noch anders gehen könnte?

 

[para_noid]

Hi,

das bottom war nur so geschätzt Die CSS-Angabe, für die in der Kurzform nur left bottom stand, heißt background-position. Hier kann man auch Pixel- oder Prozentangaben machen, z.B.
background-position: 0 10px positioniert ein Bild horizontal um 0px (also ganz nach links) und vertikal um 10px verschoben (von ganz oben minus 10 Pixel). Du kannst die Angabenformen auch mischen, also background-position: left 10px usw. Fall es für irgendein Konstrukt mal von der Höhe her nicht reichen sollte, kannst du dir noch die Angabe line-height merken.