Hallöchen! Ich hab mal wieder ein bissl rumgefummelt und irgendwas hab ich wohl falsch gemacht
Wollte so ein Foldoutmenue Horizontal haben und habs mal irgendwie eingefügt... Jetzt ist aber alles etwas komisch geworden und ich weiß auch nicht, wie ich die Position des Menüs verändern kann... Würde das Menü gerne über dem Content haben, also bei -100px, glaub ich... Und mein Header ist auch irgendwie verschwunden... Vielleicht kann mal einer drüberschauen und erkennt das Problem sofort... Vielleicht hab ich auch noch ein paar andere versteckte Fehler?! Bin ja Anfänger, wills aber gern lernen und hoffe einfach auf Eure Hilfe
Text über dem Design:
Zitat:
#extraDiv1 {display: none;}
#extraDiv2 {display: none;}
#extraDiv3 {display: none;}
#extraDiv4 {display: none;}
#extraDiv5 {display: none;}
#extraDiv6 {display: none;}
#pre_header {display: none;}
#post_header {display: none;}
#pre_content {display: none;}
#nav_heading{display: none;}
div.header{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
body
{
background-color: #bbdddd;
font-family: Verdana, Arial, sans-serif;
font-size: 100.01%;
width: 100%;
height: 100%;
margin: 0;
padding: 0
}
*
{
padding: 0; margin: 0;
}
#Mein_Bild
{
position: absolute;
left: 50%;
top: 181px;
margin-left: -489px;
width: 980px;
height: 500px;
background-image: url(http://img.webme.com/pic/d/dog-in-black/hintergrundbild.jpg);
}
#content
{
position: absolute;
left: 50%;
top: 200px;
margin-left:-100px;
width: 550px;
height: 450px;
padding:10px;
color: #F2F2F2;
font-size:13px;
background-color:transparent;
background-image:url();
border: 1px solid #FFFFFF;
overflow:auto;
}
#sidebar_container
{
position: absolute;
left: 50%;
top:200px;
margin-left: -470px;
width: 350px;
height: 440px;
background-color:transparent;
background-image:url(http://img.webme.com/pic/d/dog-in-black/sidebox.jpg);
border:1px solid #FFFFFF;
color:#000000;
overflow:auto;
}
<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: -100px 2px;
display: block;
height: 20px;
color: #000;
}
.menu a:hover
{
background-color: #ccc;
}
#smenu1, #smenu2, #smenu3, #smenu4
{
font-size: 12px;
display: none;
width: 140px;
float: left;
}
#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 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');">Menu 1</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href="">Subkategorie 1.1</a></li>
<li><a href="">Subkategorie 1.2</a></li>
<li><a href="">Subkategorie 1.3</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Menu 2</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="">Subkategorie 2.1</a></li>
<li><a href="">Subkategorie 2.2</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Menu 3</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href="">Subkategorie 3.1</a></li>
<li><a href="">Subkategorie 3.2</a></li>
<li><a href="">Subkategorie 3.3</a></li>
<li><a href="">Subkategorie 3.4</a></li>
<li><a href="">Subkategorie 3.5</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Menu 4</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>
</ul>
</div>
</body>
</html>
h1
{
color: #000080;
text-align: center;
}
#header_container
{
position: absolute;
left: 50%;
margin-left:-490px;
width: 980px;
height: 150px;
background-color:#343434;
background-image:url(http://img.webme.com/pic/d/dog-in-black/header-test2.jpg);
color:#FFFFFF;
font-size:13px;
border: 1px solid #FFFFFF;
}
#navi
{
width: 180px;
border: 1px solid #000080;
margin-top: 177px;
margin-left: 15px;
font-size: 0.9em;
height: 400px;
float:left;
}
a
{
color:#4A9AF6;
text-decoration: none;
font-size:13px;
}
a:hover
{
color: #4A9AF6;
font-size: 13px;
text-decoration: none;
}
a:link
{
color: #4A9AF6;
font-size: 13px;
text-decoration: none;
}
a:active
{
color: #4A9AF6;
font-size: 13px;
text-decoration: none;
}
a:visited
{
color: #4A9AF6;
font-size: 13px;
text-decoration: none;
}
#counter
{
position: absolute;
left: 50%;
top:650px;
margin-left: -470px;
width: 350px;
height:20px;
text-align: center;
color:#F2F2F2;
font-size:13px;
border: 1px solid #FFFFFF;
}
#header_container
{
position: absolute;
left: 50%;
margin-left:-490px;
width: 980px;
height: 150px;
background-color:#343434;
background-image:url(http://img.webme.com/pic/d/dog-in-black/header-test2.jpg);
color:#FFFFFF;
font-size:13px;
border: 1px solid #FFFFFF;
}
Vielen Dank schon einmal an alle fleißigen Helfer
LG Alice