Fehler im Header

[Andreas84]

Hi,

auf der Seite meines Shops (https://www.rucksack-center.de/) werden zuerst alle Grafiken im Header geladen doch wenn man im Internet Explorer dann schnell über diese fährt, werden sie nicht sofort angezeigt...

Waron liegt denn das und kann ich das irgendwie machen, das der header fest ist und dort keine Ladefehler entstehen?

Vielen Dank schon mal für eure Hilfe.

Gruß,
Andreas84

[haha]

zuerst alle Grafiken im Header geladen doch wenn man im Internet Explorer dann schnell über diese fährt, werden sie nicht sofort angezeigt...

Du lädst die zusätzlichen Grafiken im Ereignis onLoad, das erst ausgeführt wird, wenn die Seite komplett geladen ist. Falls Du schnell genug für Deinen Internetzugang bist, hast Du daher möglicherweise noch nicht einmal die ganze Seite auf dem Bildschirm, wenn Du mit der Maus das Menü ansteuerst.

kann ich das irgendwie machen, das der header fest ist

Dazu gibt es mehrere Ansätze, aber erstmal möchte ich feststellen, dass der Aufbau Deines Menüs mit leeren <a>-Elementen, deren gesamter Inhalt erst per CSS eingefügt wird, eine mittelschwere Katastrophe ist.

<div id="navi"><a href="/" id="startseite"></a><a href="/shop/" id="shop"></a>

#startseite
{
width: 91px;
height: 41px;
display: block;
background-image: url( /img/topnavi/startseite.gif );
}

#startseite:hover
{
background-image: url( /img/topnavi/startseite_on.gif );
}

Bei so einem Unfug möchte man eigentlich nur noch verzweifelt aus dem Fenster hüpfen.

CSS ist nicht dazu da, HTML nahezu gänzlich zu ersetzen. Ein Menü aus Textgrafiken baut man auf, indem das <img>-Element in ein <a>-Element verpackt wird. So und nicht anders:

<a href="bla"><img src="bla.png" width="91" height="41" alt="Blabla" id="bla"></a>

Damit ließe sich dann auch leicht Deine spezielle Mauskennzeichnung, die nur aus einem Unterstrich besteht, einbauen:

div#navi img:hover {
border-bottom:3px solid #fff;
}

Aus Deinen vermutlich bald Hundert Zeilen für das Menü werden übersichtliche drei (zzgl. eventueller Abstandsanpassungen).

Die Hintergrundgrafik des gesamten Menüs wird dem Mantel-<div> #navi als Hintergrund verpasst. Die Textbilder dürfen nur so breit sein, wie der Unterstrich breit sein soll; Abstände zwischen den Grafiken mittels margin setzen. Damit der Menühintergrund sichtbar bleibt, müssen die Textgrafiken transparent sein. Gute Transparenz bekommt man nur mit PNG-Grafiken, GIF eignet sich dafür nicht (und ist nicht selten eh größer als ein PNG-Äquivalent).

Die Ladezeit für die Zusatzgrafiken sinkt damit auf 0.

Ist der CSS-Rahmen nicht weich genug (oder soll es ein gewellter oder sonstwie geformter Unterstrich sein), kann man auch auf eine Grafik zurückgreifen:

img#bla:hover {
background-image:url(unterstrich.png);
background-repeat:repeat-x;
background-position:[Unterstrichposition von oben]px 0px;
}

unterstrich.png ist eine weiße Fläche mit wenigen Pixel Breite und einer Höhe entsprechend der Höhe des Unterstriches. Diese wird mit background-repeat horizontal wiederholt (=Strich) und mit -position an ihren Platz geschoben.

Die Ladezeit für die Zusatzgrafiken wird damit zwar nicht 0, aber statt knapp 80.000 Pixeln in 10 Dateien müss nur noch 10 Pixel in einer Datei geladen werden.

[Andreas84]

Hi,

vielen Dank für deine ausführliche aber sehr sehr hilfreiche Antwort. Gibt es sonst noch Vebesserungsvorschläge zu meiner Seite, die dir auffallen?