nicht angemeldet
Navigation
Ich möchte das ich die verschiedenen Themen in der Navigation öffnen und schliessen kann, also so ein dropdown welches auf geht wenn ich über den link fahre.
für hilfe bin ich sehr froh, ich denke das mir nur die klasse class="aufklappbar"fehlt, aber ich weiss leider nicht wie die geschrieben sein muss und was drin steht.
Der HTML und CSS code welchen ich bis jetzt geschrieben habe:
<html>
<head>
<title> PDA </title>
<link rel="stylesheet" type="text/css" href="css/text.css">
</head>
<body>
<div id="">
<div id="container" style="text-align: center">
<br>
<img src="bilder/jugi website.jpg">
</div>
<div id="navig"
<div id="navi" style="text-align: center;">
<h2>Navi</h2>
</div>
<div class="link" style="text-align: left;">
<a href="home.htm"> <h4>Home<h4>
</div>
<div class="link" style="text-align: left;">
<a href="programm.htm"> <h4>Programm<h4>
</div>
<div class="link" style="text-align: left;">
<ul>
<li class="aufklappbar"><a href="fotos.htm"> <h4>Fotos<h4></a>
<ul>
<li><a href="märz.htm">März</a></li>
<li><a href="april.htm">April</a></li>
<ul>
</li>
</ul>
</div>
<div class="link" style="text-align: left;">
<a href="ejt.htm"> <h4>EJT<h4>
</div>
<div class="link" style="text-align: left;">
<a href="jugi news.htm"> <h4>Jugi News<h4>
</div>
<div class="link" style="text-align: left;">
<a href="logo.htm"> <h4>Logo<h4>
</div>
</div>
<div id="terminkalender">
<div id="akalender" style="text-align: center;">
<h2>Kalender<h2>
</div>
</div>
<div id="center">
</div>
<div id="sokel" style="text-align: center;">
huhu
</div>
</div>
</body>
CSS:
<--!
#first
{
color: rgb(12, 12, 44)
}
#root
{
width: 1280px;
height: 960px;
margin: 0px auto;
color: #00ff00;
background-color: rgb(00, 99, 00);
}
#container
{
style="text-align: center;
background-color: rgb(18, 52, 86);
position: absolut;
width: 99,7%;
height: 10%; /\*150px\*/
border-style: ridge;
border-color: #999999;
font-family: Arial;
color: #ffffff;"
}
#navig
{
style="text-align: left;
background-color: rgb(18, 52, 86);
position: absolut;
width: 15%; /\*200px\*/
height: 85%; /\*938px\*/
border-style: ridge;
border-color: #999999;
font-family: Arial;
color: #ffffff;
float: left;
padding-top: 0px;
margin: 1px;"
}
#navi
{
style="text-align: center;
background-color: #AAAAAA;
position: absolut;
width: 96%;
height: 4%; /\*35px\*/
border-style: none;
border-color: #999999;
font-family: Arial;
color: #ffffff;
margin: 0px auto;"
}
#terminkalender
{
style="text-align: right;
background-color: rgb(18, 52, 86);
position: absolut;
width: 15%; /\*200px\*/
height: 85%; /\*953px\*/
border-style: ridge;
border-color: #999999;
font-family: Arial;
color: #ffffff;
float: right;
padding-top: 0px;
margin: 1px;"
}
#akalender
{
style="text-align: center;
background-color: #AAAAAA;
position: absolut;
width: 96%;
height: 4%; /\*35px\*/
border-style: none;
border-color: #999999;
font-family: Arial;
color: #ffffff;
margin: 0 auto;"
}
#center
{
style="text-align: center;
background-color: rgb(18, 52, 86);
margin: 0px auto;
position: absolut;
width: 68.3%;/\*450px\*/
height: 10%; /\*100px\*/
border-style: ridge;
border-color: #999999;
font-family: Arial;
color: #ffffff;
margin: 1px auto;
}
#sokel
{
style="text-align: center;
background-color: rgb(18, 52, 86);
position: absolut;
width: 99,7%;
height: 3%; /\*50px\*/
border-style: ridge;
border-color: #999999;
font-family: Arial;
color: #ffffff;
float: bottom;
clear:both;
margin: 1px;"
}
.link
{
style="text-align: center;
background-color: #AAAAAA;
position: absolut;
width: 96%;
height: 4%; /\*35px\*/
border-style: none;
border-color: #999999;
font-family: Arial;
color: #ffffff;
margin: 0px auto;"
}
-->
-
http://www.alistapart.com/articles/dropdowns/
http://www.alistapart.com/articles/hybrid/Im übrigen musst du dein ungültiges Markup/Styles korrigieren. Die Validatoren helfen dir dabei.
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/