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

Beitrag lesen

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>