Jump to content

[solved] header editieren


Recommended Posts

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

Share this post


Link to post
Share on other sites

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}


Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More