nicht angemeldet
Dropdown-menü verändert unkontrolliert die Headerhöhe
Matthias ApselHallo,
ich bin absoluter Neuling auf dem Gebiet CSS, würde aber gern diese Technik für den Einsatz
auf meiner Startseite nutzen. Das Dropdown menue habe ich auch soweit hinbekommen, dass
es in jedem Browser funktioniert, aber nun komme ich einfach nicht weiter.
Seit 2 Tagen versuche ich das Menue in den Header meiner Seite einzubauen und dabei zeigen sich 2 Probleme:
1. Sobald ich den Code einsetze, wird mein Header, der 70px sein soll, auf die doppelte Höhe verändert.
2. Solange ich das Menue als separaten Code teste funktioniert es einwandfrei, sobald ich es in den Header eingebaut habe,
geht plötzlich nichts mehr.
Ich poste hier jetzt mal den Quelltext, in der Hoffnung, dass mir jemand weiterhelfen kann.
Ein Bild lade ich ebenfalls hoch, damit man eine Vorstellung von dem hat, was mir da als Startseite vorschwebt.
Hier das Menü
[code lang=css][/code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html;
charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Meine Homepage</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#menu {
width: 120px;
padding: 0 20px;
background: #FFFFFF;
font-family: Arial;
font-size: 0.9em;
line-height: 1.5;
float: left;
}
#menu ul {
float: left;
width: 140px;
list-style-type: none;
}
#menu h3 {
font-size: 0.8em;
text-align: left;
color: #000;
border: 1px solid #ffffff;
background: #ffffff;
}
#menu a {
text-decoration: underline;
display: block;
border: 1px solid #ffffff;
text-align: left;
background: #FFFFFF;
color: #000000;
}
#menu a:hover {
color: #0033CC;
background: #FFFFFF;
}
#menu li {
position: relative;
}
#menu ul ul {
position: absolute;
z-index: 2;
display: none;
}
#menu ul li:hover ul {
display: block;
}
* html #menu ul li{
float: left;
width: 100%;
}
*+ html #menu ul li {
float: left;
width: 100%;
}
*html body {
behavior: url(csshover3-source.htc);
font-size: 100%;
}
*html #menu ul li a {
height: 1%;
}
</style>
</head>
<body>
<p> </p>
<div id="menu">
<ul>
<li>
<h4>Meine Welt:</h4>
<ul>
<li><a href="#">Seite 1</a></li>
<li><a href="#">Seite 2</a></li>
<li><a href="#">Seite 3</a></li>
<li><a href="#">Seite 4</a></li>
<li><a href="#">Seite 5</a></li>
<li><a href="#">Seite 6</a></li>
<li><a href="#">Seite 7</a></li>
<li><a href="#">Seite 8</a></li>
<li><a href="#">Seite 9</a></li>
</ul>
</li>
</ul>
</div>
<p> </p>
</body>
</html>
......und hier der Seitenentwurf
``
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Meine Homepage</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<META HTTP-EQUIV="EXPIRES" CONTENT="0">
<meta name=="keywords" CONTENT="">
<meta name="description" content="">
<meta name=="author" content="">
<meta name=="copyright" content="">
<meta name="description" content="">
<meta name="robots" content="index, follow">
<meta name="page-topic" content="">
<meta name="page-type" content="">
<meta name="language" content="de">
<meta name="distribution" content="global">
<meta name="revisit-after" content="3 days">
<style> <!-- a{text-decoration:none; color:#E0E0E0}a:hover { text-decoration:none; color:#E0E0E0; //--> </style>
</head>
<body bgcolor="#CCCCCC">
<table width="100%" height="97%" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td bgcolor=""><table width="960" bgcolor="#ffffff" height="600" border="0" align="center" cellpadding="0" cellspacing="0">
<table width="960" height="555" border="0" align="center" cellpadding="1" cellspacing="0" bgcolor="#ffffff">
<tr>
<td width="960" height="550" bgcolor="#CCCCCC"><table width="960" bgcolor="#ffffff" height="553" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="53" ><div align="center"></div>
<table width="960" height="50" border="0" align="center" cellpadding="0" cellspacing="0">
<tr bgcolor="#FF9900">
<td width="86" height="70" valign="BOTTOM"><div align="right"></div>
</td>
<td width="89" height="70" valign="BOTTOM"><table width="75" height="50" border="0">
<tr> </tr>
</table></td>
<td width="10" height="70" valign="BOTTOM"> </td>
<td width="9" height="70" valign="BOTTOM"> </td>
<td width="40" height="70" valign="BOTTOM">Bild</td>
<td width="8" height="70" valign="BOTTOM"> </td>
<td width="44" height="70" valign="BOTTOM">Bild</td>
<td width="7" height="70" valign="BOTTOM"> </td>
<td width="48" height="70" valign="BOTTOM">Bild</td>
<td width="7" height="70" valign="BOTTOM"> </td>
<td width="53" height="70" valign="BOTTOM">Bild</td>
<td width="6" height="70" valign="BOTTOM"> </td>
<td width="66" height="70" valign="BOTTOM">Bild</td>
<td width="84" height="70" valign="BOTTOM"> </td>
<td width="92" height="70" valign="BOTTOM"><table width="92" height="50" border="0">
<tr>
<td width="86" height="70">Bild</td>
</tr>
</table></td>
<td width="92" valign="BOTTOM"><table width="92" height="50" border="0">
<tr>
<td width="86" height="70">Bild</td>
</tr>
</table>
</td>
<td width="224" height="70" valign="BOTTOM"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="414" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0"></td>
</tr>
<tr>
<td height="1" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0"></td>
</tr>
<tr bgcolor="#000066">
<td height="73" valign="top"><table width="682" height="60" border="0" align="right" cellpadding="0" cellspacing="0" bgcolor="#000066">
<tr>
<td width="13" height="60" valign="BOTTOM"><div align="right"> </div>
</td>
<td width="546" valign="BOTTOM"><font color="#FFFFFF" size="2" face="Arial, Helvetica, sans-serif">TEXTFELD
TEXTFELD TEXTFELD TEXTFELD TEXTFELD TEXTFELD</font></td>
</tr>
</table>
</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
Bin dankbar für jeden hinweis, der mich dem dem Ziel näher bringt.
-
Om nah hoo pez nyeetz, jerrico!
Bin dankbar für jeden hinweis, der mich dem dem Ziel näher bringt.
Bitte hab Verständnis, dass ich mir deinen Code nicht näher anschaue.
* Bedeutet "zusammenfügen", dass du zwei komplette HTML-Dokumente in eins setzt? Das kann nicht funktionieren.
* Du möchtest kein Tabellenlayout verwenden. Vielleicht ist ja deine Liste höher als die entsprechende Tabellenzeile?
* liefere ein Online-Beispiel. Es gibt Anbieter für kostenlosen Webspace, lima-city (noch oder wieder?) bplaced.net
* Prüfe, ob der Code fehlerfrei ist.Matthias
--
1/z ist kein Blatt Papier.
