LinkBack URL
About LinkBacks
ZitierenDas hilft Dir jetzt wahrscheinlich wenig weiter, aber bei mir im FF 3.5.3 kann man über die Untermenüs gehen ohne dass sie verschwinden.
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: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>
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
Das hilft Dir jetzt wahrscheinlich wenig weiter, aber bei mir im FF 3.5.3 kann man über die Untermenüs gehen ohne dass sie verschwinden.
Grüße vom Griechen,
Cybergreek!
everygain Translator - eine Firefox-Erweiterung, damit der Grieche Euch besser versteht
Ja ich weiß, dass es im FF geht.
Aber es muss halt auch im IE funzen.
Das kannst Du ja dann beim nächsten Mal direkt dazu sagen.Zitat von akdesign
Grüße vom Griechen,
Cybergreek!
everygain Translator - eine Firefox-Erweiterung, damit der Grieche Euch besser versteht
Ich würde mal im Sinne des Zusammenhalts der Zeilen es mit Absicht machen, dass "die Zeilen aneinanderkleben". Es bringt in der Tat in manchen Browsern Ärger, wenn zwischen den Zeilen Abstände sind.
Um zu erreichen, dass die Menüpunkte trotzdem einen optischen Abstand haben, solltest Du mit padding auffüllen.
Thomas
Hallo akdesign,
es könnte sich um den "Whitespace-Bug" des IE handeln,
hier nachzulesen:
klick
Hi Leute,
Ich habe das gleiche Problem!
Ich habe mir mein eigenes Flyout-Menu geschrieben, das soweit auch funktioniert, allerdings funktioniert es im IE nicht mehr, sobald ich es in die Site einbaue, dabei habe ich es einfach in die Seite bzw. in den Quellcode eingefügt.
Die "reine" .htm Seite in der ich das Menü gebaut habe funktioniert tadellos im FF wie im IE!
styles.css
hier die menu.css:Code:body { background-color: #006AB3; background-image: url(../images/htg_head.png); background-repeat: repeat-x; margin: 0px; padding: 0px; } .wrapper { background-image: url(../images/09xxx.png); height: 619px; width: 852px; margin-right: auto; margin-left: auto; margin-top: 0px; background-repeat: no-repeat; padding: 0px; margin-bottom: 0px; } .links-unten { font-family: verdana; font-size: 10px; color: #62A5D3; height: 15px; margin-right: auto; margin-left: auto; text-align: center; width: 852px; margin-top: 2px; } .bilder-box { height: 415px; width: 400px; margin-top: 180px; float: left; margin-left: 20px; overflow: auto; }.georgigmbh { font-family: verdana; font-size: 10px; color: #808283; height: 125px; width: 220px; float: right; margin-top: 120px; padding: 0px; margin-right: 20px; }
und hier der html-Code:Code:.menu { float: right; margin-top: 190px; margin-right: 46px; } .menu ul{ list-style-type: none; margin: 0px; padding: 0px; } .menu ul li{ font-family: verdana; font-size: 10px; height: 25px; width: 200px; position: relative; text-align: left; text-indent: 5px; line-height: 25px; color: #FFF; } .menu ul li a,.menu ul li a:hover{ color: #FFF; text-decoration: none; } .menu ul li:hover ul{ visibility: visible; } .menu ul li ul{ visibility: hidden; top: 0px; left: -163px; position: absolute; width: 163px; text-align: left; } .menu ul li ul a { font-family: verdana; font-size: 10px; color: #4e4e4e; text-decoration: none; } .menu ul li ul a:hover { font-family: verdana; font-size: 10px; color: #FFF; text-decoration: none; } .menu ul li ul li{ font-family: verdana; font-size: 10px; height: 25px; width: 160px; background-color: #333; position: relative; text-align: right; text-indent: 5; line-height: 25px; border-left-width: thin; border-left-style: groove; }
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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Unbenanntes Dokument</title> <link href="library/styles.css" rel="stylesheet" type="text/css" /> <link href="library/menu.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="wrapper"> <div class="bilder-box"></div> <div class="menu"> <ul> <li><a href="#">< Bauschilder</a> <ul> <li><a href="#">Wohnbau |</a></li> <li><a href="#">Gewerbebau |</a></li> <li><a href="#">Seniorenwohnheime |</a></li> <li><a href="#">KIGA und Tagesstätten |</a></li> <li><a href="#">Krankenhäuser |</a></li> <li><a href="#">Erschließungen |</a></li> <li><a href="#">Sanierungen |</a></li> </ul> </li> <li><a href="#">< Architekten-/ Handwerksschilder</a> <ul> <li><a href="#">Polyschilder |</a></li> <li><a href="#">Magnetschilder |</a></li> <li><a href="#">Banner |</a></li> <li><a href="#">Siebdruckfolien |</a></li> </ul> </li> <li><a href="#">< Beschriftungen</a> <ul> <li><a href="#">Schulen |</a></li> <li><a href="#">Hinweisschilder |</a></li> <li><a href="#">Schaufenster |</a></li> <li><a href="#">Firmenschilder |</a></li> <li><a href="#">Fahrzeuge |</a></li> </ul> </li> <li><a href="#">< Vereine</a> <ul> <li><a href="#">Vereinsschilder |</a></li> <li><a href="#">Vereinsaufkleber |</a></li> <li><a href="#">Banner |</a></li> <li><a href="#">Schaukästen |</a></li> <li><a href="#">Plakate |</a></li> </ul> </li> <li><a href="#">< Städte und Gemeinden</a> <ul> <li><a href="#">Jubiläen |</a></li> <li><a href="#">Schaukästen |</a></li> </ul> </li> <li><a href="#">< INFO</a> <ul> <li><a href="#">Geschäftsbedingungen |</a></li> <li><a href="#">Dateien und Druck |</a></li> <li><a href="#">Standortvoraussetzungen |</a></li> </ul> </li> </ul> </div> <div class="georgigmbh"> <p>Diese Internet-Seiten sollen Ihnen <br /> unsere Leistungsfähigkeit zeigen und <br /> Ihnen gleichzeitig Ideen für Ihre eigene Schilder und Beschriftungen liefern.<br /> <br /> Für den schnellen Zugriff und um lange Ladezeiten zu vermeiden, <br /> wurden diese Seiten rationell angelegt.<br /> </p> </div> </div> <div class="links-unten">> impressum | kontakt | konjunkturpaket | dateien und druck | standortvoraussetzungen | geschäftsbedingungen <</div> </body> </html>
Geändert von Andrej (22.12.2009 um 17:18 Uhr)
Hi,
um welchen IE handelt es sich?
Und, btw, warum gibst Du dem Wrapper eine Klasse?
Have a nice day,
Swen...
IE7!
Stört es, wenn ich dem Wrapper 'ne Klasse gebe?
Blick da nich so ganz durch mit "id" und "class". Dass eine id nur einmal verwendet werden kann, weiß ich, aber nicht genau, was das bedeutet, daher verwende ich generell nur "klassen".
IE7, ok, der dürfte Pseudoklassen wie Hover kennen, daran liegt es also nicht.
Gewiss ist es egal, ob Du lieber Klassen vergibst, imho hätte eine ID gereicht. Ist Schulbuchmässig, ich habe ehrlich gesagt auch nie kapiert, warum man eigentlich IDs vergibt, statt nur Klassen zu vergeben? Wäre eine Frage an die alten Füchse wert. Oder locker auch einen eigenen Thread...
Warum vergibt man Ids, klappt doch auch, wenn man nur Klassen vergibt! Jedes Schulbuch rät davon ab, aber warum eigentlich?
Have a nice day,
Swen...
Ich glaub zwar nicht, dass es daran liegt, aber vermeide sowas:
Der eigenen Übersicht halber...}.georgigmbh {
font-family: verdana;
font-size: 10px;
Have a nice day,
Swen...
Also, ich habe eine Seite erstellt, in welcher ich das Menü gecoded habe, in dieser .htm Seite funktioniert das Menü auch tadellos im IE, allerdings wenn ich das Listenmenü nun in den "wrapper" meiner Site einfüge und mittels "margin" das ".menu" positioniere, blendet das Sublevel im IE sofort wieder aus, wenn ich versuche mit der Maus darüber zu fahren...
Ich verstehe das einfach nich -.-
Zumindest bei mir.
Folgendes:
Irgendwie scheint sich der IE an der "background-color" und zwar in der class .menu ul li aufzuhängen!
Ich habe der "class" nun ein Hintergrundfarbe zugewiesen und es funktioniert wieder, ich kapier das mal überhaupt nicht, vor allem: welche Logik steckt dabei dahinter?????
MS ist echt ein seltsamer Laden.
Gruß
Andrej
Dann versuch mal, einen Ankerpunkt zu setzen mit einer Klasse - das geht schon mal nicht...
IDs werden auch bei der Darstellung bevorzugt - weil sie eben "einzigartig" sind. Ich hab hier unter anderem mal diesen Link zum weiterlesen.
Mir wär es aber eigentlich auch egal, ob jemand Class oder ID verwendet - aber es spricht ja auch nichts dagegen und ich mach das schon automatisch, dass ich Formatierungen, die nur einmal auf einer Site vorkommen (z.B. Größe/Position eines DIV) mit einer ID mache. Class verwende ich dann z.B. für Textformatierungen (z.B. Farbe) und kann sie so für unterschiedliche Tags verwenden - und wenn ich dann mal keine Lust mehr auf die grüne Überschrift und grün hervorgehobene Textstellen haben sollte, dann ändere ich die Klasse ab und gut ist´s.
</andy>
Jetzt bauen wir´09 + ´10
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
