Horizontale Liste

Gerade bei Navigationen sind mittlerweile Liste etwas sehr Schönes.

Natürlich, Listen lassen sich ja auch wunderbar formatieren und so hinbauen wie man sich das vorstellt. Hier nun die Möglichkeit der horizontalen Liste.

Listen sind im Normalfall eine Ansammlung von Objekten welche untereinander angeordnet sind. Um diese nun horizontal nebeneinander zu bekommen, bedient man sich simplen CSS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Horizontale Liste</title>
</head>

<body>
<div class="topnavigation">
<ul>
<li>Menue 1</li>
<li>Menue 2</li>
<li>Menue 3</li>
<li>Menue 4</li>
<li>Menue 5</li>
<li>Menue 6</li>
</ul>
</div>
</body>
</html>

Und nun das CSS dazu.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

@charset "utf-8";
body {
font: 13px Verdana, Arial, Helvetica, sans-serif;
color: #333333;
margin: 0px;
}

.topnavigation {
position: relative;
font-size: 1.1em;
z-index: 100;
background: #8C9EC0;
height: 16px;
font-size: 12px;
white-space: nowrap;
}

.topnavigation ul {
list-style-type: none;
padding: 0 0 0 25px;
margin: 0;
color: #F7F7F5;
background: #F5F5F5;
}

.topnavigation ul li {
float: left;
margin: 0 1.4em 0 0;
position: relative;
font-weight: bold;
}

.topnavigation a,
.topnavigation a:hover {
text-decoration: none;
color: #F7F7F5;
}

.topnavigation a:hover {
background: #5B6F97;
color: #FFFFFF;
text-decoration: none;
}

.topnavigation :hover {
color: #FFFFFF;
}

.topnavigation li:hover {
background: #5B6F97;
}

Über H.-Peter Pfeufer

Ich bin Webentwickler/ -programmierer aus Leidenschaft, WordPressbegeistert und ab und an auch mal ein netter Mensch.
Vor allen schreibe ich über alles was mit den Themen Webentwicklung/ -programmierung und WordPress zu tun hat. Nebenher auch mal einige Gedanken zu allgemeineren Themen.

Zeige alle Beiträge von H.-Peter Pfeufer →