Also ich habe das CSS-Design gemacht wo bei Design-Technischen Fragen beschrieben wurde, hat auch super geklappt danach wollte ich nur noch eine Navigation oben haben, habe dann auch einen Code gefunden und habe in eingefügt wie es beschrieben wurde nur ist dann meine Navigation auf der Linken Seite verschwunden und irgendwie oben reingekommen in meine Navigation oben.
Jetzt will ich das die Navi oben bleibt und die Navi links auch wie mache ich das?
Hier das Problem. Man siehts wenn man die Navi oben anschaut
HP Link :
http://www.own-tests.de.tl/
Text über dem Design
Code: <div id="Design04">
<div id="Header_oben"></div>
[color=green]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<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">
<title>Foldoutmenue Horizontal</title>
<style type="text/css" media="screen">
<!--
body
{
font-family: Verdana, sans-serif;
font-size: 14px;
overflow: auto;
padding: 10px;
margin: 0px;
}
ul, li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
.menu
{
position: absolute;
z-index: 3;
top: 10px;
}
.menu li
{
width: 140px;
float: left;
}
.menu a
{
border: 1px solid #888;
background-color: #fff;
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: default;
margin: 0px 2px;
display: block;
height: 20px;
color: #000;
}
.menu a:hover
{
background-color: #ccc;
}
#smenu1, #smenu2, #smenu3, #smenu4, #smenu5
{
font-size: 12px;
display: none;
width: 140px;
float: left;
}
#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a,
{
font-weight: normal;
padding-top: 2px;
border-top: 0px;
cursor: pointer;
}
//-->
</style>
<script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}
function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>
</head>
<body>
<div class="menu">
<ul>
<li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">HTML-Java</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href="http://www.own-tests.de.tl/Html.htm">HTML</a></li>
<li><a href="http://www.own-tests.de.tl/Java.htm">Java</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Downloads</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="http://own-tests.de.tl/Fonts.htm">Free Fonts</a></li>
<li><a href="">Subkategorie 2.2</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Kontakt/e</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href="">Link Us</a></li>
<li><a href="">Partner</a></li>
<li><a href="">Kontakt</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Test</a>
<ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
<li><a href="">Subkategorie 4.1</a></li>
<li><a href="">Subkategorie 4.2</a></li>
<li><a href="">Subkategorie 4.3</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">Programme</a>
<ul id="smenu5" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">
<li><a href="">Forum</a></li>
<li><a href="">Chat</a></li>
<li><a href="">Subkategorie 4.3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>[/color]
Code: h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
body {background-color:#808080;}
a{color:#000080; font-size: 15px; text-decoration: none;}
a:hover {color: #000080; font-size: 15px; text-decoration: none;}
a:link {color: #000080; font-size: 15px; text-decoration: none;}
a:active {color: #000080; font-size: 15px; text-decoration: none;}
a:visited {color: #000080; font-size: 15px; text-decoration: none;}
li.nav_element a{
color:#FFFFFF;
display: block;
margin: 5px;
padding-left: 10px;
text-decoration: none;
width: 120px;
height: 20px;
background-image:url(http://img217.imageshack.us/my.php?image=unselceteday1.png);
background-color:#4D4D4D;}
li.nav_element a:hover{
color:#FFFFFF;
display: block;
margin: 5px;
padding-left: 10px;
text-decoration: none;
width: 120px;
height: 20px;
background-image:url(http://img369.imageshack.us/my.php?image=hoverselectedil6.png);
background-color:#919191;}
* { padding: 0; margin: 0; }
#Design04 {
margin: 0 auto;
width: 922px;}
#Header_oben {
height: 70px;
width: 900px;
background: #3C3C3C;
background-image:url(http://img299.imageshack.us/img299/6438/bannerub3.png);
color: #FFFFFF;
border: 1px solid #6E6E6E;
margin: 0px 0px 0px 0px;
padding: 10px;
float: left;}
#nav_container {
width: 120px;
height: 340px;
background: #C0C0C0;
background-image:url();
color: #000000;
border: 1px solid #6E6E6E;
margin: 0px 0px 0px 0px;
padding: 10px;
float: left;}
#content {
height: 340px;
width: 556px;
background: #F2F2F2;
background-image:url();
color: #000000;
border: 1px solid #6E6E6E;
margin: 0px 0px 0px 0px;
padding: 10px;
display: inline;
float: left;
overflow:auto;}
#sidebar_container {
height: 340px;
width: 180px;
background: #C0C0C0;
background-image:url();
color: #000000;
border: 1px solid #6E6E6E;
margin: 0px 0px 0px 0px;
padding: 10px;
float: right;
overflow:auto;}
#Feld_unten {
width: 900px;
background: #3C3C3C;
color: #FFFFFF;
clear: both;
border: 1px solid #6E6E6E;
margin: 0px 0px 10px 0px;
padding: 10px;}
#counter{display: none;}