Hallöchen,
ich hab vor kurzem mich mal an die divs gewagt. Jetz bin ich an ein Problem gestoßen.
Es geht um dieses Menue (Textlinks werden noch ersetzt).
vorher
Wenn mann auf den "Link 2" klickt, soll das Menue so aussehen:
nachher
Also, irgendwie müssen die Links eingeblendet werden, oder so ...
... es soll keine Seperate extra seite werden ... möglichst ;-)
Hier mal der Seiten code:
und hier der css style:
Ich würde mich über hilfe freuen.
MfG Nick
ich hab vor kurzem mich mal an die divs gewagt. Jetz bin ich an ein Problem gestoßen.
Es geht um dieses Menue (Textlinks werden noch ersetzt).
vorher
Wenn mann auf den "Link 2" klickt, soll das Menue so aussehen:
nachher
Also, irgendwie müssen die Links eingeblendet werden, oder so ...
... es soll keine Seperate extra seite werden ... möglichst ;-)
Hier mal der Seiten code:
HTML:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="main">
<div class="logo"></div>
<div class="menue">
<div class="link"><a href="#">link</a></div>
<div class="gradient"></div>
<div class="link"><a href="#">link 2</a></div>
<div class="menue_klein">
<div class="link_klein"><a href="#">link_klein</a></div>
<div class="link_klein"><a href="#">link_klein</a></div>
<div class="link_klein"><a href="#">link_klein</a></div>
<div class="link_klein"><a href="#">link_klein</a></div>
<div class="link_klein"><a href="#">link_klein</a></div>
<div class="link_klein"><a href="#">link_klein</a></div>
<div class="link_klein"><a href="#">link_klein</a></div>
<div class="link_klein"><a href="#">link_klein</a></div>
</div>
<div class="gradient"></div>
<div class="link"><a href="#">link</a></div>
<div class="gradient"></div>
<div class="link"><a href="#">link</a></div>
<div class="gradient"></div>
<div class="link"><a href="#">link</a></div>
<div class="gradient"></div>
<div class="link"><a href="#">link</a></div>
<div class="gradient"></div>
<div class="link"><a href="#">link</a></div>
</div>
<div class="headtext"></div>
<div class="content"></div>
<div class="bottom">© 2002 - 2006 Heichlinger Druckerei GmbH</div>
</div>
</body>
</html>und hier der css style:
Code:
body,td,th {
background-color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
}
.main {
border: 1px solid #FFFFFF;
position: absolute;
margin-left: -378px;
top: 50%;
margin-top: -339px;
height: 678px;
width: 756px;
left: 50%;
}
.content {
padding: 10px;
height: 553px;
width: 553px;
border: 1px solid #FFFFFF;
left: 164px;
position: absolute;
top: 68px;
background-image: url(../img/test.jpg);
background-repeat: no-repeat;
background-position: 10px 10px;
background-color: #000000;
}
.logo {
background-image: url(../img/logo.gif);
background-repeat: no-repeat;
height: 117px;
width: 117px;
top: -30px;
position: absolute;
left: 23px;
}
.headtext {
background-image: url(../img/headtext.gif);
background-repeat: no-repeat;
height: 21px;
width: 502px;
top: 20px;
position: absolute;
left: 164px;
}
.bottom {
position: absolute;
left: 164px;
width: 500px;
top: 652px;
}
a:link {
color: #005DA8;
text-decoration: none;
}
a:hover {
color: #0099FF;
text-decoration: none;
}
a:visited {
color: #005DA8;
text-decoration: none;
}
a:active {
color: #0099FF;
text-decoration: none;
}
.gradient {
background-image: url(../img/gradient.gif);
background-repeat: no-repeat;
height: 9px;
width: 163px;
}
.menue {
height: 400px;
width: 163px;
top: 150px;
position: absolute;
left: 1px;
}
.link {
height: 28px;
width: 163px;
}
.link_klein {
height: 24px;
width: 163px;
}
.menue_klein {
height: 192px;
width: 163px;
}Ich würde mich über hilfe freuen.
MfG Nick
