horizontales Menü mit eigener Grafik gestalten

[Bettina]

Ich möchte gerne mit CSS ein horizontales Menü machen. Das ist mir auch gelungen. Allerdings möchte ich vor die Menüpunkte anstelle eines Bullets eine Grafik einbinden. Mit list-style-image: url(images/arrow.gif); und background-image funktioniert es aber nicht. Selbst die normalen Bullets werden in dem horizontalen Menü nicht angezeigt. Bei einer vertikalen Liste funktioniert es. Kann mir jemand weiterhelfen? DANKE!

[wahsaga]

hi,

Mit list-style-image: url(images/arrow.gif); und background-image funktioniert es aber nicht.

"Funktioniert nicht" ist keine nachvollziehbare Fehlerbeschreibung.

Selbst die normalen Bullets werden in dem horizontalen Menü nicht angezeigt.

Dann hast du vermutlich keinen Platz dafür gelassen, sprich margin oder padding zu gering.

gruß,
wahsaga

[Bettina]

Ich habe genug Platz per padding gelassen. Die Bullets werden einfach nicht angezeigt. Im Internet finde ich auch nirgends eine horizontale Navigation mit Bullets. Ich würde gerne mal ein Beispiel sehen, ob das überhaupt möglich ist.

[wahsaga]

hi,

Tipps für Fragende

gruß,
wahsaga

[Ingo Turski]

Hi,

Ich würde gerne mal ein Beispiel sehen, ob das überhaupt möglich ist.

natürlich ist das möglich. Du darfst hierzu nur die display-Eigenschaft der Listenpunkte nicht von list-item auf inline ändern.

freundliche Grüße
Ingo

[Danny]

Hi Bettina,

poste doch mal das relevante Stück Quellcode (HTML + CSS). Mit Sicherheit ist entwender zu wenig Platz für die Grafik definiert oder der Pfad für die Grafik stimmt nicht. Werden selbst normale Bullets nicht anzeigt, liegt es aber zu 99% am margin/padding des ul oder li.

Gruß

• Danny

[Hase]

Wenn die normalen Bullets nicht angezeigt werden hast Du diese vermutlich mit CSS ausgeblendet. Dann werden natürlich auch keine eigenen Image-Bullets angezeigt. Irgendwo hast Du vermutlich list-style-type:none; stehen. Dieses entfernen dann sind normale oder Image-Bullets wieder da.

[Bettina]

Das ist mein Code:

#TopNavigation {
 float:left;
 position:absolute;
 left:0px;
 top:70px;
 background-color:#ff860d;
 width: 100%;
}
#TopNavigation ul {
 padding-left: 0;
 margin-top:0px;
 margin-left:0px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#3e4c59;
}
#TopNavigation li {
 display: inline;
}
#TopNavigation a {
 padding-top:3px;
 padding-bottom:3px;
 padding-right: 15px;
 padding-left: 15px;
 text-decoration:none;
 border-right: 1px solid #ffffff;
 float: left;
}
#TopNavigation a:link {
 font-weight:bold;
 text-decoration:none;
    color: #000000;
 background-color: #ff860d;
}
#TopNavigation a:visited {
 font-weight:bold;
 text-decoration:none;
    color: #000000;
 background-color: #ff860d;
}
#TopNavigation a:hover {
 font-weight:bold;
 text-decoration:none;
    color: #000000;
 background-color: #fdc996;
}
#TopNavigation a:active {
 font-weight:bold;
 text-decoration:none;
    color: #ffffff;
 background-color: #004564;
}

[Ingo Turski]

Hi,

Das ist mein Code:

ja und?

#TopNavigation li {
display: inline;
}

Du hast meine Antwort nicht gelesen oder nicht verstanden?

freundliche Grüße
Ingo

[Bettina]

Natürlich habe ich Deine Antwort verstanden, aber wenn ich "display:list-item;" definiere, dann ist es kein horizontales Menü mehr! Mail mir doch mal den Quellcode, wie es funktioniert.
Danke & Gruß

[Ingo Turski]

Hi,

aber wenn ich "display:list-item;" definiere, dann ist es kein horizontales Menü mehr!

Wenn Du den Standard-Displaytyp jedoch änderst, dann ist es keine Liste mehr bzw. wird nicht mehr als solche dargestellt. Du kannst Elemente auch mit float nebeneinander setzen.

freundliche Grüße
Ingo