Shop Logo Position ändern?

[peterpan19]

Hallo, wieder mal eine Frage, denn leider haut es bei mir nicht so richtig hin.
Ich habe im Header oben links mein Shop Logo eingebunden, funktioniert so weit ganz gut. Der Haken an der Sache ist, dass das Logo etwas zu klein ist, also habe ich in der index.html einfach mal die Größe geändert, auch kein Problem. Durch die Änderung der Größe sieht die Position des Logos nicht wirklich mehr gut aus, da die Ränder über andere Bereiche stehen. Wenn ich nun im stylesheet im "a img" margin und padding einfüge, kann ich die Position des Logos nach belieben ändern. Aber leider ändern sich dann auch die Buttons in den Unterseiten. Zur Veranschaulichung habe ich mal Screenshot gemacht.
Bitte um Hilfe, wie es richtig geht  

  [ Für Gäste sind keine Dateianhänge sichtbar ] [ Für Gäste sind keine Dateianhänge sichtbar ]



Linkback: https://www.modified-shop.org/forum/index.php?topic=9992.0

[peterpan19]

PS: entschuldigung, ist ins falsche Thema gerutscht, vielleicht kann ein Admin es bitte richtig zuordnen, danke!

[franky_n]

Hallo peterpan19,

Du solltest dem <div> was außen um das Logo steht, einfach eine feste Größe geben. Dann kannst Du das Image in dem div vergrößern und verkleinern und verschieben wie Du möchtest.
Oder falls kein div drumherum steht mach einfach eins das Du in der css verändern kannst.

PS: Thema ist verschoben.

Viele Grüße

Franky

[peterpan19]

So, hab mal etwas rumprobiert mit den "div", habe es aber nicht hin bekommen. Wenn ich es im index.html folgendermaßen einsetze, also das div vor und nach der Zeile für das Shop Logo:

Code: PHP  [Auswählen]

<div id="wrap">
    <div id="header">
                <div id="shoplogo">
        <a href="{php}echo xtc_href_link('index.php');{/php}"><img src="{$tpl_path}img/logo rosa.jpg" width="300" alt="{$store_name}" id="companyLogo" /></a>
                </div>
        <div id="search">{$box_SEARCH}</div>
    </div>
 

und im stylesheet:

Code: CSS  [Auswählen]

/* Shoplogo Position*/
#shoplogo {
        margin-top: 50px;
        padding-top: 0px;
}
 

rutscht das topmenu mit nach links, das Suchfeld und die Sprachflaggen verschieben sich.

Wenn ich in der index.html den div direkt nach "wrap" setze, wirkt sich das auf die komplette Seite aus, ist also auch nicht richtig.

Ich bin wirklich dankbar für jeden Tipp und möchte auch möglichst viel ohne ständige Fragerei schaffen, aber das bekomme ich leider nicht immer hin. Wie gesagt, das sind meine ersten Gehversuche im Umgang mit Web Programmierung, bzw. besser gesagt, Umgestaltung.

Die Idee mit dem DIV ist sehr gut um es dann nach Bedarf verschieben zu könne, aber wie genau muss ich es denn schreiben und wo hin genau?

Danke!

  [ Für Gäste sind keine Dateianhänge sichtbar ]

[franky_n]

Hallo peterpan19,

nur mal so zwischendurch als Tipp:
Schau einfach mal mit dem Firebug drüber.
Das ist ein Addon für den Mozilla Firefox!
Vielleicht siehst Du dann auch die Verschachtelung bzw. das Problem!

Viele Grüße

Franky

[Tomcraft]

Firebug gibt es übrigens hier: FAQ: Liste wichtiger Freeware- & OpenSource-Programme für die Shop-Erstellung

Grüße

Torsten

[peterpan19]

Hallo, ich habe von Firefox schon Web Developer, Firebug habe ich auch drauf, aber es tut mir leid, ich sehe einfach nicht, worauf du hinaus möchtest! Ich habe dutzende Kombinationen probiert, aber ich habe die richtige nicht herausgefunden. Bitte einmal schreiben, wie und wo es platziert werden muss  

[Tomcraft]

Ich denke, dass ein Link zu deiner Baustelle hilfreicher ist als einzelne Code-Stellen zu posten.

Grüße

Torsten

[peterpan19]

Hallo Tomcraft, derzeit arbeite ich ausschließlich offline mit XAMPP, der Shop soll erst im Januar online gehen. Aber mein Chef (Anmerkung der Redaktion: meine Frau) möchte, dass der Shop so gut wie möglich funktioniert und aussieht, nach ihren Vorstellungen versteht sich. Der kleine Haken dabei ist, dass viele Hersteller/Lieferanten den Shop auch mal gerne sehen möchten und dann sollen Sie keine Baustelle vorfinden. Und das versuche ich irgendwie hin zu bekommen mit meinen quasi nicht vorhandenen Programmierkenntnissen.

[Tomcraft]

Du setzt doch eigentlich das xtc5-Template ein und passt es nur an, richtig?

Du kannst ja mal dein komplettes Template hier als ZIP anhängen, dann kann ich mal vergleichen.

Grüße

Torsten

[peterpan19]

Ja, XTC5 Template. Ich habe aber jetzt erst mal einen Schritt zurück gemacht, denn wenn etwas nicht hinhaut, schiebe ich die sicherungskopie wieder zurück. Aber das Problem bleibt und leider nicht nur das. Aber dafür poste ich mal neu. Das Bilde des Artikels ist nur als Beispiel und zum testen gedacht...
Vielen vielen Dank für deine Hilfe!!!
PS: das Template ist zu groß, upload verweigert, ich habe deshalb nur die index.html und die stylesheet.css gepackt, der Rest ist ja fast gleich..

[Tomcraft]

Das wird so nicht... also der Reihe nach:

1.) Hast du ein Leerzeichen im Logonamen!
2.) Hast du den Spacer entfernt, der oben die Abstände hält.

Also:

Benenne dein "logo rosa.jpg" bitte um in "top_logo_rosa.jpg" und nimm meine angepassten Dateien.

Grüße

Torsten

[peterpan19]

Hallo Torsten! Erst einmal vielen Dank für deine Mühe! Ich habe die Änderungen gemacht, doch leider haut es immer noch nicht so hin, oder ich mache noch einen (oder mehrere Fehler). Bei kleinen Verschiebungen fällt es nicht auf, aber wenn ich Werte von z.b. 100px angebe, wirkt es sich auch wieder auf andere Elemente aus. Wie muss ich denn nun eine Verschiebung schreiben und wo genau?
Die index.html sieht nun so aus:

Code: PHP  [Auswählen]

<div id="logo"><a href="{php}echo xtc_href_link('index.php');{/php}"><img src="{$tpl_path}img/top_logo_rosa.jpg" width="300" alt="{$store_name}" /></div>
 

Dazu die Änderung in der Stylesheet:

Code: CSS  [Auswählen]

/* HEADER WITH LOGO, SEARCH BOX AND LANGUAGE SELECTION */
#header {
        height:115px;
        background: #893769 url(img/top_logo_rosa.jpg) no-repeat;
        border-top: 10px solid #fff;
        border-bottom:1px solid #fff;
}
 

Es geht hier ja um ein grundsätzliches Problem, denn wie packe ich etwas ein, um es beliebig verschieben zu können, ohne dass der Rest durcheinander gerät.
Für weitere Hilfe wäre ich sehr dankbar!

[Tomcraft]

Wie sieht es denn momentan aus?! Ich kenne weder die Abmessungen deines Logos, noch habe ich einen Link zum Shop, wie soll ich da helfen?!

Grüße

Torsten

[peterpan19]

Ich habe es gelöst. Das DIV in der HTML ist schon mal richtig, dann noch folgende Zeilen in der "stylesheet.css" und schon geht's, wichtig dabei ist die "position:relative" und dann kann man mit top, left etc. verschieben, ohne das der restliche Inhalt davon betroffen ist:

Code: CSS  [Auswählen]

#header #logo {
    float: left;
    left: 20px;
    position: relative;
    top: -7px;
}
 

Gruß