Horizontale Liste streikt..

-anja-

Mitglied
Thread Starter
Dabei seit
04.07.2007
Beiträge
71
Reaktionspunkte
0
Hallo!

Ich habe ein Problem mit meiner Website.
Und zwar habe ich ein horizontales Menü erstellt, die Schaltflächen sind Bilder (weil es die Schrift zu selten gibt) und alles ist Pixelgenau berechnet.. (1px abstand zwischen den Bildern).

Nun, im Safari und im Camino klappt's wunderbar, nur der Internetexplorer streikt.

Ich weiss, dass es einen Bug bei senkrechten Listen gibt, der einen Abstand macht zwischen den einzelnen li - aber bei waagerechten?

Dadurch passt das Design nicht mehr und das ganze Menü verrutscht an eine unmögliche Stelle! Ich muss diesen Abstand da raus kriegen..

Stelle aus dem HTML-Code:
<div id="menu1">
<ul>
<li><a href="unternehmen.html" class="no"><img src="pics/menu1/unternehmen.gif" width="94px" height="25px" alt="Unternehmen" /></a></li>
<li><a href="service.html"><img src="pics/menu1/service.gif" width="94px" height="25px" alt="Service" /></a></li>
<li><a href="technik.html"><img src="pics/menu1/technik.gif" width="94px" height="25px" alt="Technik" /></a></li>
<li><a href="produkte.html"><img src="pics/menu1/produkte.gif" width="94px" height="25px" alt="Produkte" /></a></li>
<li><a href="veredelung.html" id="ak1"><img src="pics/menu1/veredelung.gif" width="94px" height="25px" alt="Veredelung" /></a></li>
<li><a href="galerie.html"><img src="pics/menu1/galerie.gif" width="94px" height="25px" alt="Galerie" /></a></li>
</ul>
</div>


CSS:
#menu1 {
margin: 0;
width: 570px;
height: 25px;
background: #ccc;
display: block;
}
#menu1 img {
border: 0;
}
#menu1 ul {
}
#menu1 li {
float: left;
list-style-type: none;
display: inline;
}
#menu1 a {
display: block;
background: url(../pics/menu1/bg.gif) no-repeat;
border-left: 1px solid #fff;
}
#menu1 a:hover,
#menu1 a:focus,
#menu1 a:active {
background: url(../pics/menu1/bg_over.gif) no-repeat;
}
#menu1 #ak1 {
background: url(../pics/menu1/bg_over.gif) no-repeat;
}
#menu1 .no {
border: 0;
}


Wär echt super, wenn mir jemand helfen könnte, ich komm nicht weiter...

Achja, so soll's aussehen (Ausschnitt):

http://img152.imageshack.us/img152/2730/richtigbk7.jpg


und so sieht's im IE aus..


http://img254.imageshack.us/my.php?image=falschon7.jpg

Also, wie:
- Krieg ich das Menü richtig hin?
- bekomm ich die Abstände oben links und rechts an den grauen Kästchen weg? (Das sind auch Bilder)



Liebe Grüße!
 
Zuletzt bearbeitet:
Das scheint mir an was anderem als dem horizontalen Menü zu liegen. Am besten mal den Link posten. Trotzdem: Abstände würdest Du da heraus bekommen, wenn zwischen den <li> im Quelltext keine Leer- und Absatzzeichen stehen.

Eine <ul> für eine Bildernavigation zu nutzen führt natürlich das ganze ad absurdum. Vor allen Dingen sähe das Menü meines Erachtens in einer Verdana, Helvetica oder Arial viel besser aus.

EDIT: Ist die Seite mit CSS-floats aufgebaut? Sieht danach aus, als wäre das linke Menü zu breit, sodass der content-Bereich darunter gedrückt wird.
 
Ich hab die Seite noch nicht online, ich bastel ja noch dran..

Zur Schrift: Die gehört zur CI von dem Unternehmen, die ist auf ALLEN Briefbögen, Visitenkarten, Schriftzügen, Flaggen usw.. also die muss sein..

Die Abstände (1px) sind gewollt, die werden ja im Safari und im Camino richtig angezeigt..

Ja, die Seite ist mit floats aufgebaut, aber das müsste eigentlich passen (tut's ja auch in den Mac Browsern..)

:(
 
In der Regel fkt. solche Menus gut auch im IE. Allerdings könnte es wie Jakob schon sagt an anderen Ursachen liegen - ohne vollständigen Quelltext und das komplette Grid kommt man nur schlecht weiter.

Kurz ein paar Dinge, die mir aufgefallen sind:

HTML:
#menu1 {
margin: 0;
width: 570px;
height: 25px;
background: #ccc;
display: block;
}

Eine DIVision ist ein Block-Element, warum also noch einmal deklarieren?

HTML:
#menu1 a {
display: block;
background: url(../pics/menu1/bg.gif) no-repeat;
border-left: 1px solid #fff;
}

Gib mal diesem Selektor noch ein float: left und eine feste Breite (94px) mit auf den Weg. Gleichzeitig sollte sichergestellt sein, dass da nicht noch irgendwelche Paddings und Margins dazwischen funken. Du bist mit 6 Bildern a 94px schon bei 564px plus 6 x 1px Abstände - das sind 570px. Hast Du da noch irgendwo ein padding oder margin dabei, fällt das gefloatete Layout auseinander.

Ich bin aus diesem Grund zur relativen/absoluten Positionierung gewechselt, diese Layouts sind wesentlich robuster.

HTML:
<li><a href="unternehmen.html" class="no"><img src="pics/menu1/unternehmen.gif" width="94px" height="25px" alt="Unternehmen" /></a></li>.

Die Bilder müssen raus aus der Struktur und in das CSS (background-image). Gleichzeitig sollten die Menupunkte als Text via Image Replacement eingebaut werden, dann klappt es auch mit Google und Benutzern, die keine Bilder aktiviert haben. Die kriegen nämlich gar nichts zu sehen. Die Navi(texte) in Bildern zu verstecken ist schon ziemlich verwegen und auf keinem Fall im Interesse des Unternehmens bzw. der Nutzer dieser Webseite.

Generell gilt: Alle Elemente, die keine inhaltliche Information transportieren, sollten per CSS dargestellt werden. Das trifft auch für das Rechtecke mit den farbigen Flächen oben rechts zu. Wenn das CSS abgestellt ist, dürfen nur Struktur und Inhalt zu sehen sein, keine Bilder, die Layoutzwecken dienen.

2nd
 
Hab die ganze Seite jetzt umgeschrieben, so langsam klappt auch alles! :)

Hab jetzt ein riesen großes Hintergrundbild gemacht was ich halt für alle Seiten neu laden lasse (weil jede Seite andere Hintergrundbilder hat..)!

Daher klappt das auch jetzt :)!

Danke!
 
Na so groß auch nicht, sind nur 8KB :) Ich meinte halt die Pixel-Größe..
So hab ich jedenfalls ein echt barrierefreies Design (bis auf einen Punkt den ich sonst nich anpassen kann) und alles in der richtigen Reihenfolge!
Nur die Navi will halt noch nicht! :eek:
 
Wie gesagt, mit Link können wir Dir helfen.
 
Zurück
Oben Unten