Hallo, ich habe ein problem, dass sich einfach nciht lösen will, ich habe mit das openbook zu javascript (erstmal bis Images also kapitel9) durchgelesen und wollte ein hover Menü wie hier:JavaScript - Galileo Computing - OpenBook beschrieben erstellen, mein problem: auf bjc-buchen.co.de könnt ihr sehen wie ich diese weißen käßten angeordnet habe, nun sollen diese durch unsichtbare 1x1 pixelgroße ersetzt werden und es soll eben wenn man über verein oder mannschaften geht eine Liste davon erstellen, mein problem ist, dass wenn ich z.B. die linke spalöte auf 1x1 pixel setze, um zu "simulieren" wie es aussehen sollte, verschiebt sich das ganze, wenn ich es anpasse, verschiebt es sich erneut wenn ich die linke spalte auf 1x1 pixel setze, könnt ihr mir helfen?
HTML:
CSS:
MfG Dennis
HTML:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>BJC-Buchen</title>
<link rel="stylesheet" type="Text/css" href="style.css">
<META NAME="Title" CONTENT="BJC-Buchen">
<META NAME="Author" CONTENT="Dennis Krause">
<META NAME="Publisher" CONTENT="Dennis Krause">
<META NAME="Copyright" CONTENT="Dennis Krause 2011">
<META NAME="Keywords" CONTENT="BJC-Buchen, Tischtennis, Buchen, Sport in Buchen, Tischtennis in Buchen, 74722, Buchen(Odenwald), Spaß">
<META NAME="Description" CONTENT="Wir sind ein Tischtennis Verein in Buchen(Odenwald)">
<META NAME="Abstract" CONTENT="Wir sind ein Tischtennis Verein in Buchen(Odenwald)">
<META NAME="page-topic" CONTENT="Sport">
<META NAME="page-topic" CONTENT="HTML-Formular">
<META NAME="audience" CONTENT=" Alle ">
<META NAME="Language" CONTENT="Deutsch">
</head>
<body>
<ul id="list-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Suche</a></li>
<li id="Impressum"><a href="#">Impressum</a></li>
</ul>
<img src="top.png" id="top" alt="title-top"><br>
<img src="left.png" id="left" alt="title-left"><img src="main.gif" id="main" alt="schrift"><img src="right.png" id="right" alt="title-right">
<img src="bottom.png" id="bottom" alt="title-bottom">
<ul class="main"">
<li id="eins"><a href="#">Verein</a></li>
<img class="secnav3" src="1_1.png" alt="Untermenü" name="1_1!">
<li id="zwei"><a href="#">Mannschaften</a></li>
<img class="secnav" src="1_2.png" alt="Untermenü" name="1_2">
<img class="secnav2" src="2_1.png" alt="Untermenü" name="2_1">
<li id="drei"><a href="#">Galerie</a></li>
<img class="secnav" src="1_3.png" alt="Untermenü" name="1_3">
<img class="secnav2" src="2_2.png" alt="Untermenü" name="2_2">
<li id="vier"><a href="#">Archiv</a></li>
<img class="secnav" src="1_4.png" alt="Untermenü" name="1_4">
<img class="secnav2" src="2_3.png" alt="Untermenü" name="2_3">
<li id="fuenf"><a href="#">Links</a></li>
<img class="secnav4" src="2_4.png" alt="Untermenü" name="2_4">
</ul>
</body>
</html>CSS:
Code:
body {
background-color: #76EE00;
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}
/*----------------------------------------------------------------*/
img#bottom {
width: 1281px;
height: 45px;
}
img#top {
clear: left;
width: 1281px;
height: 45px;
}
img#main {
height: 50px;
width: 376px;
}
img#right {
height: 50px;
width: 893px;
}
img#left {
height: 50px;
width: 12px;
}
/*----------------------------------------------------------------*/
ul#list-nav {
list-style:none;
padding-left: 0px;
margin: 0px;
width:450px;
}
ul#list-nav li {
display:inline
}
ul#list-nav li a {
text-decoration:none;
width:100px;
background:#76EE00;
color:black;
float:left;
text-align:center;
border-left:1px solid #000000;
}
ul#list-nav li#Impressum a {
border-right: 1px solid black;
}
ul#list-nav li a:hover {
background:#C0FF3E;
}
/*---------------------------------------------------------------*/
.main {
width: 325px;
height: 24px;
list-style: none;
margin: 0px;
padding-left: 10px;
padding-top: 30px;
height: 90px;
float:left;
}
.main li {
background-image: url(Button.png);
background-repeat: no-repeat;
height: 24px;
width: 175px;
padding-top: 4px;
text-align: center;
}
.main li#eins {
float: left;
}
.main li#zwei {
float: left;
}
.main li#drei {
float: left;
}
.main li#vier {
float: left;
}
.main li#fuenf {
float:left;
}
.main li a {
display:block;
text-decoration: none;
height: 24px;
width: 175px;
color: white;
text-align: center;
}
.main li:hover {
background-image: url(Button-h.png);
}
/*----------------------------------------------------------*/
.secnav {
margin: 0px;
width: 70px;
height: 24px;
float:left;
}
.secnav2 {
margin: 0px;
padding-bottom:4px;
width: 70px;
height: 24px;
clear: left;
}
.secnav3 {
height:24px;
width: 70px;
margin: 0px;
padding-right: 15px;
clear: left;
padding-bottom:4px;
}
.secnav4 {
height:24px;
width: 70px;
margin: 0px;
padding-left: 70px;
clear: left;
}MfG Dennis
