PopUp Menu /need Help

Status
Nicht offen für weitere Antworten.
Flame

Flame

Erfahrenes Mitglied
Hallo @ll

Ich werde bald dumm. Haare hab ich auch schon fast keine mehr.
Und zwar fang ich mal von vorn an.

Ich habe ein Layout erstellt, welches so aussieht:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>$title</title>
<link rel="stylesheet" href="tpl/style.css" type="text/css" />
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function MenueAuf(Men)
{
  if(document.getElementById)
  {
    document.getElementById(Men).style.visibility="visible";
  }

  else if(document.all && !document.getElementById)
  {
    document.all[Men].style.visibility="visible";
  }
}

function MenueZu(Men)
{
  if(document.getElementById)
  {
    document.getElementById(Men).style.visibility="hidden";
  }

  else if(document.all && !document.getElementById)
  {
    document.all[Men].style.visibility="hidden";
  }
}

//-->
</SCRIPT>
</head>
<body>
<div class="maindiv">
	<p class="logo">$logo</p>
	<p class="navigation">
        <DIV CLASS="block">
        <DIV CLASS="haupt" OnMouseOver="MenueAuf('Menue1')" OnMouseOut="MenueZu('Menue1')">Hauptmenue 1</DIV>
        <DIV CLASS="unter" ID="Menue1" OnMouseOver="MenueAuf('Menue1')" OnMouseOut="MenueZu('Menue1')">
        	<A HREF="http://www.styleassistant.de/tips/1.htm">Untermenue 1</A><BR>
		<A HREF="http://www.styleassistant.de/tips/2.htm">Untermenue 2</A><BR>
		<A HREF="http://www.styleassistant.de/tips/3.htm">Untermenue 3</A><BR>
	    	<A HREF="http://www.styleassistant.de/tips/4.htm">Untermenue 4</A><BR>
	    	<A HREF="http://www.styleassistant.de/tips/5.htm">Untermenue 5</A><BR>
	</DIV>
      	</DIV>
	<DIV CLASS="block">
        <DIV CLASS="haupt" OnMouseOver="MenueAuf('Menue2')" OnMouseOut="MenueZu('Menue2')">Hauptmenue 2</DIV>
        <DIV CLASS="unter" ID="Menue2" OnMouseOver="MenueAuf('Menue2')" OnMouseOut="MenueZu('Menue2')">
        	<A HREF="http://www.styleassistant.de/tips/1.htm">Untermenue 1</A><BR>
		<A HREF="http://www.styleassistant.de/tips/2.htm">Untermenue 2</A><BR>
		<A HREF="http://www.styleassistant.de/tips/3.htm">Untermenue 3</A><BR>
	</DIV>
      	</DIV>
	</p>
	<p class="headerpic">$headerpic</p>
	<p class="subnav">Navigationshilfe &gt; Produkte &gt; &Uuml;bersicht</p>
	<p class="content">$content</p>
	<p class="subcontent">$footermenutext1 $footermenutext2 $footermenutext3</p>
	<br />$footertext
</div>
</body>
</html>

Das sieht ja ohne das Popup Menü wunderbar aus.
Nur das Popup Menü macht mich weich.
Das zerrammelt das ganze Layout. Ich hab schon x tausend Scripte versucht.
Nix. Es geht einfach nicht in den "p" Tag Navigation, sondern setzt sich immer fein drunter und verschiebt somit mein Headerpic.

Ich bin bald soweit, das mich die div Container am Ars** lecken können und ich wieder zu herkömmlichen Tabellen zurückgreife.

Was kann ich da nu noch tun?
Das css File:
Code: 
body{
	background-color: #E5E5E5;
	border: none;
	color: #000000;
	font: x-small "MS Sans Serif" Geneva sans-serif;
	margin: 0px; /*text-align: center;*/
}

div.maindiv{
	background-color: #D2D7DA;
	border: 1px solid #FFFFFF; /*height: 900px;*/
	color: #000000;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto; /* Fuer gute Browser */
	margin-top: 80px;
	padding: 0px;
	text-align: left; /* Text _in_ der Tabelle links ausrichten */
	width: 800px;
}

img.logo {
	border: none;
	padding-left: 20px;
	padding-top: 30px; /*
	width: 206px;
	height: 40px; */
}

p {
	margin: 0px;
	padding: 0px;
}

p.content{
	background: #FFFFFF;
	border-left: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
	color: #000000;
	height: 565px;
	margin-bottom: 0px;
	margin-left: 14px;
	margin-right: 14px;
	margin-top: 0px;
	width: 770px;
}

p.headerpic{
	border-left: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
	height: 122px;
	margin-bottom: 0px;
	margin-left: 14px;
	margin-right: 14px;
	margin-top: 0px;
	padding: 0px;
	width: 770px;
}

p.logo{
	background: #FFFFFF;
	color: #FFFFFF;
	height: 95px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
}

p.navigation{
	background: url(img/navbg.gif) #939D9E repeat-x; /* border-left: thin solid #FFF;
	border-right: thin solid #FFF;
	border-top: thin solid #FFF;
	border-bottom: thin solid #FFF;
	*/
	border: 1px solid #FFFFFF;
	height: 27px;
	margin-bottom: 0px;
	margin-left: 14px;
	margin-right: 14px;
	margin-top: 14px;
	width: 770px;
}

p.subcontent{
	background: #FFFFFF;
	border-left: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
	color: #000000;
	margin-bottom: 0px;
	margin-left: 14px;
	margin-right: 14px;
	margin-top: 0px;
	width: 770px;
}

p.subnav{
	background-color: #939D9E;
	border: 1px solid #FFFFFF;
	color: #D3DBDD;
	height: 30px; /*border-left: 1px solid #FFF;
	border-right: 1px solid #FFF; */
	margin-bottom: 0px;
	margin-left: 14px;
	margin-right: 14px;
	margin-top: 0px;
}
A
{
Color: red;
Text-Decoration: none;
}

A:HOVER
{
Color: green;
Font-Weight: bolder;
}

.block
{
Width: 90px;
Height: 27px;
float: right;
display: inline;
}

.unter
{
Font-Family: Arial, Helvetica, Sans-Serif;
Font-Size: 12px;
Position: relative;
bottom: 110px;
Color: red;
Background-Color: yellow;
Visibility: hidden;
Text-Align: center;
}

.haupt
{
Font-Family: Arial, Helvetica, Sans-Serif;
Font-Size: 12px;
Position: relative;
top: -29px;
color: white;
border: 1px solid White;
Text-Align: center;
width: 98px;
height: 27px;
vertical-align: middle;
}

Thx FLAmE
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück