nicht angemeldet
Hallo liebe Community!
Das ist mein erstes Posting hier und ich hoffe, dass ihr mir helfen könnt.
Ich möchte erreichen, dass eine Liste horizontal angezeigt wird. In diese Liste soll eine andere verschachtelt werden. Soweit habe ich noch keine Probleme. Doch die zweite, verschachtelte Liste soll vertikal angezeigt werden. Damit habe ich ehrlich gesagt riesige Probleme. Die zweite Liste übernimmt die horizontale Eigenschaft.
Die erste Liste habe ich von einem Beispiel aus dem Internet. Leider weiß ich die Adresse nicht mehr. Diese Liste habe ich dann auf meine Bedürfnisse angepasst. Aber ich habe nicht verstanden, was dafür sorgt, dass die Liste horizontal und nicht vertikal dargestellt wird. Ich sehe vielleicht den Wald vor lauter Bäumen nicht, aber könntet ihr mir das bitte ganz kurz auch noch sagen.
Jetzt aber zu meinem eigentlichen Problem. Hier kommt der komplette Quelltext, damit ihr nachvollziehen könnt, was ich genau meine.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
body{
background-color: #000000;
font-family: verdana, arial, sans-serif;
color: #FFFFFF;
}
div#header{
margin-left: auto;
margin-right: auto;
width: 800px;
}
div#headpic{
margin: 0;
}
#navigation {
height:2em;
line-height:2em;
margin: 0;
}
#navigation ul {
margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;
padding:0;
background-color: #000000;
}
#navigation li {
float:left;
margin:0;
padding:0;
list-style-type:none;
border-right:1px #FFFFFF solid;
background-color: #000000;
}
#navigation li a {
display:block;
padding:0 12px;
font-size:0.8em;
text-transform:uppercase;
letter-spacing:1px;
background-color: #000000;
color: #797979;
}
#navigation li a:hover {
display:block;
padding:0 12px;
font-size:0.8em;
text-transform:uppercase;
letter-spacing:1px;
background-color: #FFFFFF;
color: #434343;
}
~~~[code lang=html]
</style>
</head>
<body>
<div id="all">
<div id="header">
<div id="headpic">
<img src="bilder/headpic.jpg" width="800" height="161" alt="">
</div>
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Bilder</a></li>
<li><a href="#">Videos</a>
<ul>
<li>Listenpunkt1</li>
<li>Listenpunkt2</li>
<li>Listenpunkt3</li>
<li>Listenpunkt4</li>
</ul>
</li>
<li><a href="#">Wir</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
[code]
Vielen Dank für eure Hilfe! Ich hoff, ihr könnt einem Anfänger wie mir auf die Sprünge helfen!
Danke schön, Joachim!
MudGuard