mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: So 26.05.2024 16:29 Benutzername: Passwort: Auto-Login

Thema: [solved]CSS Ausklapp-Menü. Oberer Menüpunkt aktiv vom 21.03.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [solved]CSS Ausklapp-Menü. Oberer Menüpunkt aktiv
Seite: 1, 2  Weiter
Autor Nachricht
deeesi
Threadersteller

Dabei seit: 01.09.2004
Ort: Leverkusen
Alter: 42
Geschlecht: Weiblich
Verfasst Mi 21.03.2007 10:06
Titel

[solved]CSS Ausklapp-Menü. Oberer Menüpunkt aktiv

Antworten mit Zitat Zum Seitenanfang

Hallo zusammen!

Ich hab mal wieder ein Problemchen.
Ich habe folgendes Menü (Ausschnitt aus der Seite)
http://www.desi-gn.de/forum/testmenue/test.html

HTML:
Code:
<div id="mainnavi">
  <ul id="vertnav" onmouseover="toggleMenu(1);" onmouseout="toggleMenu(0);">
   <li id="sprache" class="nav"><a href="#"><img src="images/sprachicon.gif" id="sprachicon">Deutsch    (&auml;ndern)</a>

      <ul>
         <li><a href="#">English</a></li>
         <li><a href="#">Espa&ntilde;ol</a></li>
         <li><a href="#">Fran&ccedil;aise</a></li>
      </ul>
   </li>
   <li><img src="images/trenner_grau.gif"></li>
        <li class="nav"><a href="#">Sitemap</a></li> 
   <li><img src="images/trenner_grau.gif"></li>
    <li class="nav"><a href="#">Impressum</a></li>
  </ul>
</div>


CSS:
Code:
#sprachicon{
   border: 0;
   float:left;
   margin-right: 10px;
}

#mainnavi {
   height: 25px;
   width: 800px;
   color: #999999;
   float: right;
   font-size: 80%;
   padding: 10px 10px 0 0;
}

#mainnavi ul {
   margin: 0;
   border: 0;
   padding:0;
   float: right;
   list-style-type: none;
   height:25px;
}

/* Listenelemente */
#vertnav li {
   float: left;
   position:relative;
   margin: 0;
   z-index: 10;
   color: #ffffff;   
   text-indent:0px;
}

#vertnav li.nav {
    height: 25px;
}

#vertnav a {
   display: block; /* lässt die Untermenüs in der gleichen Breite erscheinen */
   text-decoration: none;
   padding-left: 8px;
   padding-right: 8px;
   color: #999999;
}

#vertnav li.nav a:hover {
   color: #000;
   }

/* 2. Ebene */
#menu ul li ul {
    padding:0;
}

#vertnav li.nav:hover>ul {
   display: inline;
   margin: 0 auto;
   
}
#vertnav li.nav ul {
   position: absolute;
   visibility: hidden;
   z-index: 9999;
   top:25px;
   left: 0;
   padding:0;
}

#vertnav li.nav>ul {
   visibility: visible;
   display: none;
   padding:0;
}
#vertnav li.nav ul li a, #vertnav li.nav ul li a:visited {
   color: #000;
   font-weight:100;
   z-index: 9999;
   text-align:left;
   height: 15px;
}
#vertnav li.nav li a {
   border-bottom: 1px solid #CCC;
   border-left: 1px solid #CCC;
   border-right: 1px solid #CCC;
   padding: 7px 9px 7px 15px;
   width:140px;
   background:url(../images/pfeil_sprachmenue.gif) no-repeat #E9ECF2;
}
html>/**/body #vertnav li.nav li a { /*für FF, nicht für IE7*/
   background-color: #E9ECF2;
   border-bottom: 1px solid #CCC;
   border-left: 1px solid #CCC;
   border-right: 1px solid #CCC;
   padding: 7px 9px 7px 15px;
   width:140px;
}
#vertnav li.nav ul li a:hover {
   text-decoration: none;
   color: #000;
   background-color: #ffffff;
   width:140px;
}
html>/**/body #vertnav li.nav ul li a:hover {
   text-decoration: none;
   color: #000;
   background-color: #ffffff;
   width:140px;
}

#vertnav li.nav li.noLink {
   text-align: left;
   background-color: #CC6633;
   border-top: 1px solid #ffffff;
   font-weight: 100;
   color: #000;
}
#vertnav LI.nav LI.hi {
   color: #ffffff;
}
#navMenu LI I {
   display: none;
}

#mainnavi li:hover#sprache{
   text-decoration:none;
   display:block;
   height: 25px;
   margin:0;
    padding:0px 0 0 4px;
   float: left;
   background:url("../images/sprache_links.gif") no-repeat left top;
   
}

#mainnavi #sprache a:hover {
   height: 25px;
   margin: 0;
   padding: 0px 0px 0 4px;
   display:block;
   float: left;
   background:url("../images/sprache_rechts.gif") no-repeat right top;
}


Das Ausklappmenü für die Sprache macht mir Sorgen.
Ich möchte, dass der Karteireiter da oben***, der beim Roll-Over erscheint auch noch da ist, wenn ich nach unten ins Menü gehe mit der Maus.
Im Moment macht er im Untermenü beim Roll-over auch den Karteireiter. Das soll aber so eckig blau bleiben, nur beim Roll-Over dann weißen hintergrund bekommen.

Mädchen!
Hat jemand einen Tipp, was ich falsch gemacht habe, bzw. was ich ändern muss?
Danke schon mal Lächel



*** der setzt sich aus "sprache_links.gif" und "sprache_rechts.gif" zusammen, damit er sich je nach länge der Sprache im Menü anpassen kann


Zuletzt bearbeitet von deeesi am Mi 28.03.2007 12:25, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
l3mon

Dabei seit: 26.07.2005
Ort: -5m
Alter: 58
Geschlecht: Männlich
Verfasst Mi 21.03.2007 10:32
Titel

Antworten mit Zitat Zum Seitenanfang

du bringst das hintergrundbild ja nur beim hovern rein - definier das mal im active bzw current auch
(sorry bin nur drübergeflogen)
  View user's profile Private Nachricht senden
Anzeige
Anzeige
deeesi
Threadersteller

Dabei seit: 01.09.2004
Ort: Leverkusen
Alter: 42
Geschlecht: Weiblich
Verfasst Mi 21.03.2007 10:41
Titel

Antworten mit Zitat Zum Seitenanfang

hmm, nee, geht net...

soll aber ja auch nur beim hovern. aber überm ganzen menü Mädchen!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 21.03.2007 11:12
Titel

Re: CSS Ausklapp-Menü. Oberer Menüpunkt aktiv

Antworten mit Zitat Zum Seitenanfang

deeesi hat geschrieben:
Ich möchte, dass der Karteireiter da oben***, der beim Roll-Over erscheint auch noch da ist, wenn ich nach unten ins Menü gehe mit der Maus.


Dazu mal ein kleines Beispiel:

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=iso-8859-1" />
<title>deeesi</title>
<style type="text/css">
* {
   margin:0;
   padding:0;
}
body {
   padding:120px;
}
a:link, a:visited {
   color:#000;
   font-family:Arial, Helvetica, sans-serif;
}
/* Menü */
ul {
   list-style:none;
}
ul li ul {
   display:none;
}
ul li:hover ul {
   display:block;
}
li:hover li a {
   color:#333;
   background:#fff;
}
li a:hover,
li:hover a,
li:hover li a:hover {
   color:#fff;
   background:#333;
}
</style>
</head>
<body>
   <ul>
      <li><a href="#">Test</a>
         <ul>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
         </ul>         
      </li>
   </ul>
</body>
</html>


Wichtig ist die Regel:

Code:
li a:hover,
li:hover a, /* !!! */
li:hover li a:hover {
   color:#fff;
   background:#333;
}
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
deeesi
Threadersteller

Dabei seit: 01.09.2004
Ort: Leverkusen
Alter: 42
Geschlecht: Weiblich
Verfasst Mi 21.03.2007 11:57
Titel

Antworten mit Zitat Zum Seitenanfang

danke...

an sich funktionierts. ich muss nur nochmal rumbasteln, dass ich das mit den 2 hintergrundbildern richtig hinbekomme

eins ist ja auf dem li und eins auf dem a, sonst bekomm ich das ja nicht 2-geteilt hin...schwierig...naja mal gucken

aber ich bin einen schritt weiter Lächel
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
deeesi
Threadersteller

Dabei seit: 01.09.2004
Ort: Leverkusen
Alter: 42
Geschlecht: Weiblich
Verfasst Di 27.03.2007 11:32
Titel

Antworten mit Zitat Zum Seitenanfang

http://www.desi-gn.de/forum/testmenue/hometest.html

Nochmal ein Problem. Und zwar im FF und IE7 macht der oben beim Sprachmenü so eine Art Bogen vor den Menüpunkt, der da bleibt, wenn man runterscrollt. So soll es sein.
Nur der Feine Herr IE6 macht da nicht mit.

Fehlt mirt was im Style Sheet?

relevanter css teil:
Code:

#mainnavi  li:hover#sprache,
#mainnavi  li:hover li#sprache,
#mainnavi  a:hover #sprache,
#mainnavi  li:hover a#sprache
{
   text-decoration:none;
   display:block;
   height: 30px;
   margin:0;
    padding: 0px 0 0 4px;
   float: left;
   background:url(../images/sprache_links.gif) no-repeat left top;
   
}


Für Tipps wär ich dankbar. Ich werd noch kirre hier Lächel
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
LioGetz

Dabei seit: 24.03.2003
Ort: Aachen
Alter: 44
Geschlecht: Männlich
Verfasst Di 27.03.2007 11:47
Titel

Antworten mit Zitat Zum Seitenanfang

hm, ich kann da nur vermuten, aber da ich gestern auch diverse IE6 Probleme hatte, kenn ich mich aus Grins...
Kann es sein das dem lieben Herr IE das Weltkarten-Gif nicht passt? Das es da zu irgend ner überlappung oder sowas kommt? Hast du es mal ohne das Weltkarten-Ding probiert? * Keine Ahnung... *

Grüße von der Pont * huduwudu! *

CU
Lio Grins
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
deeesi
Threadersteller

Dabei seit: 01.09.2004
Ort: Leverkusen
Alter: 42
Geschlecht: Weiblich
Verfasst Di 27.03.2007 11:55
Titel

Antworten mit Zitat Zum Seitenanfang

soeben getestet, geht nich *hu hu huu*
aber gar nicht mal so übel, der gedanke

hmpf Mädchen!



Olé olé Pont * huduwudu! *
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen [solved] aktiv-Status im Flyout-Menü
Impressum u. Datenschutz als Menüpunkt - Menü nur aufklapbar
Dreamweaver, Spry Menü:ausgewählten Menüpunkt hervorheben
Fireworks: Menü mit Aktiv-Button
Menü Dropdown soll nicht direkt unter dem Menüpunkt beginnen
div -> overflow:hidden -> oberer Content versteckt
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.