Menü klappt zu

[Nadja]

Und bevor ich es vergesse: Ja, ich weiß, dass ich noch andere Threads offen habe ;)

Also, das CSS-Menü klappt im Firefox zu, sobald ich mit dem Mousecursor im Menü über dem iframe bin.
Im Opera wird das Menü abgeschnitten. D.h. es wird nur der Teil außerhalb des iframes angezeigt.

Nun habe ich in einem anderen Thread gelesen, dass man das auch mit DIV machen kann.
Hab ich auch getestet - Im Opera lief es dann ohne Probleme, aber im Firefox trat das gleiche Problem wie mit dem iframe auf.

Langsam krieg ich die Krise... Soll man den Firefox unbeachtet lassen bei der Programmierung?

Der Kunde möchte das Menü unbedingt so zum Ausklappen haben, aber mir fällt einfach nichts mehr für die Realisierung ein :(

[Maz]

Moinsen,

Soll man den Firefox unbeachtet lassen bei der Programmierung?

bei teilweise 30% Marktanteil? Nein. Aber ich kann Dich beruhigen: Du programmierst nciht mit HTML und CSS. Das sind nämlich gar keine Programmiersprachen.

Der Kunde möchte das Menü unbedingt so zum Ausklappen haben, aber mir fällt einfach nichts mehr für die Realisierung ein :(

schau mal hier: CSS mit Javascript, funktioniert aber auch ohne JS (dann ist alles ausgeklappt).
Vertikal: http://tutorials.alsacreations.com/deroulant/cssmenu4.htm
Horizontal: http://tutorials.alsacreations.com/deroulant/menu-horizontal.htm

[Nadja]

Du programmierst nciht mit HTML und CSS. Das sind nämlich gar keine Programmiersprachen.

Ja, es sind "Beschreibungssprachen", ich weiß ;) (Hab ich jedenfalls so gelernt)... *schäm*

schau mal hier: CSS mit Javascript, funktioniert aber auch ohne JS (dann ist alles ausgeklappt).
Vertikal: http://tutorials.alsacreations.com/deroulant/cssmenu4.htm
Horizontal: http://tutorials.alsacreations.com/deroulant/menu-horizontal.htm

Danke, ich schau mir mal die Quelltexte an :)

[Dennis]

Hi Maz,

Soll man den Firefox unbeachtet lassen bei der Programmierung?

bei teilweise 30% Marktanteil?

Wo hast du diese Angabe her? Die dürfte (leider) wohl etwas zu hoch gegriffen sein (zumindest i.M. noch *g*).

MfG, Dennis.

[Maz]

Moinsen,

Soll man den Firefox unbeachtet lassen bei der Programmierung?

bei teilweise 30% Marktanteil?

Wo hast du diese Angabe her? Die dürfte (leider) wohl etwas zu hoch gegriffen sein (zumindest i.M. noch *g*).

Firefox-Anteil bei Heise.de (Tabelle unten)

heise.de ist zwar nicht wirklich _der_ erste Anlaufpunkt für DAUs und Durchschnittsuser aber immerhin ;-) Ich war selber überrascht.

[Alexander Brock]

Hallo Nadja,

[Probleme]

Und den zugehörigen Quellcode sollen wir jetzt erraten?

Gruß
Alexander Brock

[Gunnar Bittersmann]

Hi Alexander,

Und den zugehörigen Quellcode sollen wir jetzt erraten?

Vielleicht aus ihren anderen Threads herausfischen?

@Nadja,
Es ist vielleicht auch in deinem Interesse, keine neuen Threads aufzumachen, sondern Folgefragen im alten Thread zu stellen.

Gruß,
Gunnar

[Nadja]

Hi Alexander,

Und den zugehörigen Quellcode sollen wir jetzt erraten?

Vielleicht aus ihren anderen Threads herausfischen?

@Nadja,
Es ist vielleicht auch in deinem Interesse, keine neuen Threads aufzumachen, sondern Folgefragen im alten Thread zu stellen.

Gruß,
Gunnar

Ich hab aber dabei immer das Gefühl, dass Threads, die "weiter unten" stehen, gar nicht mehr gelesen werden, sorry.

[Daniel]

Hi,

Ich hab aber dabei immer das Gefühl, dass Threads, die "weiter unten" stehen, gar nicht mehr gelesen werden, sorry.

bei mir stehen immer die oben wo aktuell gepostet wird. eine anmeldung
ist sehr hilfreich und die meisten die hier kompetentz zeigen sind
angemeldet.

MfG

[Nadja]

Hi,

Ich hab aber dabei immer das Gefühl, dass Threads, die "weiter unten" stehen, gar nicht mehr gelesen werden, sorry.

bei mir stehen immer die oben wo aktuell gepostet wird. eine anmeldung
ist sehr hilfreich und die meisten die hier kompetentz zeigen sind
angemeldet.

MfG

Den Rat werd ich mir zu Herzen nehmen.
Dann nochmals "Sorry" für die vielen Threaderöffnungen!

[Alexander Brock]

Hallo Nadja,

Ich hab aber dabei immer das Gefühl, dass Threads, die "weiter unten" stehen, gar nicht mehr gelesen werden, sorry.

Vollkommen falsch. Erstens lesen Stammposter von unten nach oben,
weil sich unten die interessanten Threads ansammeln, auf die häufig
geantwortet wird und die deshalb nicht im Archiv verschwinden.

Zweitens kann man die Sortierreihenfolge ändern, ich habe zum Beispiel
die Threads sortiert nach dem Alter des letzten Posts, wenn du nun
auf einen deiner alten Threads antwortest steht der bei mir
bis zum nächsten Posting ganz oben und ist wegen der anderen
Antworten viel spannender als ein neuer Thread.

Gruß
Alexander Brock

[Nadja]

Hallo Nadja,

[Probleme]

Und den zugehörigen Quellcode sollen wir jetzt erraten?

Gruß
Alexander Brock

Okay, du hast es so gewollt ;)

Auszug HTML mit iframe:
----------------------
<body onload="enable_menues_for_ie();" bgcolor="#8E8D8D">
<div align="center">

<table border="0" width="700pt" cellpadding="0" cellspacing="0" style="margin-top:45pt;">
  <tr height="263pt">
    <td align="left" valign="top" bgcolor="#818181">
    <br />
   <ul id="nav" class="dropdown">
      <li class="oberlinie"><a href="unternehmen.html" target="Fenster" class="has_submenu" onClick="this.blur()">&nbsp;&nbsp;&nbsp;&nbsp;Unternehmen</a>
        <ul>
          <li><a href="unternehmen.html" target="Fenster" onClick="this.blur()">Was leisten wir?</a></li>
          <li><a href="unternehmen.html" target="Fenster" onClick="this.blur()">Wie arbeiten wir?</a></li>
          <li><a href="mitarbeiter.html" target="Fenster" onClick="this.blur()">Mitarbeiter / Trainer</a></li>
        </ul>
      </li>
    </ul>
  </td>
  <td bgcolor="#F2F2F2" width="514pt" align="right">
      <iframe src="start.html" name="Fenster" width="450pt" height="263pt" frameborder="0"></iframe>
<!-- oder eben
        <div style="width:300px; height:200px; overflow:scroll; border:1px solid #FF0000;">
          Hier steht ein toller Text!!<br />
          Hier steht ein toller Text!!<br />
          Hier steht ein toller Text!!<br />
          Hier steht ein toller Text!!<br />
          Hier steht ein toller Text!!<br />
          Hier steht ein toller Text!!<br />
          Hier steht ein toller Text!!<br />
          Hier steht ein toller Text!!<br />
        </div>
-->
  </td>
</tr>
<tr height="13pt">
   <td bgcolor="#818181"></td>
   <td bgcolor="#F2F2F2" width="514pt" background="grafiken/linien.jpg" valign="bottom"></td>
</tr>
<tr height="13pt">
    <td colspan="4" bgcolor="#FFFFFF" width="100%"></td>
  </tr>
</table>
</div>
</body>
----------------------------------

So, sorry für den langen Quelltext, aber ich hab schon gekürzt.

[Nadja]

Guten Morgen,

ich habe mir jetzt ein Menü basierend auf JS gesucht.
Hab aber mit der CSS-Datei und der Darstellung noch so meine Schwierigkeiten.

Wenn ich nämlich dem <dt> ein Style zuweise, reagiert nur der erste Menüpunkt, wie z.B. beim Hover.

Außerdem möchte ich, dass die gesamte Zeile die farbige Hinterlegung anzeigt, egal, wo ich mit der Maus drüberfahre (ob Text oder nur der Kasten). Im Moment wird der Hover-Effekt nur angezeigt, wenn ich direkt über die Schrift gehe.

Hier ein Auszug aus der HTML-Datei:
------------------
<body>

<table>
<tr>
<td>
<!-- Menu  -->
<dl id="menu">
  <dt class="menu" onmouseover="javascript:montre('smenu1');"><a href="#">Menüpunkt1</a></dt>
   <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
    <ul>
     <li><a href="#">Text1</a></li>
     <li><a href="#">Text2</a></li>
     <li><a href="#">Text3</a></li>

</ul>
   </dd>

<dt class="menu" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">Menüpunkt2</dt>
   <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
    <ul>
     <li><a href="#">Text1</a></li>
     <li><a href="#">Text2</a></li>
     <li><a href="#">Text3</a></li>
     <li><a href="#">Text4</a></li>
    </ul>

</dd>
</dl>

</td>
<td>
        <div style="width:300px; height:200px; overflow:scroll; border:1px solid #FF0000;">
          Hier steht ein toller Text!!<br />
          Hier steht ein toller Text!!<br />
          Hier steht ein toller Text!!<br />
          Hier steht ein toller Text!!<br />
          Hier steht ein toller Text!!<br />
          Hier steht ein toller Text!!<br />
          Hier steht ein toller Text!!<br />
          Hier steht ein toller Text!!<br />
        </div>
</td>
</tr>
</table>
</body>
---------------------------

Und die dazugehörige CSS-Datei:
----------------------------
dl, dt, dd, ul, li
{
margin: 0;
padding: 0;
list-style-type: none;
}

#menu
{
top: 1em;
left: 1em;
width: 15em;
padding:0;
margin:0;
font-size:8pt;
font-family:Verdana;
color:#FFFFFF;
}

#menu dt
{
cursor: pointer;
background-color: #818181;
height: 20px;
border-bottom: 1px solid #999999;
font-size: 8pt;
}

#menu dd
{
cursor: pointer;
position: absolute;
z-index: 100;
left: 11em;
margin-top: -1.5em;
width: 15em;
background-color:#9E9E9E;
  border-bottom:1px solid #777777;
  padding-bottom:0px;
  font-size: 8pt;
}

#menu ul
{
padding: 2px;
}

#menu li
{
font-size: 8pt;
height: 18px;
line-height: 18px;
}

.menu /*#menu li a, #menu dt a */
{
color: #FFFFFF;
text-decoration: none;
display: block;
padding:4px;
}

#menu li a:hover
{
text-decoration:none;
background-color:#4F4F4F;
}

#menu dt a:hover, #menu dd a:hover
{
text-decoration:none;
background-color:#4F4F4F;
}

#menu li a, #menu dt a
{
color: #FFFFFF;
text-decoration: none;
display: block;
padding:0;
}
-------------------------------

Wo muss ich denn was angeben, damit meine "Wünsche in Erfüllung gehen"??

Liebe Grüße,
Nadja

[Daniel]

Hi,

ich habe mir jetzt ein Menü basierend auf JS gesucht.

ohje, dann darf ichs ja nicht ausschalten sonst funktionierts nichtmehr :(

Hab aber mit der CSS-Datei und der Darstellung noch so meine Schwierigkeiten.

wie CSS? dachte JS

Wenn ich nämlich dem <dt> ein Style zuweise, reagiert nur der erste Menüpunkt, wie z.B. beim Hover.

beim CSS? mit welchem browser teste du? IE, tja der IE kennt :hover nur für <a>-Elemente.

Außerdem möchte ich, dass die gesamte Zeile die farbige Hinterlegung anzeigt, egal, wo ich mit der Maus drüberfahre (ob Text oder nur der Kasten).

ein display:block; in der CSS sollte helfen, für den <a>.

MfG

[Nadja]

Hallöchen,

ohje, dann darf ichs ja nicht ausschalten sonst funktionierts nichtmehr :(

Tja, was empfiehlst du denn sonst, wenn der Kunde ein Ausklappmenü haben möchte??

wie CSS? dachte JS

Ja, ich meine aber das Aussehen - Soll man doch mit CSS machen.

Wenn ich nämlich dem <dt> ein Style zuweise, reagiert nur der erste Menüpunkt, wie z.B. beim Hover.

beim CSS? mit welchem browser teste du? IE, tja der IE kennt :hover nur für <a>-Elemente.

Und wieso kriegt er das dann für das erste Element hin??
Im <dt>-Tag ist ja einm <a>-Tag eingeschlossen, und CSS soll folgendes machen:
#menu dt a:hover
{
text-decoration:none;
background-color:#4F4F4F;
}

Außerdem möchte ich, dass die gesamte Zeile die farbige Hinterlegung anzeigt, egal, wo ich mit der Maus drüberfahre (ob Text oder nur der Kasten).

ein display:block; in der CSS sollte helfen, für den <a>.

Ist es schon, funzt aber nicht:
#menu li a, #menu dt a
{
color: #FFFFFF;
text-decoration: none;
display: block;
padding:0;
}

Oder muss man da eine width-Angabe machen?

Liebe Grüße,
Nadja

[Nadja herself]

Und wieso kriegt er das dann für das erste Element hin??
Im <dt>-Tag ist ja einm <a>-Tag eingeschlossen, und CSS soll folgendes machen:
#menu dt a:hover
{
text-decoration:none;
background-color:#4F4F4F;
}

Hat sich erledigt - Der Fehler saß mal wieder zwischen Schreibtischkante und Stuhllehne!
Vielleicht sollte man in jedem <dt>-Element ein <a>-Tag haben...

Oder muss man da eine width-Angabe machen?

Ja -> Muss man ;)

Liebe Grüße,
Nadja

[Daniel]

Hi,

Tja, was empfiehlst du denn sonst, wenn der Kunde ein Ausklappmenü haben möchte??

CSS

Ja, ich meine aber das Aussehen - Soll man doch mit CSS machen.

mit CSS kann man mehr als das aussehn machen. Vorallem aufgrund der pseudoklassen.

Und wieso kriegt er das dann für das erste Element hin??

weil die unter elemente li etc. sind und kein dt mehr.

Oder muss man da eine width-Angabe machen?

ja, aber vergiss nicht das du für die <li> etc. auch width angaben
brauchst dann kannst du beim a{width:100%}

MfG

[Nadja]

Tja, was empfiehlst du denn sonst, wenn der Kunde ein Ausklappmenü haben möchte??

CSS

Hatte ich. Aber dann hätte ich so, wie ich die Seite machen soll, entweder Firefox *und* Opera auschließen müssen (bei iframe) oder nur den Firefox (bei div).
So klappt es bisher in allen Browsern einwandfrei.

Oder muss man da eine width-Angabe machen?

ja, aber vergiss nicht das du für die <li> etc. auch width angaben
brauchst dann kannst du beim a{width:100%}

Super, danke.
Aber irgendwie funzt das mit dem Hovereffekt noch nicht. So sieht das Menü aus:

-------------
  Text
-------------
  Text
-------------

usw.

die -------- stellen eine anders farbige Linie dar.

Beim Hover bleibt rechts, linke, oben und unten ein Abstand, den ich nicht haben möchte.
Ich hätte es gern so, dass links und rechts kein Abstand ist und das die farbige Hinterlegung oben und unten mit der Linie abschließt.

Wie krieg ich das hin?
*der totale CSS-Dau ist* *heul* ;)

Liebe Grüße,
Nadja

[Daniel]

Hi,

Aber irgendwie funzt das mit dem Hovereffekt noch nicht.
Beim Hover bleibt rechts, linke, oben und unten ein Abstand, den ich nicht haben möchte.
Ich hätte es gern so, dass links und rechts kein Abstand ist und das die farbige Hinterlegung oben und unten mit der Linie abschließt.

liegt vermutlich an margin, bzw. padding. also am innen und außenabstand. setzt das mal auf 0px.

MfG

[Nadja]

liegt vermutlich an margin, bzw. padding. also am innen und außenabstand. setzt das mal auf 0px.

Hab ich gemacht, jetzt passt es.
Hab die Höhe von <li> und <dt> auf 2em gesetzt. Das Problem ist jetzt widerum, dass die Schrift oben klebt :(
Da hilft auch kein "vertical-align:top;"...

Ich glaub, ich schaff das nie :(

[Daniel]

Hi,

Hab ich gemacht, jetzt passt es.

freut mich zu hören

Hab die Höhe von <li> und <dt> auf 2em gesetzt. Das Problem ist jetzt widerum, dass die Schrift oben klebt :(
Da hilft auch kein "vertical-align:top;"...

du weist was vertical-align:top bewirkt? richtig die schrift wird oben hingesetzt. ein middle oder bottom hilft dir da weiter. aufjedenfall hilft es dir sicherlich wenn du hier mal etwas liest.

http://de.selfhtml.org/css/eigenschaften/index.htm

MfG

[Nadja]

Hallöchen,

Hab die Höhe von <li> und <dt> auf 2em gesetzt. Das Problem ist jetzt widerum, dass die Schrift oben klebt :(
Da hilft auch kein "vertical-align:top;"...

Wäh, wieso denn auch top? Meinte center, sorry, hab mich vertippt :(
Weder "center", noch "middle", noch "bottom" helfen da.

Hier nochmal kurz der Auszug aus der CSS-Datei:

#menu dt
{
cursor: pointer;
background-color: #818181;
border-bottom: 1px solid #999999;
font-size: 8pt;
height:2em;
vertical-align:bottom;
}

Trotzdem bleibt beim <dt> der Text oben kleben...

[Nadja]

Ich nochmal,

hab das Problem lösen können - Das "line-height" hat gefehlt :)
Hatte nur "height" verwendet, deshalb blieb der Text oben kleben!

Danke nochmal für die Mühe!!

Ganz liebe Grüße,
Nadja

[wahsaga]

hi,

Tja, was empfiehlst du denn sonst, wenn der Kunde ein Ausklappmenü haben möchte??

vor allem würde ich empfehlen, dem kunden nichts anzudrehen, von dessen grundlegender funktionsweise du selber nicht mal den hauch einer ahnung hast.

gruß,
wahsaga

[Nadja]

hi,

Tja, was empfiehlst du denn sonst, wenn der Kunde ein Ausklappmenü haben möchte??

vor allem würde ich empfehlen, dem kunden nichts anzudrehen, von dessen grundlegender funktionsweise du selber nicht mal den hauch einer ahnung hast.

Durch das JS steige ich ja durch, nur durch die CSS-Geschichte noch nicht 100%ig.

Aber hey, sorry, dass ich gerade ein Praktikum in dem Bereich mache, um mehr zu lernen, wird nicht wieder vorkommen!!!

[Nadja]

Hallo,

Hm, also irgendwas stimmt da noch nicht.

Im IE und Opera funktioniert das "neue" Menü sehr gut, aber im Firefox hab ich noch folgendes Problemchen:

Das erste Ausklapp-Menü schließt sich immernoch, wenn ich über den iframe / das div gehe. Alle anderen bleiben geöffnet.

Hab aber meines Erachtens für beide Menüelemente dasselbe angegeben...

Hier nochmal ein Auszug ausder HTML-Datei (würde euch ja gerne einen Link schicken, aber die Seite ist noch nicht "online"):
------------------
<!-- Beginn Menu  -->
   <dl id="menu">
    <dt onmouseover="javascript:montre('smenu1');" class="oberlinie"><a href="#">Menü1</a></dt>
    <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
     <ul>
      <li class="unterlinie"><a href="#">Menü 1.1</a></li>
      <li class="unterlinie"><a href="#">Menü 1.2</a></li>
      <li><a href="#">Menü 1.3</a></li>
     </ul>
    </dd>

<dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();"><a href="#">Menü2</a></dt>
    <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
     <ul>
      <li class="unterlinie"><a href="#">Menü 2.1</a></li>
      <li class="unterlinie"><a href="#">Menü 2.2</a></li>
      <li class="unterlinie"><a href="#">Menü 2.3</a></li>
      <li><a href="#">Web based Competence Training</a></li>
     </ul>
    </dd>

</dl>
   <!-- Ende Menu  -->
----------------------

CSS:
-------------------
dl, dt, dd, ul, li
{
margin: 0;
padding: 0;
list-style-type: none;
}

#menu
{
width: 15em;
padding:0;
margin:0;
font-size:8pt;
font-family:Verdana;
color:#FFFFFF;
}

#menu dt
{
cursor: pointer;
background-color: #818181;
border-bottom: 1px solid #999999;
font-size: 8pt;
text-indent:1.5em;
line-height:2em;
height:2em;
}

#menu dt a
{
color: #FFFFFF;
text-decoration: none;
display: block;
padding:0;
width:100%;
line-height:2em;
}

#menu dt a:hover
{
display:block;
text-decoration:none;
background-color:#4F4F4F;
width:100%;
line-height:2em;
}

#menu dd
{
cursor: pointer;
position: absolute;
display:none;
z-index: 100;
left: 30em;
margin-top: -1.8em;
width: 20em;
background-color:#9E9E9E;
  border-bottom:1px solid #999999;
  padding:0px;
  font-size: 8pt;
  line-height:2em;
}

#menu dd a:hover
{
display:block;
text-decoration:none;
background-color:#4F4F4F;
width:100%;
line-height:2em;
}

#menu ul
{
padding: 0;

}

#menu li
{
font-size: 8pt;
padding: 0px;
width: 20em;
line-height:2em;
text-indent:1em;
}

#menu li a
{
color: #FFFFFF;
text-decoration: none;
display: block;
padding:0;
width:100%;
line-height:2em;
}

#menu li a:hover
{
display:block;
text-decoration:none;
background-color:#4F4F4F;
width:100%;
line-height:2em;
}

.unterlinie
{
background-color:#9E9E9E;
  border-bottom:1px solid #777777;
  padding:0;
}
-------------------

Weiß echt nicht, warum ausgerechnet nur das erste Ausklappmenü zuklappt...

Weiß jemand Rat?

Liebe Grüße,
Nadja