mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Mi 24.04.2024 08:56 Benutzername: Passwort: Auto-Login

Thema: IE problem css image submenu vom 21.08.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> IE problem css image submenu
Seite: 1, 2  Weiter
Autor Nachricht
Ulitasch
Threadersteller

Dabei seit: 18.05.2006
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 21.08.2007 00:56
Titel

IE problem css image submenu

 Antworten mit Zitat Zum Seitenanfang
Ich habe ein image menu in css gemacht. es funktioniert prima in Firefox und Safari/Mac. aber leider geht das submenu im IE /PC nicht.. kann mir jemand helfen was ich da noch anders machen muß ??
Hier ist das Menu zu sehen (oder eben auf IE/PC ist das Submenu gar NICHT zu sehen..)
Link CSS menu

Code:
#logo {
   position: absolute;
   z-index: 300;
   top: 0px;
   width: 850px;
   height: 100px;
   left: 0px;
   background-color: #B69B68;
   background-image: url(../img/menu/logo_ovaa.jpg);
   background-repeat: no-repeat;
   padding-left: 47px;
}
#menu {
   width: 100%;
   float: left;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
float: left;
}

#menu a {
display: block;
margin: 0;
}

#menu a.home {
   background-image: url(../img/menu/home_wit.jpg);
   background-repeat: no-repeat;
   height: 51px;
   width: 89px;
}

#menu a.home:hover {
   background-image: url(../img/menu/home_zw.jpg);
   background-repeat: no-repeat;
   height: 51px;
   width: 89px;
}

#menu a.bureau {
   background-image: url(../img/menu/bureau_wit.jpg);
   background-repeat: no-repeat;
   height: 51px;
   width: 102px;
}

#menu a.bureau:hover {
   background-image: url(../img/menu/bureau_zw.jpg);
   background-repeat: no-repeat;
   height: 51px;
   width: 102px;
}


#menu a.projecten {
   background-image: url(../img/menu/projecten_wit.jpg);
   background-repeat: no-repeat;
   height: 51px;
   width: 118px;
}

#menu a.projecten:hover {
   background-image: url(../img/menu/projecten_zw.jpg);
   background-repeat: no-repeat;
   height: 51px;
   width: 118px;
}

#menu a.publicaties {
   background-image: url(../img/menu/publicaties_wit.jpg);
   background-repeat: no-repeat;
   height: 51px;
   width: 130px;
}

#menu a.publicaties:hover {
   background-image: url(../img/menu/publicaties_zw.jpg);
   background-repeat: no-repeat;
   height: 51px;
   width: 130px;
}

#menu a.prikbord {
   background-image: url(../img/menu/prikbord_wit.jpg);
   background-repeat: no-repeat;
   height: 51px;
   width: 103px;
}

#menu a.prikbord:hover {
   background-image: url(../img/menu/prikbord_zw.jpg);
   background-repeat: no-repeat;
   height: 51px;
   width: 103px;
}

#menu a.driedimensionaal {
   background-image: url(../img/menu/driedimensionaal_wit.jpg);
   background-repeat: no-repeat;
   height: 51px;
   width: 77px;
}

#menu a.driedimensionaal:hover {
   background-image: url(../img/menu/driedimensionaal_zw.jpg);
   background-repeat: no-repeat;
   height: 51px;
   width: 77px;
}

#menu a.email {
   background-image: url(../img/menu/email_wit.jpg);
   background-repeat: no-repeat;
   height: 51px;
   width: 47px;
}

#menu a.email:hover {
   background-image: url(../img/menu/email_zw.jpg);
   background-repeat: no-repeat;
   height: 51px;
   width: 47px;
}

#menu a.uprojecten {
   background-image: url(../img/menu/utiliteitsprojecten_wit.jpg);
   background-repeat: no-repeat;
   height: 30px;
   width: 130px;
   border: thin solid #FFFFFF;
}

#menu a.uprojecten:hover {
   background-image: url(../img/menu/utiliteitsprojecten_zw.jpg);
   background-repeat: no-repeat;
   height: 30px;
   width: 130px;
   border: thin solid #000;
}

#menu a.wprojecten {
   background-image: url(../img/menu/woonprojecten_wit.jpg);
   background-repeat: no-repeat;
   height: 30px;
   width: 130px;
   border: thin solid #FFFFFF;
}

#menu a.wprojecten:hover {
   background-image: url(../img/menu/woonprojecten_zw.jpg);
   background-repeat: no-repeat;
   height: 30px;
   width: 130px;
   border: thin solid #000;
}

#menu li {
   position: relative;
   text-indent: -9999px;
}

#menu ul ul {
   position: absolute;
   z-index: 500;
   left: -3px;
   top: 0px;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}


und im body:

Code:
    <div id="logo">
      <div id="menu">
        <ul>
          <li> <a href="index.php" class="home" onfocus="if(this.blur)this.blur()">home</a> </li>
        </ul>
        <ul>
          <li> <a href="bureau.php" class="bureau" onfocus="if(this.blur)this.blur()">bureau</a> </li>
        </ul>
        <ul>
          <li> <a href="projecten.php" class="projecten" onfocus="if(this.blur)this.blur()">projecten</a>
              <ul>
                <li><a href="woonprojecten.php" class="wprojecten" onfocus="if(this.blur)this.blur()">woonprojecten</a></li>
                <li><a href="utiliteitsprojecten.php" class="uprojecten" onfocus="if(this.blur)this.blur()">utiliteitsprojecten</a></li>
              </ul>
          </li>
        </ul>
        <ul>
          <li> <a href="publicaties.php" class="publicaties" onfocus="if(this.blur)this.blur()">publicaties</a> </li>
        </ul>
        <ul>
          <li> <a href="prikbord.php" class="prikbord" onfocus="if(this.blur)this.blur()">prikbord</a> </li>
        </ul>
        <ul>
          <li> <a href="driedimensionaal.php" class="driedimensionaal" onfocus="if(this.blur)this.blur()">driedimensionaal</a> </li>
        </ul>
        <ul>
          <li> <a href="contact.php" class="email" onfocus="if(this.blur)this.blur()">email</a> </li>
        </ul>
      </div>
    </div>
  View user's profile Private Nachricht senden
Mark-Korb

Dabei seit: 11.04.2007
Ort: -
Alter: 38
Geschlecht: Männlich
Verfasst Di 21.08.2007 09:06
Titel

Antworten mit Zitat Zum Seitenanfang
Ich denk mal das liegt daran das der alte IE keine hover in der Form kann. Da must du ein kleines js schnipsel benutzen um den das bei zu bringen.

kuckst du hier:
http://www.alistapart.com/articles/dropdowns/

oder auch hier:
http://www.htmldog.com/articles/suckerfish/dropdowns/

Zuletzt bearbeitet von Mark-Korb am Di 21.08.2007 09:22, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Ulitasch
Threadersteller

Dabei seit: 18.05.2006
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 21.08.2007 17:08
Titel

Antworten mit Zitat Zum Seitenanfang
Vielen Dank für die Links. Ich hab jetzt mit dem Javascript für IE/PC probiert das Problem zu lösen, aber irgendwas stimmt einfach nicht und ich seh nicht was...?
Suckerfish-Dropdown Versuch

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>

<head>
<title>Suckerfish Dropdowns - One Level Bones</title><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><style type="text/css">
<!--
#logo {
   position: absolute;
   z-index: 800;
   top: 0px;
   width: 850px;
   height: 100px;
   left: 0px;
   background-color: #B69B68;
   background-image: url(img/menu/logo_ovaa.jpg);
   background-repeat: no-repeat;
   padding-left: 47px;
}

#nav, #nav ul { /* all lists */
   padding: 0;
   margin: 0;
   list-style: none;
   line-height: 1;
}

#nav a {
   display: block;
   width: 10em;
   height: 51px;
}

#nav li { /* all list items */
   float: left;
   width: 10em; /* width needed or else Opera goes nuts */
   text-indent: -9999px;
}

#nav li ul { /* second-level lists */
   position: absolute;
   height: 30px;
   width: 130px;
   left: -999em; /* using left instead of display to hide navs because display: none isn't read by screen readers */
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
   left: auto;
}

#nav li.home {
   background-image: url(img/menu/home_wit.jpg);
   background-repeat: no-repeat;
   width: 89px;
}

#nav li.home:hover {
   background-image: url(img/menu/home_zw.jpg);
   background-repeat: no-repeat;
   width: 89px;
   left: auto;
}

#nav li.bureau {
   background-image: url(img/menu/bureau_wit.jpg);
   background-repeat: no-repeat;
   width: 102px;
}

#nav li.bureau:hover {
   background-image: url(img/menu/bureau_zw.jpg);
   background-repeat: no-repeat;
   width: 102px;
}


#nav li.projecten {
   background-image: url(img/menu/projecten_wit.jpg);
   background-repeat: no-repeat;
   height: 51px;
   width: 118px;
}

#nav li.projecten:hover {
   background-image: url(img/menu/projecten_zw.jpg);
   background-repeat: no-repeat;
   width: 118px;
}

#nav li.publicaties {
   background-image: url(img/menu/publicaties_wit.jpg);
   background-repeat: no-repeat;
   width: 130px;
}

#nav li.publicaties:hover {
   background-image: url(img/menu/publicaties_zw.jpg);
   background-repeat: no-repeat;
   width: 130px;
}

#nav li.prikbord {
   background-image: url(img/menu/prikbord_wit.jpg);
   background-repeat: no-repeat;
   width: 103px;
}

#nav li.prikbord:hover {
   background-image: url(img/menu/prikbord_zw.jpg);
   background-repeat: no-repeat;
   width: 103px;
}

#nav li.driedimensionaal {
   background-image: url(img/menu/driedimensionaal_wit.jpg);
   background-repeat: no-repeat;
   width: 77px;
}

#nav li.driedimensionaal:hover {
   background-image: url(img/menu/driedimensionaal_zw.jpg);
   background-repeat: no-repeat;
   width: 77px;
}

#nav li.email {
   background-image: url(img/menu/email_wit.jpg);
   background-repeat: no-repeat;
   width: 47px;
}

#nav li.email:hover {
   background-image: url(img/menu/email_zw.jpg);
   background-repeat: no-repeat;
   width: 47px;
}

#nav li.uprojecten {
   background-image: url(img/menu/utiliteitsprojecten_wit.jpg);
   background-repeat: no-repeat;
   height: 30px;
   width: 130px;
   border: thin solid #FFFFFF;
}

#nav li.uprojecten:hover {
   background-image: url(img/menu/utiliteitsprojecten_zw.jpg);
   background-repeat: no-repeat;
   height: 30px;
   width: 130px;
   border: thin solid #000;
}

#nav a.uprojecten {
   height: 30px;
}

#nav li.wprojecten {
   background-image: url(img/menu/woonprojecten_wit.jpg);
   background-repeat: no-repeat;
   height: 30px;
   width: 130px;
   border: thin solid #FFFFFF;
}

#nav li.wprojecten:hover {
   background-image: url(img/menu/woonprojecten_zw.jpg);
   background-repeat: no-repeat;
   height: 30px;
   width: 130px;
   border: thin solid #000;
}

#nav a.wprojecten {
   height: 30px;
}
</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
   var sfEls = document.getElementById("nav").getElementsByTagName("LI");
   for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
         this.className+=" sfhover";
      }
      sfEls[i].onmouseout=function() {
         this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
      }
   }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>

</head>

<body>

<div id="logo">
  <ul id="nav">
   
    <li class="home"><a href="home.php">home</a></li>
    <li class="bureau"><a href="bureau.php">bureau</a></li>
   <li class="projecten"><a href="#woonprojecten.php">projecten</a>
       <ul>
         <li class="wprojecten"><a href="woonprojecten.php">woonprojecten</a></li>
        <li class="uprojecten"><a href="utiliteitsprojecten.php">utiliteitsprojecten</a></li>
      </ul>
    </li>
    <li class="prikbord"><a href="prikbord.php">prikbord</a></li>
    <li class="publicaties"><a href="publicaties.php">publicaties</a></li>
    <li class="driedimensionaal"><a href="driedimensionaal.php">driedimensionaal</a></li>
    <li class="email"><a href="contact.php">contact</a></li>
 
</ul>
</div>
</body>

</html>
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 21.08.2007 17:55
Titel

Antworten mit Zitat Zum Seitenanfang
Korrigier den Script Teil mal so:

Code:
<script type="text/javascript">
/* <![CDATA[ */
sfHover = function() {
   var sfEls = document.getElementById("nav").getElementsByTagName("LI");
   for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
         this.className+=" sfhover";
      }
      sfEls[i].onmouseout=function() {
         this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
      }
   }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
/* ]]> */
</script>


Oder aber lagere es direkt aus.

Zuletzt bearbeitet von m am Di 21.08.2007 17:58, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Ulitasch
Threadersteller

Dabei seit: 18.05.2006
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 21.08.2007 18:32
Titel

Antworten mit Zitat Zum Seitenanfang
Vielen Dank, aber es funktioniert auch nicht Menno!
  View user's profile Private Nachricht senden
Ulitasch
Threadersteller

Dabei seit: 18.05.2006
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 21.08.2007 18:33
Titel

Antworten mit Zitat Zum Seitenanfang
ich weiß nicht was das heißt : lagere es direkt aus..?
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 21.08.2007 18:57
Titel

Antworten mit Zitat Zum Seitenanfang
Speicher dir das hier

Code:
sfHover = function() {
   var sfEls = document.getElementById("nav").getElementsByTagName("LI");
   for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
         this.className+=" sfhover";
      }
      sfEls[i].onmouseout=function() {
         this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
      }
   }
}


als menu.js ab und füge das hier

Code:
<script type="text/javascript" src="menu.js"></script>


in den head deiner HTML Datei ein.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Mark-Korb

Dabei seit: 11.04.2007
Ort: -
Alter: 38
Geschlecht: Männlich
Verfasst Mi 22.08.2007 09:48
Titel

Antworten mit Zitat Zum Seitenanfang
/// edit
War in gedanken beim Falschen drop Down script

sry

Zuletzt bearbeitet von Mark-Korb am Mi 22.08.2007 09:50, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
 
Ähnliche Themen submenu drop down bei mouseover geht begrenzt
active submenu wird nicht richtig angezeigt
Image Magick Problem
ie 6 background image problem
image ready problem
problem mit background image und ul/li
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB