✔ Frage zu Trennlinien in einer horizontalen Navigation

[Glomby]

Hallo,

also irgentwie komme ich mir doof vor diese Frage hier zu stellen aber ich will ja auch was dazu lernen.

Ich frage mich jetzt schon die ganze Zeit wie auf dieser Seite (oder natürlich auch auf beliebig anderen Seiten) in der Navigation diese Trennlinien mit einem Farverlauf gemacht wurden. (die Navigation mit "Jetzt schauen", "Programm", "Video on Demand" etc.)

http://tv.esl.eu

Die Navigation an sich ist ja kein Problem. Die hover Effekte etc kann ich ohne Probleme selber bauen aber diese Trennlinien machen mir zu schaffen. Ich habe einfach mal alle Bilder aus dem Quelltext gesucht um verstehen zu können, wo genau der Code steht, der diese Linien erzeugt aber ich werde einfach nicht fündig.

Ich hoffe mal, ihr könnt mir da kurz erklären wie man solche Linien am besten macht und natürlich am besten, wie es in diesem Beispiel gemacht wurde.

 

[Maik]

Hi,

die Trennlinie ist lediglich ein solider rechter Rahmen für das a-Element:

/* Stylesheet-Quelle: http://tv.esl.eu/min/?b=gfx_static/skins/v2009_blue&f=default_2009-05-13.css,css/main/base.css,css/modifications/basemod.css,css/modifications/basemod_2col_right_vlines.css,css/navigation/nav_shinybuttons.css,css/main/content.css,css/print/print_003.css,skin.css,css/google_404.css  */

#qm1
a{color:#CCC;font-size:11px;font-weight:bold;text-alignement:center;text-decoration:none;padding:2px
15px 4px 15px;border-style:solid;border-color:#666;border-width:0px 1px 0px 0px;line-height:18px}

Der Farbverlauf dieser Trennlinie beruht auf einer "optischen Täuschung", hervorgerufen durch den Farbverlauf des Hintergrundbildes http://eslstatic.net/skins/v2009_blue/menu/gamemenu_bg.gif im übergeordneten Block #gamemenu_nav.

mfg Maik

 

[Glomby]

Danke dir

Genau das hab ich mir gedacht nur dieser blöde Verlauf hat mich die ganze Zeit so verwirrt, dass ich wohl einfach den Rahmen übersehen hab.

 

[Glomby]

Ich nutz den Thread gerade einfach nochmal für eine ähnliche Frage.

Eine Trennlinie für die Navigation wie oben ist ja kein Ding, wie macht man aber am besten eine Trennlinie die nicht von ganz oben nach unten gehen soll. Also ich spreche über css ja das <a> element an und vergrößere den link mittels block auf die ganze fläche der navigation. Wenn ich jetzt eine Trennlinie an den rechten Rand legen will, die nicht von ganz oben nach unten geht müsste ich ja einfach diese Box verkleinern aber ich will das <a> nicht verkleinern müssen.

Wie kann man dann also noch am besten so eine Linie einbauen?

Ich hoffe ihr versteht in etwa worauf ich da hinaus will

 

[Maik]

Hi,

du hast in diesem Fall die Möglichkeit, eine Grafik mit der gewünschten Dimension (Breite/Höhe) zu erzeugen, und diese im a-Element als Hintergrundbild einzubinden, das nicht wiederholt wird:

a {
display: block;
background: url(pfad/zur/grafik.jpg) right top no-repeat;
}

mfg Maik