Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

Archive for the ‘CSS Menue’ Category

Formatierung von horizontalen Navigationsleisten mit CSS

Posted by sura1 - 2. Januar 2009

jan02_128x128
Bookmark and Share

Beispiele für die Formatierung von horizontalen Navigationsleisten

Die folgenden 4 Beispiele zeigen, wie aus einer ungeordneten Liste eine horizontale Navigationsleiste wird. Dabei wird zunächst nur Farbe, dann Farbe mit Rahmen,  danach auch Grafik und zum Abschluss die Technik »Sliding Doors« kombiniert mit der Technik »Hovereffekte mit CSS-Sprites« verwendet.

Informationen zu »Sliding Doors«:

http://www.alistapart.com/articles/slidingdoors/ (englisches Original)
http://www.thestyleworks.de/tut-art/listnav3.shtml (deutsche Übersetzung)

Informationen zu »Hovereffekte mit CSS-Sprites«:

http://www.webkrauts.de/2007/10/20/hovereffekte-mit-css-sprites/
http://bueltge.de/css-sprites-einfach-erklaert/675/
http://www.alistapart.com/articles/sprites/

   Fertige Beispiele: Zip_Datei (11,6 KB)
button1
     Beispiel 1:           Beispiel 2:           Beispiel 3:           Beispiel 4:
demo2 demo2 demo2 demo2

Beispiel 1:

Horizontale Navigation nur mit Hintergrundfarbe

HTML:

<ul id="navigation-1">
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
<li><a href="#" class="active">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
</ul>
CSS

/* Beispiel 1 */
#navigation-1 li {
background: #525D69;
float: left;
}

#navigation-1 li a {
color: #DFE1E2;
float: left;
padding: 10px 20px;
}

#navigation-1 li a:hover {
background: #2f588d;
color: #fff;
}

#navigation-1 li a.active {
background: #459d44;
color: #fff;
text-decoration: underline;
}

Ergebnis:

   [Beispiel 1 ansehen: bitte Grafik anklicken!]
hor_nav1_html

Beispiel 2:

Horizontale Navigation nur mit Hintergrundfarbe und Rahmen

HTML:

<ul id="navigation-2">
<li class="start"><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
<li><a href="#" class="active">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li class="ende"><a href="#">Dolor</a></li>
</ul>
CSS

#navigation-2 li {
background: #525D69;
border-left: 1px solid #707F90;
border-right: 1px solid #3C444D;
float: left;
}

#navigation-2 li a {
color: #DFE1E2;
float: left;
padding: 10px 20px;
}

#navigation-2 li a:hover {
background: #2f588d;
color: #fff;
}

#navigation-2 li a.active {
background: #459d44;
color: #fff;
text-decoration: underline;
}

#navigation-2 li.start {
border-left: 0;
}

#navigation-2 li.ende {
border-right: 0;
}

Ergebnis:

   [Beispiel 2 ansehen: bitte Grafik anklicken!]
hor_nav2_html

Beispiel 3:

Horizontale Navigation mit Hintergrundfarbe, Rahmen und 3 Hintergrund-Grafiken

Hintergrund-Grafiken:

nav-bg.jpg nav-bg-2.jpg nav-bg-3.jpg
     nav-bg         nav-bg-2          nav-bg-3
HTML:

<ul id="navigation-3">
<li class="start"><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
<li><a href="#" class="active">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li class="ende"><a href="#">Dolor</a></li>
</ul>
CSS

/* Beispiel 3 */
#navigation-3 li {
background: #676f7a url(nav-bg.jpg) bottom left repeat-x;
border-left: 1px solid #707F90;
border-right: 1px solid #3C444D;
float: left;
}

#navigation-3 li a {
color: #DFE1E2;
float: left;
padding: 10px 20px;
}

#navigation-3 li a:hover {
background: #5d91da url(nav-bg-2.jpg) bottom left repeat-x;
color: #fff;
}

#navigation-3 li a.active {
background: #6aec7c url(nav-bg-3.jpg) bottom left repeat-x;
color: #fff;
text-decoration: underline;
}

#navigation-3 li.start {
border-left: 0;
}

#navigation-3 li.ende {
border-right: 0;
}

Ergebnis:

   [Beispiel 3 ansehen: bitte Grafik anklicken!]
hor_nav3_html

Beispiel 4:

Horizontale Navigation mit 2 Hintergrund-Grafiken und Anwendung der Technik »Sliding Doors« und »Hovereffekte mit CSS-Sprites«.

2 Hintergrund-Grafiken:

nav-bg-l.jpg                           nav-bg-r-jpg
     nav-bg-l       nav-bg-r
HTML:

<ul id="navigation-4">
<li><a href="#"><span>Lorem</span></a></li>
<li><a href="#"><span>Ipsum</span></a></li>
<li><a href="#"><span>Dolor</span></a></li>
<li><a href="#" class="active"><span>Lorem</span></a></li>
<li><a href="#"><span>Ipsum</span></a></li>
<li><a href="#"><span>Dolor</span></a></li>
</ul>
CSS

#navigation-4 li {
float: left;
margin: 0 2px 0 0;
}

#navigation-4 li a {
background: #676f7a url(nav-bg-l.jpg) top left no-repeat;
color: #DFE1E2;
float: left;
padding: 0 0 0 5px;
}

#navigation-4 li a span {
background: #676f7a url(nav-bg-r.jpg) top right no-repeat;
color: #DFE1E2;
float: left;
padding: 10px 15px 10px 10px;
}

#navigation-4 li a:hover span {
background-position: 100% -92px;
color: #fff;
}

#navigation-4 li a:hover {
background-position: 0 -92px;
color: #fff;
}

#navigation-4 li a.active {
background-position: 0 -184px;
color: #fff;
text-decoration: underline;
}

#navigation-4 li a.active span {
background-position: 100% -184px;
color: #fff;
text-decoration: underline;
}

Ergebnis:

   [Beispiel 4 ansehen: bitte Grafik anklicken!]
hor_nav4_html

Zusammenfassung:

   Fertige Beispiele: Zip_Datei (11,6 KB)
button1
     Beispiel 1:           Beispiel 2:           Beispiel 3:           Beispiel 4:
demo2 demo2 demo2 demo2

Ähnliche Artikel:

Navigationsmenüs in Registeroptik
CSS-Menüs ohne Einsatz von Listenelementen
Navigations-Menü mit Button-Effekt
CSS Float: Schwebende Boxen (Theorie und Praxis)
CSS Sidebar mit runden Boxen
Styling Blockquotes – Zitate mit CSS gestalten

Posted in CSS Menue | Verschlagwortet mit: , , , , , , , , | Leave a Comment »

Navigations-Menü mit Button-Effekt

Posted by sura1 - 13. November 2008

13nov

Bookmark and Share

Navigations-Menü mit Button-Effekt

button_nav

demo_ausfuhren

Wenn Sie die Höhe der Buttons verändern wollen, müssen Sie wie folgt vorgehen:

Ändern Sie einfach die beiden CSS-Anweisungen line-height und height – machen Sie sie größer, werden die Buttons ebenso größer; wenn die beiden CSS-Befehle kleiner gemacht werden, verkleinern sich im gleichen Augenblick auch die Buttons.

Auszug aus dem CSS-Code:

a.button span {
	          background:#d4d0c8 url(images/bg_btn.gif) repeat-x;
	          float:left;
                 line-height:24px;
                 height:24px;
                 padding:0 10px;
	          border-right:1px solid #777;
	          border-bottom:1px solid #777;
	     }

Durch den CSS-Befehl width:auto; sind die einzelnen Buttons in der Breite flexibel und wachsen mit der Länge des Textes mit!

Auszug aus dem CSS-Code:

a.button {
  float: left;
  font-size: 110%;
  font-weight: bold;
  margin-right: 2px;
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
  color: #333;
  width: auto;
 }

Download Beispieldateien (1,9KB):

zipblau1_klein

Ähnliche Artikel:

29 Free CSS Menus – 29 kostenlose CSS Menüs auf www.13styles.com
7 kostenlose CSS-Navigationsmenüs in Reiteroptik
9 Free CSS Menues – 9 kostenlose CSS-Menüs zum Mitnehmen
Free CSS Menus: 14 gratis CSS Menüs
Free CSS Menüs – www13stylesscss

Posted in CSS Menue | Verschlagwortet mit: , , , , , , , | Leave a Comment »

CSS-Menüs ohne Einsatz von Listenelementen

Posted by sura1 - 23. Oktober 2008

Bookmark and Share

CSS-Menüs ohne Einsatz von Listenelementen

Ich möchte Ihnen heute zeigen, wie sie horizontale und vertikale CSS-Navigationen (CSS-Menüs) ganz einfach ohne den Einsatz von Listenelementen (<ul>, <ol>, <li>) erstellen können.

Die Informationen dazu habe ich auf der Seite www.cssplay.co.uk entdeckt. CSS-Papst Stu Nicholls erläutert dies in seinem Menü-Tutorial http://www.cssplay.co.uk/menus/tutorial.html ausführlich und sehr genau.

Einleitung im Tutorial (komplett in englischer Sprache):

Information von Stu Nicholls am Beginn der Erklärungen:

I can’t press this point too hard – when you are FIRST starting out with css DON’T USE LISTS unless you have a real need to do so.

I know that some sites say that this is the correct way to produce your navigation buttons and proceed to show how it works. But it is far too complicated, leads to bloated xhtml AND bloated CSS. Finally with all this extra coding there is so much to go wrong. If accessibility is an issue then there are other ways and another type of list that I believe is more suitable.

(Quelle: http://www.cssplay.co.uk/menus/tutorial.html )

Auf Basis des Tutorials möchte ich Ihnen eine horizontale und eine vertikale Navigation vorstellen:

In beiden Beispielen werden anstatt der Listenelemente nur Hyperlinks eingesetzt.  Diese werden in einen div-Container (<div id=“navcontainer“>) einfügt und mit CSS entsprechend formatiert. Der Hauptunterschied zwischen den beiden Navigationen besteht im wesentlichen darin, dass im ersten Beispiel mit dem CSS-Befehl: float:left die einzelnen Hyperlinks horizontal angeordnet werden.

Download der beiden Beispiele (15 KB):

Beispiel 1 – Horizontale Navigation (Grafik oder Button anklicken!)

Quellcode:

<div id="navcontainer">
<a class="nav" href="page1.html" title="page 1">Seite 1</a>
<a class="nav" href="page2.html" title="page 2">Seite 2</a>
<a class="nav" href="page3.html" title="page 3">Seite 3</a>
<a class="nav" href="page4.html" title="page 4">Seite 4</a>
<a class="nav" href="page5.html" title="page 5">Seite 5</a>
</div>

CSS-Code:

body
{ background-color: #920c0d; }
#navcontainer
{ width: 770px;
  height: 73px;
  margin: 100px auto;
  padding: 20px;
  border: 1px solid #000;
  background-color: #ffbf00;
}
a.nav, a.nav:link, a.nav:visited
{ display: block;
  width: 150px;
  height: 43px;
  margin-right: 2px;
  padding-top: 30px;
  background: url(images/linear_grey.png) repeat-x;
  border-left: 1px solid #7f7f7f;
  border-right: 1px solid #7f7f7f;
  text-align: center;
  text-decoration: none;
  font-family: verdana, arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  color: #e2e6e1;
  overflow: hidden;
  float: left;
}
a.nav:hover
{ color: #f00;
  text-decoration: underline;
  background: url(images/linear1_grey.png) repeat-x;
}
a.nav:active
{ color: #fff;
  background: #c00;
}

Beispiel 2 – Vertikale Navigation (Grafik oder Button anklicken!)

Quellcode:

<div id="navcontainer">
<a class="nav" href="page1.html" title="page 1">Seite 1</a>
<a class="nav" href="page2.html" title="page 2">Seite 2</a>
<a class="nav" href="page3.html" title="page 3">Seite 3</a>
<a class="nav" href="page4.html" title="page 4">Seite 4</a>
<a class="nav" href="page5.html" title="page 5">Seite 5</a>
</div>

CSS-Code:

body
{ background-color: #920c0d; }
#navcontainer
{ width: 152px;
  margin: 50px 0 0 50px;
  padding: 40px  50px;
  border: 1px solid #000;
  background-color: #ffbf00;
}
a.nav, a.nav:link, a.nav:visited
{ display: block;
  width: 150px;
  height: 43px;
  margin-top: 2px;
  padding-top: 30px;
  background: url(images/linear_grey.png) repeat-x;;
  border: 1px solid #7f7f7f;
  text-align: center;
  text-decoration: none;
  font-family: verdana, arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  color: #e2e6e1;
  overflow: hidden;
}
a.nav:hover
{ color: #f00;
  text-decoration: underline;
  background: url(images/linear1_grey.png) repeat-x;
}
a.nav:active
{ color:#fff;
  background: #c00;
}

Posted in CSS Menue | Verschlagwortet mit: , , , , , , | Leave a Comment »

Navigationsmenüs in Registeroptik

Posted by sura1 - 6. Juli 2008

Bookmark and Share

Navigationsmenü im Stil von Registern

Navigationsmenüs in Registeroptik erfreuen sich großer Beliebtheit. Wie man solche Menüs erstellt und welche Variationsmöglichkeiten es gibt, soll im Folgenden beschrieben werden.

alle Beispieldateien : 4,5KB-zip (karteireiter.-html + 7 css-dateien)

(bitte Download-Button oder Link anklicken!)

Achtung: Im Tutorial selbst finden Sie das Styleheet im html-Kopf eingebunden, in den fertigen Navigationsmenüs sind die CSS-Dateien dann mittels link-Element in die HTML-Datei eingebunden!

Sie haben auch die Möglichkeit, den kompletten Artikel als pfd-Datei (148 KB) herunterzuladen.

Download hier: navigationsmenu-im-stil-von-registern

Register ohne Grafikelemente

In diesem Beispiel soll ein Registerkartenmenü ohne Grafiken, allein mit HTML und CSS, erstellt werden. Das HTML-Gerüst des Menüs besteht aus einer ungeordneten Liste, die sich in einem <div>-Element befindet.

<div id=“box1″>
<ul>
<li><a href=“#“>Startseite</a></li>
<li><a href=“#“>Biografie</a></li>
<li><a href=“#“>Bildergalerie</a></li>
<li><a href=“#“>Kontaktseite</a></li>
<li><a href=“#“>Linkliste</a></li>
<li><a href=“#“>Impressum</a></li>
</ul>
</div>

Code: ( div id „box1“ )

Das Menü wird oben auf der Seite platziert, der Inhalt schließt sich darunter an.
Um die einzelnen Listenpunkte waagerecht anzuordnen, werden diese mit display:
inline dazu gebracht, sich wie Inline-Elemente zu verhalten; es erfolgt kein Umbruch
nach den <li>-Elementen.

Die <a>-Elemente werden mit display:block als Blockelemente
dargestellt. Damit sie sich auch waagerecht anordnen, wird die Eigenschaft
float:left eingesetzt.

Das <div>-Element wird ebenfalls mit float:left und der Breitenangabe
100% formatiert.

Diese Formate sind nötig, um das <div>-Element aufzuspannen.
Würden sie fehlen, lägen die Menüpunkte optisch unterhalb des <div>-
Elements. Statt das Format float einzusetzen, könnte auch mit einer Höhenangabe
für das <div>-Element gearbeitet werden.

Die Grunddarstellung des Menüs ist somit hergestellt, jetzt müssen nur noch Hintergründe,
Schriftfarben, Abstände etc. angepasst werden.

Der komplette Code für dieses Beispiel sieht folgendermaßen aus:

HTML: karteireiter.html

<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Strict//EN“
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“&gt;
<html xmlns=“http://www.w3.org/1999/xhtml&#8220; xml:lang=“de“ lang=“de“>
<head>
<title>karteireiter 1</title>
<meta http-equiv=“content-type“ content=“text/html; charset=ISO-8859-1″ />
<style type=“text/css“>
body {
margin:0;
padding:0;
}
#box1 {
float:left;
width:100%;
background:#808080;
}
#box1 ul {
margin:0;
padding:50px 10px 0 50px;
list-style:none;
}
#box1 li {
display:inline;
margin:0;
padding:0;
}
#box1 a {
float:left;
display:block;
background:#bbbbbb;
color:#ffffff;
font-weight:bold;
margin:0 4px 0 0;
padding:10px 10px 5px 10px;
text-decoration:none;
}
#box1 a:hover {
color:#000000;
background:#e6e6e6;
}
#box2{
padding:10px 50px 10px 50px;
margin:0;
clear:left;
}
</style>
</head>
<body>
<div id=“box1″>
<ul>
<li><a href=“#“>Startseite</a></li>
<li><a href=“#“>Biografie</a></li>
<li><a href=“#“>Bildergalerie</a></li>
<li><a href=“#“>Kontaktseite</a></li>
<li><a href=“#“>Linkliste</a></li>
<li><a href=“#“>Impressum</a></li>
</ul>
</div>
<div id=“box2″>
<p>Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht,
nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen,
in denen Mühen und Schmerz ihm große Freude bereiten können.</p>
<p>Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender
körperlicher Betätigung, außer um Vorteile daraus zu ziehen? Aber wer hat irgend
ein Recht, einen Menschen zu tadeln, der die Entscheidung trifft, eine Freude zu
genießen, die keine unangenehmen Folgen hat, oder einen, der Schmerz vermeidet,
welcher keine daraus resultierende Freude nach sich zieht? Auch gibt es niemanden,
der den Schmerz </p>
</div>
</body>
</html>

Code: ( karteireiter.html )

Das Beispiel sieht jetzt so aus: ( Vorschau )

Screenshot:

Zu beachten ist noch, dass das erste Element unterhalb des Menüs, in dem Fall <div id=“box2″></div>, mit dem Format clear:left versehen wird, um den Umfluss des Menüs zu stoppen. Ohne dieses Format würde in Firefox und Opera das Menü einen Teil des Inhaltsbereichs verdecken.

Möchte man die aktuell aufgerufene Seite innerhalb des Menüs kennzeichnen, kann dafür eine zusätzliche Klasse angelegt werden. Diese Klasse wird im HTML-Code dem entsprechenden Link zugeordnet.

<div id=“box1″>
<ul>
<li><a href=“#“>Startseite</a></li>
<li><a class=“aktiv“ href=“#“>Biografie</a></li>
<li><a href=“#“>Bildergalerie</a></li>
<li><a href=“#“>Kontaktseite</a></li>
<li><a href=“#“>Linkliste</a></li>
<li><a href=“#“>Impressum</a></li>
</ul>
</div>

Code: ( div-box1_aktiv )

Im Beispiel heißt die Klasse aktiv. Im CSS-Code wird diese Klasse ebenfalls angelegt
und mit den gewünschten Formaten versehen.

#box1 a.aktiv {
color:#000000;
background:#ffffff;
}

Code: ( css_box1a-aktiv )

Unser Beispiel sieht danach so ausVorschau )

Screenshot:

Es ist auch möglich, neben einer farblichen Gestaltung des aktiven Links das räumliche
Erscheinungsbild anzupassen.

Danach sieht unser Navigationsmenü so aus: ( Vorschau )

Screenshot:

Um diesen Effekt zu erreichen, braucht lediglich die Klasse .aktiv um entsprechende Padding- und Margin-Werte ergänzt zu werden.

#box1 a.aktiv {
color:#000000;
background:#ffffff;
margin-top:-10px;
padding-bottom:15px;
}

Code: ( box1_1a-aktiv )

Der negative Wert in der Eigenschaft margin-top sorgt dafür, dass der Menüpunkt 10 px nach oben versetzt wird.

Der Wert für padding-bottom errechnet sich aus dem positiven Wert von margin-top und dem padding-bottom-Wert, den das <a>-Element im Selektor #box1 a zugeordnet bekommen hat (5 px).

Das Format padding-bottom sorgt nun dafür, dass sich der Menübutton bis zur Grundlinie des Menüs erstreckt.
Ein ähnliches Format wurde auch auf das Pseudoformat :hover angewandt. Bei Mausberührung hüpft der Menüpunkt 5 px nach oben.

#box1 a:hover {
color:#000000;
background:#e6e6e6;
margin-top:-5px;
padding-bottom:10px;
}

Code: ( box1a_hover )

Das Menü im Beispiel ist so angelegt, dass es bei einem zu kleinen Fenster umbricht, das Menü erzwingt keinen Scrollbalken im Browserfenster.

Das Navigationsmenü sieht in diesem Falle so aus:

Möchte man das Umbrechen verhindern, muss man das <ul>-Element mit einer festen Breite
versehen.
Der Wert für die Breite sollte in der Einheit em angegeben werden, damit das Element in der Breite mit dem im Browser eingestellten Schriftgrad skaliert werden kann.

Da die <a>-Elemente in der Breite nicht formatiert werden, richtet sich die angezeigte Breite nach der Länge des darin enthaltenen Textes. Sollen alle Buttons in der gleichen Breite dargestellt werden, kann diese im Selektor #box1 a festgelegt werden, und auch hier sollte die Einheit em genutzt werden, um Skalierbarkeit sicherzustellen.

Der fertige Quell-Code sieht dann wie folgt aus (karteireiter.html., karteireiter_grey.css):

karteireiter.html

<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Strict//EN“
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“&gt;
<html xmlns=“http://www.w3.org/1999/xhtml&#8220; xml:lang=“de“ lang=“de“>
<head>
<title>karteireiter</title>
<meta http-equiv=“Content-Type“ content=“text/html; charset=iso-8859-1″ />

<link href=“karteireiter_grey.css“ rel=“stylesheet“ type=“text/css“ media=“screen“ />
</head>
<body>
<div id=“box1″>
<ul>
<li><a href=“#“>Startseite</a></li>
<li><a class=“aktiv“ href=“#“>Biografie</a></li>
<li><a href=“#“>Bildergalerie</a></li>
<li><a href=“#“>Kontaktseite</a></li>
<li><a href=“#“>Linkliste</a></li>
<li><a href=“#“>Impressum</a></li>
</ul>
</div>
<div id=“box2″>
<p>Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht,
nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen,
in denen Mühen und Schmerz ihm große Freude bereiten können.</p>
<p>Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender
körperlicher Betätigung, außer um Vorteile daraus zu ziehen? Aber wer hat irgend
ein Recht, einen Menschen zu tadeln, der die Entscheidung trifft, eine Freude zu
genießen, die keine unangenehmen Folgen hat, oder einen, der Schmerz vermeidet,
welcher keine daraus resultierende Freude nach sich zieht? Auch gibt es niemanden,
der den Schmerz </p>
</div>
</body>
</html>

karteireiter_grey.css

/* =========================
Stylesheet für die Übung:
Navigationsmenü im Stil
von Registern
========================= */
body {
margin:0;
padding:0;
}
#box1 {
float:left;
width:100%;
background:#808080;
}
#box1 ul {
margin:0;
padding:50px 10px 0 50px;
list-style:none;
}
#box1 li {
display:inline;
margin:0;
padding:0;
}
#box1 a {
float:left;
display:block;
background:#bbbbbb;
color:#ffffff;
font-weight:bold;
margin:0 4px 0 0;
padding:10px 10px 5px 10px;
text-decoration:none;
}
#box1 a:hover {
color:#000000;
background:#e6e6e6;
margin-top:-5px;
padding-bottom:10px;
}
#box2{
padding:10px 50px 10px 50px;
margin:0;
clear:left;
}
#box1 a.aktiv{
color:#000000;
background:#ffffff;
margin-top:-10px;
padding-bottom:15px;
}

Fertiges Navigationsmenü:Vorschau )

Screenshot:

Farbvariationen:

Bitte ersetzen Sie im HTML-Quellcode im <head>-Element <link href=“karteireiter.css“ rel=“stylesheet“ type=“text/css“ media=“screen“ /> die CSS-Datei durch die jeweilige Farbvariante.

karteireiter_green.css ( Vorschau )

Screenshot:

karteireiter_orange.css ( Vorschau )

Screenshot:

karteireiter_blue.css ( Vorschau )

Screenshot:

karteireiter_red.css ( Vorschau )

Screenshot:

karteireiter_yellow.css ( Vorschau )

Screenshot:

karteireiter_violett.css ( Vorschau )

Screenshot:

Posted in CSS Menue | Verschlagwortet mit: , , , , , , , , , | Leave a Comment »