[solved] header editieren

[zac]

Hallo,

ich möchte den header ein wenig umbauen.

Neben dem logo noch ein paar Hersteller-Logos mit links zu weiteren Informationen und ganz rechts die #header_user Sachen mit searchbox.

Während ich das ganz gut für Firefox hinbekommen habe, funktioniert das im IE und Opera überhaupt nicht. Die Logos füge ich direkt in der header.tpl ein, obwohl ich schon gelesen habe das man das wegen updates nicht tun soll (aber für andere Lösungen reicht mein Wissen gar nicht). Die Positionen habe ich in der global.css definiert.

global.css:

h1#logo {
   float: left;
   width: 31%;
   margin-top:0.5em;
}

h1#banner1{
   float: left;
   width: 30%;
   margin-top:0.5em;
}
h1#banner2{
   float: left;
   width: 10%;
   margin-top: 1em;    
}

#header {
   float: right;
   height:100px;
   /*width: 71%;   Auskommentiert um alles in einer "Zeile" darzustellen*/
   text-align: right;
   margin-top: 0.5em;
   margin-right: 1.5em;

header.tpl:

<!-- Header -->






                   {$HOOK_TOP}

Wie gesagt, in Firefox kommt das dem gewünschten Endergebnis sehr nahe, aber in IE und Opera sieht es einfach *%$$/&$%&* aus. id="banner2" wird gar nicht angezeigt; IE verschiebt den #header_user Bereich gleich in die "nächste Zeile"...

Bin wie immer für jede Hilfe sehr dankbar.

lg ZaC

[rumata]

wenn du einen link zum ergebnis postest, kann ich es mit firebug versuchen. So vom Code her lässt sich das nicht 100%g sagen.

[zac]

Also, habe mich übers Osterwochenende nochmal intensiv reingehängt und das ganze mehr oder weniger gelöst.
In meinem Code haben sich gelich mehre Fehler eingeschlichen.

Das "banner2" nicht in IE und Opera angezeigt wurde lag an einem vergessenen >
Sollte nicht passieren, aber da in Firefox immer alles anstandslos dargestellt wurde, habe ich natürlich zuerst überall außer im html-code gesucht. Wieder was gelernt...

Zu der Headerdarstellung kann ich nicht viel für zukünftige Leser beitragen. Es funktioniert jetzt halbwegs, aber ich verstehe nicht wirklich warum. Ich bin halt kein Coder und taste mich einfach Schritt für Schritt an das gewünschte Endergebnis an.
Eine Erkenntnis ist, dass die width genau angegeben werden muss. Schätzen, wenn auch nur zu Testzwecken, endet in totalen Chaos ;-)
In der global.css des Themes findet man #page die gesamte Seitenbreite mit deren Hilfe man sich durch simple Prozentrechnung die richtige breite für seine Logos ausrechnen kann.

Ich stehe immer noch vor dem Problem, dass InternetExplorer meinen Header etwas anders darstellt als Firefox und Opera. Falls mir da noch jemand helfen könnte...


Darstellung Internet Explorer
Darstellung Firefox

und in echt findet man das ganze hier:
http://biotiful.at/shop

Und zum Abschluss noch mal der korrekte code um ähnliches nachzubauen:
global.css:

1#logo {
   float: left;
   /*width: 31%;*/
   /*width: 69%;*/
   margin-top:0.5em;
}
h1#banner{
   float: left;
   width: 21%;
   margin-top:0.5em;
}
h1#bannerblog{
   float: left;
   width: 8%;
   margin-top: 0.8em;
}
h1#bannerfacebook{
   float: left;
   width: 6%;
   margin-top: 1.2em;    
}
#header {
   float: right;
   height:125px;
   width: 20%;
   text-align: right;
   margin-top: 0.5em;
   margin-right: 1.5em;

header.tpl:

<!-- Header -->







                   {$HOOK_TOP}