Jerrico
Threadersteller
Dabei seit: 26.11.2011
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Sa 26.11.2011 12:20
Titel Dropdown Menue verändert unkontrolliert Headerhöhe |
  |
|
Hallo,
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.
Bin dankbar für jeden hinweis, der mich dem dem Ziel näher bringt.
| Code: |
<!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>
und hier noch das Menue
|
<!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>
|
|
Willkommen auf dem Portal für Mediengestalter
