Marktplatz Downloads Tutorials Forum

Designnation bietet auch:

Tutorial hinzufügen

Beliebte Links Weitere Optionen

Tutorial suchen

Titel

Schlüsselwörter

(X)HTML / CSS Tutorial: Horizontale Navigation mit Listen



Ranking: +5   Kommentare: 3   |   Bewertung: Keine Berechtigung!  

Mit diesem Tutorial könnt ihr horizontale Navigationen bauen, ohne hässliche Tabellen dafür zu verwenden.

Erst ein mal erstellen wir eine Standard-HTML Datei.

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>



<head>

<title>Tutorial</title>

</head>



<body>

</body>



</html>



Jetzt fangen wir an, den CSS-Teil einzufügen.

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>



<head>

<title>Tutorial</title>

<style type="text/css">

@charset "UTF-8";



/* <![CDATA[ */



ul {

  margin: 0;

  padding: 0;

  list-style: none;

}



li {

  display: inline;

  padding-right: 10px; <!-- Das Margin bringt ein wenig Abstand zwischen den Navigations-Punkten -->

}



/* ]]> */

</style>

</head>



<body>

</body>



</html>



Jetzt braucht ihr nur noch eine übliche Liste mit allen gewünschten Navigations-Punkten zu erstellen und fertig.

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>



<head>

<title>Tutorial</title>



<style type="text/css">

@charset "UTF-8";



/* <![CDATA[ */



ul {

  margin: 0;

  padding: 0;

  list-style: none;

}



li {

  display: inline;

  padding-right: 10px; <!-- Das Margin bringt ein wenig Abstand zwischen den Navigations-Punkten -->

}



/* ]]> */

</style>



</head>



<body>



<ul>

 <li>Link #1</li>

 <li>Link #2</li>

 <li>Link #3</li>

 <li>Link #4</li>

 <li>Link #5</li>

</ul>



</body>



</html>



Fertig!

Wenn ihr ein bisschen experimentiert kann das ganze hinterher so aussehen
http://l2panix.l2.funpic.de/tutorial/tutorial_1.html

Veröffentlicht von: PAN1X
Veröffentlicht am: 20 Apr. 2008
Bookmarks: social bookmarking yigg it Linkarena Technorati Yahoo Mr. Wrong
Schlüsserwörter: CSS css2 css3 HTML liste listen navi navigation xHTML


Themenverwandte Tutorials


Kommentar(e) (3)


deleted_1391267505 sagt:

Nicht schlecht. Hatte nie daran gedacht auch horizontale Navigationsleisten mit zu machen. Klasse!

18 Jul. 2008 11:37:29 • Antworten


Jack135 sagt:

super tutorial und einfach beschrieben.
für anfänger perfekt!

21 Jun. 2008 21:13:50 • Antworten


PAN1X sagt:

Tschuldigung, habe vergessen das Padding durch Margin zu ersetzen. Nimmts mir nicht für übel :-)

21 Apr. 2008 13:14:04 • Antworten



Anfang

<<

1

>>

Ende

Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


Partner: • Designer in ActionFlash HilfeTutorials.dePixelio.deFlashstar BlogLizenzfreie Bilder