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

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>