Navigation mit einer Trennlinie zwischen Menüpunkten

Sonjiru · 30.05.2012

Hi,

ich verzweifle derzeit an einer Navigation die ich mittels Photoshop erstellt habe und nun mittels css einbinden. Das ganze soll so aussehen :

Uploaded with

Derzeit habe ich allerdings nur den schwarzen Hintergrund (kein Problem) und eben die einzelnen Menüpunkte. Jedoch krieg ich einfach nicht diese Unterteilungslinien rein. Wie geht das?

Hier mal die jeweils nötigen Zeilen für das problem :

CSS :

Code:

    #navigation {
    
      background-image: url(../grafiken/navi1.png);
      border: 4px solid #ffffff;
      height: 31px;
      
    }
    
    #navigation ul
    {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    #navigation li
    {
        display: inline;
    }
    
    a.navilink
    { 
        font-size: 16px;
        color: #ffffff;
        margin-left: 0;
        padding: 5px 15px 7px 15px;
    }
    a.navilink:hover
    {
        color: #00FA9A;
    }

HTML :

Code:

   	<div id="navigation">
            	<ul>
                	<li><a class="navilink" href="index.php">Startseite</a></li>
                     <li><a class="navilink" href="produkte.php">Produkte</a></li>
                    <li><a class="navilink" href="kontakt.php">Kontakt</a></li>
                    <li><a class="navilink" href="impressum.php">Impressum</a></li>
               </ul>
            </div>

Habe schon versucht dem <li> element die Trennlinie als hintergrund bild zu geben, kein Erfolg (dann sind die jeweiligen Menüpunkte mit dieser Grafik belegt).

Ich komm einfach nicht dahinter.

Hoffe ihr könnt mir helfen

Vielen Dank

simonpicos · 30.05.2012

AW: Navigation mit einer Trennlinie zwischen Menüpunkten

Da gibt es verschiedene herangehensweisen.

Zum einen gibt es da die border-image-Eigenschaft

alternativ könntest du es auch mit einem pseudo-element

after) probieren..

Sonjiru · 30.05.2012

AW: Navigation mit einer Trennlinie zwischen Menüpunkten

Die Border-Image Eigenschaft / das pseudo-element

after) muss dann bei der css Datei

hier rein :

Code:

#navigation li
    {
        display: inline;
    }

?

Edit :

Code:

    #navigation li
    {
        display: inline;
        border-width: 0px 0px 0px 0px;
        border-image: url(../grafiken/trennlinie.png) 0 -16 0 0 stretch;
    }

das hat jedoch überhaupt keinen Effekt?

Myhar · 30.05.2012

AW: Navigation mit einer Trennlinie zwischen Menüpunkten

Das hat wohl deshalb keinen Effekt, weil deine Deklaration von border-image falsch ist.

Code:

border-image: url(../grafiken/trennlinie.png) 0 -16[COLOR="Red"]Äpfel?Birnen?Pixel?[/COLOR] 0 0 stretch;

Solche Fehler kann man selber schnell analysieren, wenn man zB Firebug verwendet.

Sonjiru · 30.05.2012

AW: Navigation mit einer Trennlinie zwischen Menüpunkten

Code:

 border-image: url(../grafiken/trennlinie.png) 0px -16px 0px 0px stretch;

zeigt jedoch auch keine Grafik an

Myhar · 30.05.2012

AW: Navigation mit einer Trennlinie zwischen Menüpunkten

Verzeih, anscheinend muss man hier keine Werte angeben, es werden bei fehlenden Angaben wohl Pixel vorasugesetzt? Daran sieht man, dass ich die border-image Eigenschaft selber noch nie verwendet habe.
Was ich jedoch mit 1 Min googlen herausgefunden habe:
Präfixe verwendet?
Auch fällt mir auf, dass du 4 Pixel Werte angibst. In der Spezifikation auf der Seite sehe ich jedoch nur 3 Werte, welche man angeben kann (Oder habe ich hier auch einen übersehen)?
Ich empfehle dir nochmals, mach dich mit Firebug vertraut und sieh nach, ob der Effekt überhaupt auf das Element angewandt wird. Wenn nicht, dann ist die Syntax falsch. Wird der Effekt angewandt, die Grafik jedoch nicht angezeigt, dann ist liegt der Fehler bei inkorrekten Werten/Pfaden.

spenderorgan · 30.05.2012

AW: Navigation mit einer Trennlinie zwischen Menüpunkten

mit
background-image
und
background-position: right
sollte es gehen

Sonjiru · 30.05.2012

AW: Navigation mit einer Trennlinie zwischen Menüpunkten

spenderorgan schrieb:
mit
background-image
und
background-position: right
sollte es gehen

Getestet :

Code:

#navigation li {
    display: inline;
    background-image: url(../grafiken/trennlinie.png);
    background-position: right;
}

Geht nicht

Dann haben die einzelnen Listenpunkte halt nen hintergrund (den hintergrund der Trennlinie

Jedoch ist nicht nach jedem Listenpunkt die Trennlinie. Den Gedankengang hatte ich auch schon

Edit : Ich habe weder mit border-image noch mit Firebug gearbeitet.

Ich habe sicherlich einen Logikfehler weshalb ich es einfach nicht hinkriege.

spenderorgan · 30.05.2012

AW: Navigation mit einer Trennlinie zwischen Menüpunkten

kleiner auszug von meiner website:

Code:

.navigation li {
	float: left;
	list-style-type: none;
	padding-left:15px;
	padding-right: 15px;
	margin-top: 10px;
	margin-bottom: 10px;
	border-right: 1px solid #000;
}

und funktioniert.

siehe:

farbkorrektur.net

was hast du eigentlich vor,
willst du den mit der großen grafik füttern und dann über postionsangaben nur ausschnitte anzeigen?

Sonjiru · 30.05.2012

AW: Navigation mit einer Trennlinie zwischen Menüpunkten

Also dies ist meine Navigation :

Startseite Produkte Kontakt Impressum

zwischen jedem LI element soll eine Grafik angezeigt werden (trennlinie.png), diese Trennlinie hat einfach nen Farbverlauf. Soll dann so aussehen wie im ersten Post

spenderorgan · 30.05.2012

AW: Navigation mit einer Trennlinie zwischen Menüpunkten

ich war nur verwirrt wegen solchen angaben hier:

border-image: url(../grafiken/trennlinie.png) 0 -16 0 0 stretch;

und wie schon im meinen anderen beitrag, ersetz das border mit background image und background position, dann müsste eigentlich funktionieren.

Sonjiru · 30.05.2012

AW: Navigation mit einer Trennlinie zwischen Menüpunkten

spenderorgan schrieb:
ich war nur verwirrt wegen solchen angaben hier:

border-image: url(../grafiken/trennlinie.png) 0 -16 0 0 stretch;

und wie schon im meinen anderen beitrag, ersetz das border mit background image und background position, dann müsste eigentlich funktionieren.

Sprich so?

Code:

#navigation li {
    display: inline;
    background-image: url(../grafiken/trennlinie.png);
    background-position: right;
}

Dann sieht das ganze aber so aus :

Das will ich aber ja nicht

spenderorgan · 30.05.2012

AW: Navigation mit einer Trennlinie zwischen Menüpunkten

background-repeat: no-repeat:

das fehlte, sry, hab gepennt

Sonjiru · 30.05.2012

AW: Navigation mit einer Trennlinie zwischen Menüpunkten

Stimmt danke

Nun muss ich es nur noch hinkriegen das die Grafik auch in die ganze Navigationsleiste geht (sprich von oben nach unten durch.. (wie eben oben auf dem bild), kann man die grafik eig auch irgendwie zuschneiden? Weil die Grafik größer ist, wird nur der Anfang des Verlaufs gezeigt

spenderorgan · 30.05.2012

AW: Navigation mit einer Trennlinie zwischen Menüpunkten

hintergrundbilder werden immer in der originalgröße angezeigt, d.h. der trennstrich muss so hoch sein wie das li element

Sonjiru · 30.05.2012

AW: Navigation mit einer Trennlinie zwischen Menüpunkten

Sprich ich muss in der CSS Datei ein height setzen und diese grafik dann so machen?

spenderorgan · 30.05.2012

AW: Navigation mit einer Trennlinie zwischen Menüpunkten

entweder das oder versuchs mal mitn padding-top / bottom, da bleibt der text dann auch in der mitte

und hier eine seite rund ums thema css

http://www.css4you.de/

Myhar · 30.05.2012

AW: Navigation mit einer Trennlinie zwischen Menüpunkten

Nein, du musst kein height setzen. Ich empfehle, höchstens ein min-height zu setzen, dann kann zB die Schrift noch vergrößert werden und die Navigation bleibt trotzdem lesbar. min-height setzt du auf den Wert deiner Grafik, dann wird garantiert, dass diese in jedem Fall angezeigt wird.

Sonjiru · 30.05.2012

AW: Navigation mit einer Trennlinie zwischen Menüpunkten

spenderorgan schrieb:
entweder das oder versuchs mal mitn padding-top / bottom, da bleibt der text dann auch in der mitte

und hier eine seite rund ums thema css

http://www.css4you.de/

Naja aber dann habe ich ja keinen Anhaltspunkt wie groß ich diese Grafik machen muss, oder kann man mittels CSS nen einfachen Farbverlauf machen?

@Myhar : Okay

Sonjiru · 30.05.2012

AW: Navigation mit einer Trennlinie zwischen Menüpunkten

Eine letzte Frage :

Ich habe mein Design so aufgegliedert :

Navigation :

Seiteninhalt :

Footer :

Footer und Navigation bekommen bei width: 100% bei height : 20%

Der Seiteninhalt soll demnach 60% bei height bekommen (damit man auf die 100%) kommt.

Width ist natürlich bei 100%,

Nur gibt es ein kleines Problem : Der Inhalt richtet sich nicht nach der eingestellten Prozentzahl sondern nach Zeilen.

Eine Lösung wäre es einfach das ganze mittels min-height und max -height zu lösen. Nur wird das dann auf den verschiedenen Auflösungen schlichtweg falsch angezeigt oder?

Code:

		    max-height: 1000px;
		    min-height: 780px;
                    width:100%

So wird das ganze auch richtig dargestellt,

nur habe ich eine Frage : Wird es dann auch bei den verschiedenen Auflösungen richtig dargestellt?