Logo einfügen!

Hallo,

ich möchte mal gerne wissen wie man korrekterweise ein Logo in den Header einfügt, mit einem leichten Abstand (ca. 10px) vom Rand.

Ich habe verschiedene Lösungen gehört aber bin nicht wirklich weiter gekommen. Einige sagen direkt als Background in der CSS, andere direkt als Grafik im HTML Code. Ich favorisiere die Grafik direkt einzubinden, da ich mit dem Weg als Background nicht wirklich erfolgreich war, da sich dadurch das ganze Menü rechts vom Logo mit verschieben würde

Kann mir jemand sagen wie der korrekte Code in der html und css datei dafür ist?

nein es soll nichts mehr über das Logo gelegt werden. Wie lautet der HTML Code für das "normale" einbinden? Was muss ich dann noch in der Stylesheet CSS einfügen, da von dort aus ja das meiste gesteuert wird.

Zitat von driver

is logo = header ? denn wenn nicht, bräuchtest ja da noch n hintergrundbild.

ansonsten ..

HTML

background-image:url(deinbild.jpg);
background-repeat:no-repeat;
background-position:100px 20px;

die werte bei position musst halt anpassen, je nachdem wo des bild stehen soll.
auswirkung aufs menü sollte das ganze eigentlich nicht haben, zumindest wenn
du es als hintergrundgrafik einbindest

Nein, das Logo ist nicht gleich Header. Hintergrund ist also schon im Template vorhanden. Mein Logo ist eine PNG Datei mit transparentem Hintergrund der lediglich den Firmenschriftzug beeinhaltet! Das Problem habe ich leider mit den Menüreitern die auf der gleichen Höhe, nur rechtsseitig vorhanden sind. Ich kann machen was ich will, sie bewegen sich ständig mit und es ist dadurch unmöglich eine korrekte Position für das Logo festzulegen, da sonst das Menü wieder völlig verschoben dargestellt wird. Stelle ich es dann wieder anders herum wird das Logo dann auf einmal riesengross oder wird einfach abgeschnitten. Deshalb würde ich es gerne über den "normalen" Weg einbinden. Vielleicht ist auch ein Fehler vorhanden.

Falls es hilft, folgenden Ausschnitt aus meiner Stylesheet.css betreffs des Logos:

#header {
    width: 1080px;
    height: 200px;
    margin-left: 60px;
    background: url(img/top_logo.png) no-repeat;

Link hab ich leider noch nicht, da ich das Template bzw. den Onlineshop derzeit lokal auf xampp installiert habe.

...und das ist der Auschnitt von der index.html:

<div id="logo"><img src="{$tpl_path}img/top_logo.png" alt="xamant" /></div>
    <div id="menu">
        <ul>