Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Navigation mit einer Trennlinie zwischen Menüpunkten“

Sonjiru

Noch nicht viel geschrieben

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
 

Sonjiru

Noch nicht viel geschrieben

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?
 
Zuletzt bearbeitet:

Myhar

Hat es drauf

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

Noch nicht viel geschrieben

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

Hat es drauf

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

Nicht mehr ganz neu hier

AW: Navigation mit einer Trennlinie zwischen Menüpunkten

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

Sonjiru

Noch nicht viel geschrieben

AW: Navigation mit einer Trennlinie zwischen Menüpunkten

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.
 
Zuletzt bearbeitet:

spenderorgan

Nicht mehr ganz neu hier

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

Noch nicht viel geschrieben

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

Nicht mehr ganz neu hier

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

Noch nicht viel geschrieben

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.

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 ;)
 

Sonjiru

Noch nicht viel geschrieben

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

Nicht mehr ganz neu hier

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

Noch nicht viel geschrieben

AW: Navigation mit einer Trennlinie zwischen Menüpunkten

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

Myhar

Hat es drauf

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

Noch nicht viel geschrieben

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?
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.158
Beiträge
2.581.880
Mitglieder
67.226
Neuestes Mitglied
Alec168
Oben