Home Schule Lernsoftware Mexiko

In diesem Beispiel sehen Sie eine waagerechte Menüstruktur.

Hier der Code aus dem <style>-Abschnitt:

<style>

body {color:black;
background:green;
padding-left:10px;}

#div1 {
top:10px;
left:10px;
width:100%;
border:1px solid rgb(102, 102, 102);
background: darkgreen;
margin:10px;
padding:10px;
}

div#div1 a {
text-align:center;
font:bold 1em sans-serif;
padding:15px;
text-decoration:none;
color:rgb(205,205,205);
}

div#div1 a:hover {color:white;}
</style>

Die Anordnung der Hyperlinks nebeneinander geschieht automatisch und ist dabei von der Textbreite abhängig.

Wollte man den Hyperlinks die gleiche Breite zuweisen, müsste man sie in Elemente packen, die das <width>-Attribut haben. Eine Variante ist, die Links in ein Listenelement einzubetten und die Listeneinträge nebeneinander anzeigen zu lassen.

Ein etwas komplexeres Beispiel können Sie sich unter css.fractatulum.net ansehen.