#1 28. November 2008 [Tutorial] Horizontale und vertikale Navigation mit CSS Edit vorweg: Sorry, hatte das ganz vergessen durch meinen Schulkram (Wurde durch nen BW aufmerksam), werde es auf jedenfall noch beenden ! Spätestens bis diesen Sonntag Hi, in diesem Tutorial erkläre ich den Aufbau einer horizontalen und vertikalen Navigation mit <ul> und einem <div>. Es gibt bestimmt 1000 Wege das zu realisieren aber für mich ist das der momentan beste und effektivste. Voraussetzungen: - Umgang mit <ul>, <li> (Wobei das selbsterklärend sein sollte) - http://de.selfhtml.org/html/text/listen.htm - CSS Grundkenntnisse (Was es mit dem id=""-TAG in Verbindung mit CSS: #Klassenname auf sich hat) - http://www.css4you.de/wscss/index.html Mehr auch nicht, der Rest wird alles erklärt Schritt 1: 1.1 Man legt sich 2 Datein an - menu.css - index.htm 1.2 Man baut in der index.htm das Gerüst für die Navigation auf index.htm HTML: <html> <head> <title>Navigationstutorial</title> <!-- Damit bindet man die menu.css ein, diese muss im gleichen Verzeichnis liegen wie die index.htm --> <link rel="stylesheet" type="text/css" href="menu.css" /> </head> <body> <!-- Der Klassenname ist jetzt nur als Beispiel für das Verständniss genommen --> <div id="meineNavigation"> <!-- Die Listenpunkte werden wir gleich mittels CSS formatieren und zu einem gewünschten Navigationsergebniss bringen --> <ul> <li><a href="#">Erster Navigationspunkt</a></li> <li><a href="#">Zweiter</a></li> <li><a href="#">Dritter</a></li> <li><a href="#">Etc.</a></li> </ul> <!-- // --> </div> <!-- // --> </body> </html> Vertikale Methode Schritt 2: CSS Datei bearbeiten und die Navigation zum Leben erwecken menu.css (Am besten kopiert ihr euch das in einen Editor, damit das Syntax-Highlightning greift.) PHP: #meineNavigation { width : 150px ; } #meineNavigation ul { /* Mit diesem Befehl haben wir keinen Listenstyle mehr. D.h. keine Aufzählungspunkte o.ä. */ list- style - type : none ; margin : 0 ; padding : 0 ; border - top : 1px solid #999999; /*einen für rechts auch noch, das kann aber jeder für sich entscheiden.. */ border - right : 1px solid #999999; } #meineNavigation li { /* Abstand oben und unten jeweils (X)px, wieder mal wie es jeder möchte... */ padding - top : 10px ; padding - bottom : 10px ; padding - left : 10px ; background - color : #CCCCCC; /* Die beim ul erwähnten border-bottoms für den li-TAG, somit hat jeder Listenpunkt nun einen border-bottom und der letzte Punkt schließt die Box rein vom aussehen her */ border - bottom : 1px solid #999999; } #meineNavigation a { color : #000000; /* Textfarbe schwarz */ text - decoration : none ; } #meineNavigation a:hover { /* a:hover stellt den Hovereffekt ein, ein Hovereffekt ist der Effekt, der passiert, wenn man mit der Maus über den Link geht */ color : #666666; /* Eine wechselnde Farbe z.B. */ text - decoration : underline ; } Horizontale Methode Zurück zu Schritt 1 index.htm HTML: <html> <head> <title>Navigationstutorial</title> <!-- Damit bindet man die menu.css ein, diese muss im gleichen Verzeichnis liegen wie die index.htm --> <link rel="stylesheet" type="text/css" href="menu.css" /> </head> <body> <!-- ###############NEUER INHALT############### --> <!-- Ich habe nun ein Wrap um die Navigation gebaut, um die Navigation innerhalb des Wraps besser ausrichten bzw. designen zu können --> <div id="wrap_navigation"> <!-- Der Klassenname ist jetzt nur als Beispiel für das Verständniss genommen --> <div id="meineNavigation"> <!-- Die Listenpunkte werden wir gleich mittels CSS formatieren und zu einem gewünschten Navigationsergebniss bringen --> <ul> <li><a href="#">Erster Navigationspunkt</a></li> <li><a href="#">Zweiter</a></li> <li><a href="#">Dritter</a></li> <li><a href="#">Etc.</a></li> <li><a href="#">Usw.</a></li> <li><a href="#">Noch ein Item</a></li> <li><a href="#">Beliebig...</a></li> </ul> <div class="clear"></div> <!-- // --> </div> <!-- // --> </div> </body> </html> Schritt 2 menu.css PHP: . clear { clear : both ; } #wrap_navigation { background - color : #CCCCCC; /* Farbe für die ganze Navigationsleiste */ /* Unten und oben einen Border, wieder fürs Auge */ border - top : 1px solid #666666; border - bottom : 1px solid #666666; } #meineNavigation { /* ###############GEÄNDERTER INHALT############### */ /* width: 150px; Breite wird nicht angegeben, da es individuell breit werden kann, neuer Navigationspunkt -> neue Breite */ } #meineNavigation ul { /* Mit diesem Befehl haben wir keinen Listenstyle mehr. D.h. keine Aufzählungspunkte o.ä. */ list- style - type : none ; margin : 0 ; padding : 0 ;} #meineNavigation li { /* Abstand oben und unten jeweils (X)px, wieder mal wie es jeder möchte... */ padding - top : 10px ; padding - bottom : 10px ; /* Ein wenig padding links und rechts, damit die einzelnen list-items nicht so eingequetscht sind :) */ padding - right : 25px ; padding - left : 25px ; background - color : #CCCCCC; /* ###############NEUER INHALT############### */ /* Richtet die einzelnen Punkte nebeneinander aus, am Ende der Navigation muss ein clear gemacht werden (Siehe .clear) Man könnte es auch mit display: inline; machen. */ float : left ; } #meineNavigation a { color : #000000; /* Textfarbe schwarz */ text - decoration : none ; } #meineNavigation a:hover { /* a:hover stellt den Hovereffekt ein, ein Hovereffekt ist der Effekt, der passiert, wenn man mit der Maus über den Link geht */ color : #666666; /* Eine wechselnde Farbe z.B. */ text - decoration : underline ; } Das ganze sieht relativ langweilig aus, also machen wir doch mal einen Hover dazu Hinweis: Es sieht ziemlich langweilig aus aber wenn ihr den Kommentaren folgt, dann könnt ihr das natürlich auch nach euren Vorstellungen gestalten. Vorschläge und Kritik sind erwünscht. Inhalte die noch kommen: - Hovereffekt für den kompletten li-Bereich + Multi-Zitat Zitieren
#2 28. November 2008 AW: [Tutorial] Horizontale und vertikale Navigation mit CSS Mach statt [noparse][html]...[/html] einfach [php]...[/php].[/noparse] Ich glaub, dann haste ein akzeptables Highlighting auch für CSS. + Multi-Zitat Zitieren
#3 28. November 2008 AW: [Tutorial] Horizontale und vertikale Navigation mit CSS Danke, ist besser, zwar sind die #HEX blöd dargestellt aber nun gut, jeder der das Tutorial macht, sollte auch einen HTML-Editor haben + Multi-Zitat Zitieren