susanne: <div> rechtsbündig darstellen mit Opera 7 ?

Hallo zusammen,

meine dynamische Menüleiste wird sowohl im FF 1.0 als auch im IE 5.5 – endlich – so angezeigt, wie ich sie gern hätte. Im Moment gibt es noch nicht für alle Menüs die entsprechenden Seiten/Unterseiten. Ich möchte daher die einzelnen Menüelemente gern so positionieren, dass sie immer abschließend am rechten Seitenrand dargestellt werden – also egal, ob nun Menüpunkte 1-5 oder 1-7 zu sehen sind.

Die fehlerhafte Darstellung im Opera 7.54 hat mit "float" und "width" zu tun vermute ich mal? Wenn ich im umschließenden div id "b" für width statt "auto" einen festen Wert – beispielweise 780 px – eingebe, zeigt Opera die gesamte Leiste korrekt an, und sie funktioniert auch. Mit der festen Größe werden die Menüpunkte in allen Browsern dann allerdings nicht mehr rechtsbündig ausgerichtet.

Was könnte ich noch versuchen? Es wäre echt klasse, wenn jemand trotz Hitze Energie und Zeit für dieses Problem finden könnte. Ich schätze die hilfreichen Tipps sehr, die sich hier im Forum immer wieder finden lassen. Herzlichen Dank schon jetzt!!
su

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Opera 7 mags nicht</title>

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

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; }
}
//-->
</script>
<style type=text/css>
<!--
a.navi:link, a.navi:visited, a.navi:hover, a.navi:active{
font-family: Tahoma, Arial, sans-serif;
font-size: 13px;
font-weight: normal;
text-decoration: none;
}

a.navi:link, a.navi:visited {
color: #3B4350;}

a.navi:hover, a.navi:active{
color: #C84F25;}

-->
</style>
</head>

<body>
<div style="position: absolute; width:798px; height: 572px; top: 20px; margin-left: 12%; z-index: 0; border: 1px solid #3B4350; padding: 0;">

<div id="b" style="position:absolute; right:12px; top:9px; width:auto; height:120px; z-index:1; visibility:visible;">

<div style="float:left; height:1%">
<div id="head1">
<a href="index.htm" class="navi" style="color:#C84F25;" onMouseOver="MM_showHideLayers('menu1','','show','menu2','','hide','menu3','','hide','menu4','','hide','menu5','','hide','menu6','','hide','menu7','','hide','menu8','','hide')">Startseite<span style="color: #3B4350;">&nbsp;|&nbsp;</span></a></div>
<div id="menu1" style="visibility:hidden;" >
<a class="navi" href="#">Seite 1</a><br>
<a class="navi" href="#">Seite 2</a><br>
<a class="navi" href="#">Seite 3</a><br>
</div>
</div>

<div style="float:left; height:1%">
<div id="head2" >
<a href="#" class="navi" onMouseOver="MM_showHideLayers('menu1','','hide','menu2','','show','menu3','','hide','menu4','','hide','menu5','','hide','menu6','','hide','menu7','','hide','menu8','','hide')">Menu2&nbsp;|&nbsp;</a></div>
<div id="menu2" style="visibility:hidden;">
<a class="navi" href="#">Seite 1</a><br>
<a class="navi" href="#">Seite 2</a><br>
<a class="navi" href="#">Seite 3</a><br>
</div>
</div>

<div style="float:left; height:1%">
<div id="head3">
<a href="#" class="navi" onMouseOver="MM_showHideLayers('menu1','','hide','menu2','','hide','menu3','','show','menu4','','hide','menu5','','hide','menu6','','hide','menu7','','hide','menu8','','hide')">Menu3&nbsp;|&nbsp; </a></div>
<div id="menu3" style="visibility:hidden;">
<a class="navi" href="#">Seite 1</a><br>
<a class="navi" href="#">Seite 2</a><br>
<a class="navi" href="#">Seite 3</a><br>
</div>
</div>

<div style="float:left; height:1%">
<a href="#" onMouseOver="MM_showHideLayers('menu1','','hide','menu2','','hide','menu3','','hide','menu4','','hide','menu5','','hide','menu6','','hide','menu7','','hide','menu8','','hide')" ><img src="schliessen.gif" alt="Menüpunkte schließen" width="12" height="10" border="0"></a></div>

</div>
</div>
</body>
</html>

  1. Hi,

    Es wäre echt klasse, wenn jemand trotz Hitze Energie und Zeit für dieses Problem finden könnte

    dass bisher noch keiner geantwortet hat, könnte daran liegen, dass Du lediglich einen chaotischen Quelltext mit kryptischem Dreamweaver-Code und unübersichtlichen Inline-Styles gepostet hast.

    Erstelle doch einmal eine statische Version ohne Javascript und mit dem CSS im style-Element und stelle diese am besten online zur Verfügung.

    freundliche Grüße
    Ingo

    1. Hallo Ingo -

      danke für Deinen Hinweis - ich hatte schon fast befürchtet, dass die Menge an Code des Guten zuviel war. Ich tus auch nicht wieder... :-((

      Zweiter Anlauf: Auch in dieser Version stellt der Opera 7.54 die Elemente nicht so dar, wie ich mir das wünschen würde. Opera 9 hat die Schwierigkeiten anscheinend nicht mehr - vielleicht hilft das, um der Lösung auf die Spur zu kommen?
      Hat jemand eine Idee??
      Grüße und vielen Dank
      su

      ---------------------
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">
      <head>
      <title>Opera 7 mags nicht</title>
      </head>

      <body>
      <!--äußerer Rahmen der Seite-->
      <div style="position: absolute; width:798px; height: 572px; top: 20px; margin-left: 12%; z-index: 0; border: 1px solid #3B4350; padding: 0;">

      <!--Element das alle Menüelemente einschließt-->
      <div id="b" style="position:absolute; right:12px; top:9px; width:auto; height:120px; z-index:1; visibility:visible;">

      <div style="float:left; height:1%">
      Startseite&nbsp;|&nbsp;</div>

      <div style="float:left; height:1%">
      Menu2&nbsp;|&nbsp;</div>

      <div style="float:left; height:1%">
      Menu3&nbsp;|&nbsp;</div>

      </div>
      </div>
      </body>
      </html>

      1. Hi,

        <div style="position: absolute; width:798px; height: 572px; top: 20px; margin-left: 12%; z-index: 0; border: 1px solid #3B4350; padding: 0;">

        warum position:absolute? Und findest Du nicht 594px Höhe etwas viel vorauszusetzen?

        <div id="b" style="position:absolute; right:12px; top:9px; width:auto; height:120px; z-index:1; visibility:visible;">

        Ohje, schon wieder absolute Positionierung. width:auto; und visibility:visible; anzugeben ist übrigens überflüssig.

        <div style="float:left; height:1%">
        Startseite&nbsp;|&nbsp;</div>

        1% von 120px sind nur 12px. Das führt zwangsläufig zu Konflikten. Wenn Du eine so geringe Schriftgröße angibst, werden viele den Schriftgrad auf ein Leserliches Maß erhöhen.
        Und was sollen die geschützten Leerzeichen?
        Warum verwendest Du nicht einfach mal eine semantisch passendere Liste?

        freundliche Grüße
        Ingo

        1. Hi,

          1% von 120px sind nur 12px.

          Du verwechselst Prozent mit Prodez ;-)

          cu,
          Andreas

          --
          Warum nennt sich Andreas hier MudGuard?
          Schreinerei Waechter
          O o ostern ...
          Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
          1. Hi,

            1% von 120px sind nur 12px.

            Du verwechselst Prozent mit Prodez ;-)

            Oops.. irgendwie hatte ich wohl völlig verdrängt, dass man auf die Idee kommen könnte, einem Element mit anzuzeigendem Inhalt eine Höhe von nur einem Pixel zuzuweisen (außer beim IE natürlich).

            freundliche Grüße
            Ingo

            1. Hi zusammen -

              das eine Prozent ist ein Überbleibsel aus einem Forumsbeitrag mit Hinweis auf das "hasLayout" im IE - macht aber hier keinen Sinn, da es darum ja gar nicht geht.

              OK, ich sehe, es gibt an meinem Ansatz eine ganze Menge zu überdenken. Hm.

              » Und findest Du nicht 594px Höhe etwas viel vorauszusetzen?

              • Was würde sich statt dessen anbieten, um den äußeren Rahmen bei wechselnden Inhalten konstant in dieser Größe darzustellen?

              » Warum verwendest Du nicht einfach mal eine semantisch passendere Liste?

              • Na, das hat vermutlich mit den Grenzen meiner CSS-Semantik zu tun... ;)
                Ursprünglich hatte ich mich gegen ein dynamisches CSS-Menü entschieden, da das Beispiel in SELFHTML dazu (http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern) nicht in meinem Test-IE 5.5 funktioniert. Zusätzliche Übersichtsseiten für ältere Browser möchte ich nicht einsetzen, da es nicht so viele Unterpunkte gibt, als dass sich das lohnt.

              In der Zwischenzeit hab ich mir das obige Beispiel noch mal genauer angeschaut und kann in etwa nachvollziehen was da passiert. Allerdings fehlt mir dabei der Ansatz, wie ich eine *erweiterbare* Zahl von Überschriftselementen im Menü mit *variabler* Größe *rechtsbündig* positionieren kann, wenn das Ganze geteilt dargestellt werden soll, also die Menü-Unterseiten in einer verschachtelten Liste noch mit dazu kommen. So wie ich das verstehe schließt das eine (display inline) doch das andere (float, width und die relative/absolute Positionierung der Listen/Listenelemente) aus, oder?? Und was passiert dabei mit dem IE 5.5.? Vermutlich ist es ja ganz einfach – aber ich sehs grade nicht.

              Hat jemand einen entscheidenden Tipp dazu??
              DANKE und Grüße su

              1. Hi,

                das eine Prozent ist ein Überbleibsel aus einem Forumsbeitrag mit Hinweis auf das "hasLayout" im IE - macht aber hier keinen Sinn

                macht überhaupt keinen Sinn, es anderen Browsern als dem IE vorzusetzen.

                » Und findest Du nicht 594px Höhe etwas viel vorauszusetzen?

                • Was würde sich statt dessen anbieten, um den äußeren Rahmen bei wechselnden Inhalten konstant in dieser Größe darzustellen?

                lass doch nächstes mal die Zitatzeichen bitte stehen, ja?
                Ich finde diese Höhe zuviel für einen Großteil der Besucher. Die häufigste Auflösung ist 1024*768 und wer damit suft, hat vermutlich zwar wie ich das Fenster voll aufgezogen, aber noch einige Broserleisten mehr als ich aktiv. Ich habe z.B. gerade 598px nutzbare Höhe und bin sehr sparsam mit den angezeigten Browserelementen - äußerst knapp.
                Aber warum überhaupt eine feste Höhe?

                » Warum verwendest Du nicht einfach mal eine semantisch passendere Liste?

                • Na, das hat vermutlich mit den Grenzen meiner CSS-Semantik zu tun... ;)
                  Ursprünglich hatte ich mich gegen ein dynamisches CSS-Menü entschieden, da das Beispiel in SELFHTML dazu (http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern) nicht in meinem Test-IE 5.5 funktioniert. Zusätzliche Übersichtsseiten für ältere Browser möchte ich nicht einsetzen, da es nicht so viele Unterpunkte gibt, als dass sich das lohnt.

                Du hattest entweder nicht das nächste Beispiel mit dem Javascript-Workaround probert oder Javascript bzw. "ActiveScripting" deaktiviert? Weil ich das Script bis zum IE 5.01 getestet hatte. Und "ältere Browser" meint auch die IEs bis zur Version 6. ;-) Weil Javascript ja nicht vorausgesetzt werden sollte.

                In der Zwischenzeit hab ich mir das obige Beispiel noch mal genauer angeschaut und kann in etwa nachvollziehen was da passiert. Allerdings fehlt mir dabei der Ansatz, wie ich eine *erweiterbare* Zahl von Überschriftselementen im Menü mit *variabler* Größe *rechtsbündig* positionieren kann, wenn das Ganze geteilt dargestellt werden soll, also die Menü-Unterseiten in einer verschachtelten Liste noch mit dazu kommen.

                float:right; positon:relative für die Hauptmenüpunkte - die dann leider in umgekehrter Reihenfolge im Quelltext stehen müssten.

                So wie ich das verstehe schließt das eine (display inline) doch das andere (float, width und die relative/absolute Positionierung der Listen/Listenelemente) aus, oder??

                Ja.

                freundliche Grüße
                Ingo

                1. Hi -

                  Du hattest entweder nicht das nächste Beispiel mit dem Javascript-Workaround probert oder Javascript bzw. "ActiveScripting" deaktiviert?

                  100 Punkte, das hatte ich wohl übersehen.

                  float:right; positon:relative für die Hauptmenüpunkte - die dann leider in umgekehrter Reihenfolge im Quelltext stehen müssten.

                  Danke! Die Menüleiste funktioniert mit dem eingefügten JavaScript-Workaround, in diesem Fall ohne die Hintergrundfarbe für den rollover, anstandslos in FF und IE (die IE-Korrekturen sind noch nicht im CSS enthalten). Opera 7 hat leider noch immer Schwierigkeiten mit der dynamischen Anzeige. Hab ich noch irgendwas übersehen dabei??

                  Aber warum überhaupt eine feste Höhe?

                  Auch wenn Deine Begründung absolut berechtigt ist und ich weiß, dass eine feste Höhe Nachteile beim Verändern der Schriftgröße durch den Besucher mit sich bringt, würde ich die Seiten einfach gern mit einem äußeren Rahmen in einheitlicher Größe darstellen.

                  Und "ältere Browser" meint auch die IEs bis zur Version 6. ;-)

                  Alter ist wohl immer relativ und eine Frage des eigenen Standpunkts ;-))

                  Beste Grüße
                  su

                  css
                  -----------

                  body, p, a{
                  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
                  color: #3B4350;
                  font-size: 100.01%;}

                  #Rahmen{
                  width:47.1em;
                  height: 30em;
                  margin-top: 2%;
                  margin-left: 15%;
                  z-index: 0;
                  border: 1px solid #3B4350;}

                  ul#Navigation {
                  margin: 0.2em;}

                  ul#Navigation li {
                  margin: 0 0.3em;
                  float: right;
                  list-style: none;
                  display: inline;
                  position: relative;}

                  ul#Navigation li ul {
                  position: absolute;
                  top: 1.2em; left: -2.6em;
                  display: none;}

                  ul#Navigation li>ul {
                  display: none; top: 1em;}

                  ul#Navigation li:hover>ul, ul#Navigation li a#aktuell+ul {
                  display: block;}

                  ul#Navigation li ul li {
                  float: none;
                  display: block;
                  margin: 0 0.2em;}

                  ul#Navigation a, ul#Navigation a.visited, ul#Navigation span {
                  text-decoration: none;
                  font-size: 0.8em;
                  }

                  ul#Navigation a:hover, ul#Navigation a:active, ul#Navigation span {
                  color: #C84F25;}

                  html
                  ---------

                  <body>
                  <div id="Rahmen">

                  <ul id="Navigation">
                  <li><a href="#">Seite 3</a></li>

                  <li><a href="#">L&auml;ngerer Seitenname 2</a>
                      <ul><li><a href="#">Unterseite&nbsp;1</a></li>
                      <li><a href="#">Unterseite&nbsp;2</a></li>
                      <li><a href="#">Unterseite&nbsp;3</a></li>
                      </ul>
                  </li>

                  <li><span>Seite 1</span>
                  <ul><li><a href="#">Unterseite&nbsp;1</a></li>
                  <li><a href="#">Unterseite&nbsp;2</a></li>
                  </ul>
                  </li>
                  </ul>

                  </div>
                  </body>

                  1. Hallo.

                    Opera 7 hat leider noch immer Schwierigkeiten mit der dynamischen Anzeige. Hab ich noch irgendwas übersehen dabei??

                    In erster Linie vermutlich die immer stärker gegen Null tendierende Relevanz von Opera 7.
                    MfG, at