Hallo,
ich habe mir ein reines CSS-Listenmenü erstellt.
Das Problem:
sobald ich mit der Mouse auf die Untermenüs möchte, blenden sich diese direkt wieder aus.
Das kommt wohl daher, dass ich eine line-height angegeben habe. Ich brauche die aber, da die Menüpunkte ja sonst aneinander kleben.
Hat jemand eine Lösung hierfür?
Hier der Link zur Ansicht:
http://kessler-creativdesign.de/neu/broschueren.html
und Codes:
und css:
Danke euch schonmal vorab für eure Hilfe.
Andrea
ich habe mir ein reines CSS-Listenmenü erstellt.
Das Problem:
sobald ich mit der Mouse auf die Untermenüs möchte, blenden sich diese direkt wieder aus.
Das kommt wohl daher, dass ich eine line-height angegeben habe. Ich brauche die aber, da die Menüpunkte ja sonst aneinander kleben.
Hat jemand eine Lösung hierfür?
Hier der Link zur Ansicht:
http://kessler-creativdesign.de/neu/broschueren.html
und Codes:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="Andrea Keßler - freie Grafikdesignerin/Freelancer in Freiburg. Keßler.CreativDesign entwickelt und konzipiert Ihnen anspruchsvolles Design für alle klassischen Printmedien sowie für Webdesign.">
<meta name="Keywords" content="Andrea Keßler, Kessler, Kessler Design, Kessler Grafik Design, Grafik, Design, Designer, Grafikdesigner, Grafik-Design, Webdesign, Print, Layout, gestalten, Broschüren, Flyer, Poster, Verpackungen, Packaging, Verpackungsgestaltung, Werbung, Komposings, Kommunikation, Visitenkarten, Newsletter, Art Director, Freiburg, international, grenznah">
<meta name="revisit-after" content="7 days" >
<meta http-equiv="reply-to" content="a.kessler@kessler-creativdesign.de">
<meta name="author" content="Keßler.CreativDesign" >
<meta name="language" content="de">
<meta name="publisher" content="Keßler.CreativDesign">
<meta name="copyright" content="Keßler.CreativDesign">
<meta name="audience" content="Alle">
<meta name="robots" content="index,follow">
<meta http-equiv="imagetoolbar" content="false">
<meta name="author" content="Keßler.CreativDesign - Andrea Keßler">
<title>Keßler.CreativDesign – Grafik- und Webdesign</title>
<link href="broschueren.css" rel="stylesheet" type="text/css">
<link href="navi.css" rel="stylesheet" type="text/css">
<style type="text/css">
html, body {
height: 100%;
margin: 0px;
}
</style>
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
function P7_Snap() { //v2.67 by PVII
var g,x,y,ox,bx,oy,p,tx,a,b,k,d,da,e,el,tw,q0,xx,yy,w1,pa='px',args=P7_Snap.arguments;a=parseInt(a);
if(document.layers||window.opera){pa='';}for(k=0;k<(args.length);k+=4){
if((g=MM_findObj(args[k]))!=null){if((el=MM_findObj(args[k+1]))!=null){
a=parseInt(args[k+2]);b=parseInt(args[k+3]);x=0;y=0;ox=0;oy=0;p="";tx=1;
da="document.all['"+args[k]+"']";if(document.getElementById){
d="document.getElementsByName('"+args[k]+"')[0]";if(!eval(d)){
d="document.getElementById('"+args[k]+"')";if(!eval(d)){d=da;}}
}else if(document.all){d=da;}if(document.all||document.getElementById){while(tx==1){
p+=".offsetParent";if(eval(d+p)){x+=parseInt(eval(d+p+".offsetLeft"));y+=parseInt(eval(d+p+".offsetTop"));
}else{tx=0;}}ox=parseInt(g.offsetLeft);oy=parseInt(g.offsetTop);tw=x+ox+y+oy;
if(tw==0||(navigator.appVersion.indexOf("MSIE 4")>-1&&navigator.appVersion.indexOf("Mac")>-1)){
ox=0;oy=0;if(g.style.left){x=parseInt(g.style.left);y=parseInt(g.style.top);}else{
w1=parseInt(el.style.width);bx=(a<0)?-5-w1:-10;a=(Math.abs(a)<1000)?0:a;b=(Math.abs(b)<1000)?0:b;
x=document.body.scrollLeft+event.clientX+bx;y=document.body.scrollTop+event.clientY;}}
}else if(document.layers){x=g.x;y=g.y;q0=document.layers,dd="";for(var s=0;s<q0.length;s++){
dd='document.'+q0[s].name;if(eval(dd+'.document.'+args[k])){x+=eval(dd+'.left');y+=eval(dd+'.top');
break;}}}e=(document.layers)?el:el.style;xx=parseInt(x+ox+a),yy=parseInt(y+oy+b);
if(navigator.appVersion.indexOf("MSIE 5")>-1 && navigator.appVersion.indexOf("Mac")>-1){
xx+=parseInt(document.body.leftMargin);yy+=parseInt(document.body.topMargin);}
e.left=xx+pa;e.top=yy+pa;}}}
}
//-->
</script>
</head>
<body bgcolor="#596774" onLoad="MM_showHideLayers('menu','','show','profil','','show','impressum','','show','Text','','show','linie_weiss','','show','Navi','','show');
P7_Snap('menueleiste','menu',20,0);P7_Snap('menueleiste','profil',325,0);P7_Snap('menueleiste','impressum',770,0);P7_Snap('content','Text',100,60);P7_Snap('content','linie_weiss',690,50);P7_Snap('content','Navi',710,60)"
onResize="P7_Snap('menueleiste','menu',20,0);P7_Snap('menueleiste','profil',325,0);P7_Snap('menueleiste','impressum',770,0);P7_Snap('content','Text',1080,60);P7_Snap('content','linie_weiss',690,50);P7_Snap('content','Navi',710,60)">
<div id="menu">
<span class="menupunkt_aktiv">Broschüren</span>
<span class="linie">|</span>
<a href="webdesign.html" class="menupunkt">Webdesign</a>
<span class="linie">|</span>
<a href="packaging.html" class="menupunkt">Packaging</a>
<span class="linie">|</span>
<a href="anzeigen.html" class="menupunkt">Anzeigen</a>
<span class="linie">|</span>
<a href="profil.html" class="profil">Profil</a></div>
<div id="impressum">
<a href="mailto: a.kessler@kessler-creativdesign.de" class="menupunkt">Kontakt</a> <span class="linie">|</span> <a href="impressum.html" class="menupunkt">Impressum</a></span></div>
<div id="Text" class="text">Auch im "Online-Alltag" spielen Firmenbroschüren nach wir vor<br>eine ganz wichtige Rolle; das Gefühl von "etwas in der Hand haben" ist für viele ……….<br>Zudem lassen sich Webseiten nicht verschicken - bzw. landen ungelesen direkt im eMail-Papierkorb.<br>Sie kennen das sicherlich - oft rufen Interessenten an, die sich im Internet einen ersten Eindruck verschafft haben, und bitten Sie nun, Ihnen noch etwas zuzuschicken.<br>So dient die Webseite als Ergänzung zur Firmenbroschüre. Beides zusammen in Verbindung macht dann das optimale………aus.</div>
<div id="linie_weiss" style="width: 1px; height: 350px; background-color: #FFFFFF"></div>
<div id="Navi" class="navi">
<ol>
<li><span>Food</span>
<ol>
<li><a href="frischemarkt_baur.html">· Frischemärkte Baur</a></li>
<li><a href="">· EDEKA Schmidt’s Märkte</a></li>
<li><a href="">· Dieterle Restaurants</a></li>
<li> </li>
</ol>
</li>
<li><span>Technik / Handwerk</span>
<ol>
<li><a href="">· Sto Farben und Putze</a></li>
<li><a href="">· Zander Gruppe</a></li>
<li><a href="">· Maschinenbau von Briel</a></li>
<li><a href="">· Rietho Stanz- und Biegetechnik</a></li>
<li><a href="">· Énergies & Ressources</a></li>
<li><a href="">· Deprat</a></li>
</ol>
</li>
<li><span><a href="" id="link" onMouseOver="this.id='linkover'" onMouseOut="this.id='link'">Lacanche Kochstationen</a></span></li>
<li><span><a href="" id="link" onMouseOver="this.id='linkover'" onMouseOut="this.id='link'">Wurth Agrar</a></span></li>
<li><span><a href="" id="link" onMouseOver="this.id='linkover'" onMouseOut="this.id='link'">epoMed Fixierungen</a></span></li>
<li><span><a href="" id="link" onMouseOver="this.id='linkover'" onMouseOut="this.id='link'">Werkhaus Projektmanagement</a></span></li>
<li><span><a href="" id="link" onMouseOver="this.id='linkover'" onMouseOut="this.id='link'">Groupama Versicherungen</a></span></li>
</ol>
</div>
<tr>
<td align="center" valign="middle">
<tr>
<table width="900" style="position:absolute; top:0px; left:0px; width:100%; height:100%;">
<tr>
<td align="center" valign="middle"><table width="920" height="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/logo.gif" width="920" height="70" /></td>
</tr>
<tr>
<td><img src="images/leiste_oben.gif" width="920" height="27"></td>
</tr>
<tr>
<td><img src="images/content.jpg" name="content" width="920" height="448" id="content"></td>
</tr>
<tr>
<td><img src="images/menueleiste.gif" name="menueleiste" width="920" height="27" id="menueleiste" /></td>
</tr>
<tr>
<td><img src="images/unten.gif" width="920" height="28" border="0" /></td>
</tr>
</table>
</td></tr></table>
</body>
</html>und css:
Code:
/* CSS Document */
#Menu {
position:absolute;
width:120px;
height:50px;
z-index:1;
visibility: hidden;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #ffffff;
font-weight: bold;
line-height: 31pt;
}
.menu_aktiv {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #8ea8d3;
font-weight: bold;
}
#Quadrate {
position:absolute;
width:50px;
height:50px;
z-index:1;
visibility: hidden;
}
#linie_weiss {
position:absolute;
visibility: hidden;
z-index:15;
}
#linie_weiss_2 {
position:absolute;
visibility: hidden;
height:1px;
z-index:15;
}
#linie_weiss_3 {
position:absolute;
visibility: hidden;
z-index:1;
}
#linie_weiss_4 {
position:absolute;
visibility: hidden;
z-index:15;
}
#linie_weiss_5 {
position:absolute;
visibility: hidden;
z-index:15;
}
#linie_weiss_6 {
position:absolute;
visibility: hidden;
z-index:15;
}
a:visited { color:#ffffff;text-decoration:none; }
a:hover { color:#abc0db;cursor: pointer; }
a:active { color:#ffffff;text-decoration:none; }Danke euch schonmal vorab für eure Hilfe.
Andrea
