horizantale navigation mit (image) bullet

narita · 03.02.2007, 13:33

hi leute.
ich habe in der suche leider nichts gefunden und gestern bis heute auch schon google durchforstet, also ersuche ich hier um hilfe.
ich versuche eine horizontale navigation mit eigener bullet grafik zu machen,
aber es will einfach nicht funktionieren.
habs zum einen schon mit einem hintergrund-bild mit horizontalem wiederholungseffekt versucht und zum anderen mit list-style-image: url

html

PHP-Code:


			
<div id="navcontainer">

<ul id="navlist">

<li id="active"><a href="#" id="current">HOME</a></li>

<li><a href="#">Termine</a></li>

<li><a href="#">Philosophie</a></li>

<li><a href="#">Über mich</a></li>

<li><a href="#">Photos</a></li>

<li><a href="#">Kontakt</a></li>

<li><a href="#">Impressum</a></li>

<li><a href="#">Links und Partner</a>  </li>

</ul>

</div>

css

PHP-Code:


			
#navlist li {

  font-family : Georgia, "Times New Roman", Times, serif;

  font-size:11px;

  font-weight:bold;

  color:#BB9E8B;

  display: inline;

  list-style-type: none;

  padding-right: 20px;

 }

das ist jetzt ohne die bullet-grafik weil das gestern nachts der letzte stand im bezug meiner nerven war : )
bitte um hilfe.

Mich@el · 03.02.2007, 17:19

Hast Du´s schon mit

HTML-Code:

background-image:url(button.gif);

probiert?

narita · 03.02.2007, 18:57

hi

ja mit dem hab ich´s auch schon erfolglos probiert.

Mich@el · 04.02.2007, 03:33

Hallo narita,
hier sind ein ein paar Beispiele, bei der die horizontale Navigation mit eigener Grafik gelöst wurde:
http://css.maxdesign.com.au/listamatic/horizontal25.htm
http://css.maxdesign.com.au/listamatic/horizontal26.htm
http://css.maxdesign.com.au/listamatic/horizontal29.htm

Das sollte Dich evtl. weiterbringen.

Grüße
Michael

narita · 04.02.2007, 11:18

auf den seiten war ich zwar schon, aber danke!

vielleicht gelingts ja heute : )

Rizzo · 05.02.2007, 11:21

Hi

Versuch mal das mit in deine CSS zu stricken

Code:

#navlist li {
	background-image: url(pfad/zur/bullet.gif);
	background-repeat: no-repeat;
	background-position: 5px 5px;
	padding-left: 20px;
}

#navlist ul {
	list-style-type: none;
}

Pfad zu der Bullet-Grafik und die Position muß angepasst werden.

ttb · 06.02.2007, 02:35

background-image, background-position usw. geht zwar auch, aber dafür gibts ja schließlich list-style-image:url.

Wenns nicht klappt, stimmt der Pfad nicht.

Beispiel-Ordner-Struktur:

/ (Hauptpfad)
-- Ordner css
-- Ordner images

Wenn du nun in der CSS-Datei im Ordner css auf die Datei bullet.gif im Ordner images zugreifen willst, musst du

Code:

list-style-image:url(../images/bullet.gif);

schreiben.

Ebenso ist die Schreibweise selbst wichtig, heißt: eine Datei mit dem Namen bullet.gif ist unter Linux, was vermutlich auf dem Server installiert sein wird, eine andere als Bullet.gif.