Ein Logo per css in einem DIV plazieren (nicht als backgroundimage)

[bernd_franken]

Hallo,

ich habe schon eine Menge rumprobiert und gesucht, aber noch keine Lösung gefunden.
Ich möchte in einem DIV, der die Navigation enthält, im oberen linken Eck ein gif-Logo plazieren.
Da der Auftritt zahlreiche Seiten enthält, möchte ich das nicht per html
<img src= (Pfad, Größe, Ränder...)...>
Die html-Lösung mit Klassen-Zuordnung ist mir auch wenig sympathisch, weil dann viel Text in den html-Seiten bleibt
<img src="/images/logo.gif" class="logo..>

Zur Entschlackung des Seitencodes (habe auch noch andere div-Bilder) hätte ich am liebsten Pfad, Dateiname und Bildeigenschaften in der externen Css-Datei.
Leicht wäre es, ein DIV-Bild in der css-Datei als Hintergrund zu defininieren:
{
background-image: url('images/logo.gif')
}
Aber damit habe ich auch kein Glück, denn ich möchte erstens auf das Logo einen Link setzen und zweitens das Logo 15px nach rechts rutschen, damit es das padding der anderen Elemente mitmacht. Und andere Elemente sollten das Bild nicht überlagern.

Es soll also in der css-Datei für den Container "Navigation" definiert werden:

#Navigation{
width: 160px;
Lade folgendes Bild, aber nicht als Hintergrundbild;
}

Nun ist die Frage, ob es dafür einen Syntax gibt. Und wenn nicht, wie man das sonst noch lösen könnte.

 

[Elroy]

Hallo.

Ein Bild wird nun einmal mit HTML eingebunden.
Die Syntax dafür hast du ja schon selbst vorgegeben.

Das eine class zu vergeben jetzt aber soviel Code ist das man das umgehen möchte kann ich nicht verstehen, class="logo" ist doch jetzt wirklich nicht viel Code.

Gruss
Elroy

 

[bernd_franken]

Hallo, Elroy,
Danke für Deine Antwort. Es ist nicht so, daß class=logo zuviel Text wäre sondern daß die Bilder aus diversen Gründen in einem rel. langen Suchpfad liegen und da auch einige andere rel. Unerfahrene die Site pflegen sollen, möchte ich den html-code knapp halten.
Aber anscheind geht das einfach nicht, was ich möchte. Mittlerweile ist mir eingefallen, wie ich das Gewünschte per Backgroundimage lösen kann. Insofern hat sich die Frage erledigt. Viele Grüße von Bernd.

 

[hokage555]

Inhalt der Seite ist Aufgabe von HTML. Design der Seite ist Aufgabe von CSS. Das war schon immer so und wird immer so bleiben!
Hat das Bild einen inhaltlichen Aussagewert (z.B. eine Chemieformel oder eine Überschrift) dann wird es über den <img /> Tag in HTML eingebunden. Ist das Bild Zierde und für den Inhalt der Seite nicht zwingend notwendig, dann wird es als Backgroundimage via CSS eingebunden.

Alles andere wäre falsch und entspricht nicht dem Verwendungszweck von HTML und/oder CSS.

 

[Tronjer]

HTML ist für die Struktur zuständig, Inhalte sollten nach Möglichkeit in eine Datenbank ausgelagert werden. Wenn das Gif mit der Navigationsleiste auf sehr vielen Seiten erscheint, dann könnte man es auch in ein HTML-Template verschieben und über require oder include in die Unterseiten einbinden.

 

[Elroy]

Inhalt der Seite ist Aufgabe von HTML.

HTML ist für die Struktur zuständig,

HTML ist für die semantische Auszeichnung des Inhaltes zuständig.
Können wir uns darauf einigen?

Inhalte sollten nach Möglichkeit in eine Datenbank ausgelagert werden.

Du beliebst zu scherzen, oder?

Das kommt doch wohl ganz auf den Anwendungszweck an.
Eine einfache Webvisitenkarte oder die Kontaktseite einer Firma muss doch nicht gleich eine Datenbank auffahren um den Inhalt von 2-3 statischen Seiten zu verwalten.

Gruss
Elroy

 

[hokage555]

HTML ist für die semantische Auszeichnung des Inhaltes zuständig.
Können wir uns darauf einigen?

Aber sicher doch ;-) Ich habe es halt etwas abgekürzt, aber du hast natürlich völlig recht! So ist es genauer.