floating boxes

1 Alex Nowak

Hallo Leute!

Ich habe eine für meine Verhältnisse ziemlich komplexe Seite gebastelt und komm jetzt nicht mehr weiter...
Die Struktur der Seite steht. Jetzt möchte ich aber noch 2 Menüs einbauen, die auf MouseOver eines Buttons erscheinen und auch bei diesem Button bleiben, wenn ich die Browserfenstergröße ändere.
Hier mal ein wenig code:

<div class="container" id="container">
  <!-- HEADER BEGIN-->
  <div class="header" id="header">
  <div class="topnavi" id="topnavi">
    <a href="#" onMouseOver="MM_showHideLayers('search','','hide','fontsize','','hide','closer','','hide')">jahres&uuml;bersicht</a> | <a href="#" onMouseOver="MM_showHideLayers('search','','hide','fontsize','','hide','closer','','hide')">textversion</a> | <a href="#" onMouseOver="MM_showHideLayers('search','','show','fontsize','','hide','closer','','show')">schnellsuche</a> | <a href="#" onMouseOver="MM_showHideLayers('search','','hide','fontsize','','show','closer','','show')">schriftgr&ouml;&szlig;e</a> | <a href="#" onMouseOver="MM_showHideLayers('search','','hide','fontsize','','hide','closer','','hide')">impressum</a></div>
  </div>
  <!-- HEADER END-->
  <!-- SCHNELLSUCHE BEGIN-->
   <div id="search" class="search" style="visibility:hidden; height:20px; position:absolute; z-index:5; background-color: #F9F8EF; border-width:1px; border-color:#000000; border-style:solid; padding:3px; left: 479px;">
     <form name="form2" method="post" action="" style="display:inline;"><strong>Schnellsuche:</strong>       
       <input name="suchen" type="text" id="suchen">
  <input type="submit" name="Submit" value="Submit"></form></div>
  <!-- SCHNELLSUCHE END-->
  <!-- SCHRIFT BEGIN-->
   <div id="fontsize" class="fontsize" style="visibility:hidden; height:60px; position:absolute; z-index:5; background-color: #F9F8EF; border-width:1px; border-color:#000000; border-style:solid; padding:3px; left: 696px; width: 87px;">
     <p><strong>gro&szlig; (14px)<br>
     </strong><strong>&nbsp;normal(12px)<br>
     klein (10px) </strong></p>
   </div>
   <!-- SCHRIFT END-->

Ich hab probiert und probiert, kriegs aber nicht hin. Wenn ich eine relative Position angebe, dann zerstören mir die divs meinen seitenaufbau, gebe ich eine absolute Position an, bewegen sich die divs nicht mit den buttons...
Was mach ich falsch? Oder wie mach ichs richtig? Danke für eure Hilfe

2 Jörg Kruse

Hallo und willkommen hier im Forum :)

wann bewegen sich die divs nicht mit den Buttons - wenn man das Fenster vergrößert? ich kenne den Gesamtaufbau nicht, allein anhand des Beispielcodes lässt sich das Problem für mich nicht reproduzieren - grundsätzlich würde ich zwei Dinge probieren:

1. alle betreffenden Layer mit relativer Positionierung in einem Layer unterbringen, und diese dort mit float:left und/oder float:right nebeneinander positionieren

2. alle betreffenden Layer absolut positionieren (also auch das Menü-Layer)

falls beides das Prooblem nicht löst, würde der Gesamtcode (inklusive CSS) oder ein Link zu einer Testseite vielleicht weiterhelfen

3 Alex Nowak

Hi Jörg!

VIELEN DANK für deine Antwort. Du hast natürlich recht gehabt, ich hab einige meiner Layer relativ positionieren müssen, dann hat es geklappt.
Du hast mir ziemlich aus meiner Blockade geholfen.

Bis heute war mir auch nicht klar, dass man Negativwerte (-100px) zur Positionierung verwenden kann. das nur am Rande erwähnt, vielleicht hilfts ja jemand.

Das vorläufige Ergebnis kannst du hieransehen.
Die DIVs wegen denen ich gepostet habe erscheinen bei Schnellsuche und Schriftgröße (oberes Menü).

Jetzt hab ich allerdings das Problem, dass man nach unten scrollen kann, obwohl dort unten kein Inhalt mehr zu sehen ist. Dem Phänomen bin ich noch nicht ganz auf die Schliche gekommen ;)

Danke nochmal.

4 Jörg Kruse

Nimm statt der verwendeten Doctype-Angabe mal diese:

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

HTML 4.0 ist veraltet und kann immer wieder mal auch zu Anzeige-Problemen führen, so auch in diesem Fall

5 Alex Nowak

In dem Fall hat es leider nichts genutzt.

Stimmt nicht, das kann man so auch nicht sagen. Jetzt positioniert der IE die Layer wenigstens gleich wie FF und NS. Scrollen geht trotzdem noch.

Danke!

6 Jörg Kruse

Stimmt, da war ich zu voreilig - bei einem Test verschwand der Scrollbalken nur in Opera, in Firefox wurde er zwar kürzer, aber unterhalb ist immer noch Platz :/. Das grundsätzliche Problem bei einer Verschiebung mit position:relative ist wohl, dass der ursprüngliche Platz freigehalten wird, auch wenn er gar nicht mehr benötigt wird. Mir fällt grad leider auch keine Möglichkeit ein, wie man diesen Leerraum bei allen Browsern wegbekommt, vielleicht kennt jemand anders noch einen Weg

Falls du alternativ doch nochmal ausprobieren möchtest, die Layer absolut zu positionieren, könnte man diese folgendermaßen zentrieren:

<div id="aussen" style="position:absolute; top:80px; text-align:center">
<div id="innen" style="width:765px; margin:auto">
  <div id="search" class="search" style="visibility:hidden; height:20px; z-index:5; background-color: #F9F8EF; border-width:1px; border-color:#000000; border-style:solid; padding:3px; margin-left: 479px;"> </div>
 <div id="fontsize" class="fontsize" style="visibility:hidden; height:60px; z-index:5; background-color: #F9F8EF; border-width:1px; border-color:#000000; border-style:solid; padding:3px; margin-left: 696px; width: 87px;"> </div>
</div>
</div>

Über den äußeren Layer #aussen erfolgt die absolute Positionierung nach oben hin, der zweiten Layer #innen wird in dem äußeren zentriert (margin:auto) und mit derselben Breite versehen wie der Layer #container. Die Layer #search und #fontsize werden wiederum mithilfe von margin-left innerhalb von #innen nach links ausgerichtet. Die horizontalen Abstände sollten auf diese Weise dieselben sein wie beim Menü, auch wenn die Fenstergröße verändert wird

7 Jörg Kruse

Korrektur:

damit #search und #fontsize auf gleicher Höhe liegen, sollte man sie in getrennte absolut positionierte Layer unterbringen:

<div class="aussen" style="position:absolute; top:80px; text-align:center">
<div class="innen" style="width:765px; margin:auto">
 <div id="search" class="search" style="visibility:hidden; height:20px; z-index:5; background-color: #F9F8EF; border-width:1px; border-color:#000000; border-style:solid; padding:3px; margin-left: 479px;"> </div>
</div>
</div>

<div class="aussen" style="position:absolute; top:80px; text-align:center">
<div class="innen" style="width:765px; margin:auto">
<div id="fontsize" class="fontsize" style="visibility:hidden; height:60px; z-index:5; background-color: #F9F8EF; border-width:1px; border-color:#000000; border-style:solid; padding:3px; margin-left: 696px; width: 87px;"> </div>
</div>
</div>

8 Alex Nowak

WOW!!!

Du hast es tatsächlich hinbekommen! Ich bin echt schwer beeindruckt.
Ich habs noch ein bisschen verändert, damit es auch der IE checkt, der die Layer sonst irgendwo außerhalb der Seite positioniert hat und mit dem z-index nicht mehr zurecht gekommen ist...Naja, er kanns halt nicht besser ;)

<div class="aussen" style="position:absolute; top:80px; left:0px; text-align:left; z-index:4;">
  <div class="innen" style="width:765px;">
    <div id="search" class="search" style="visibility:hidden; margin-left:479px; position:absolute; z-index:5;">
INHALT
    </div>
  </div>
</div>

Auf jeden Fall hab ichs dir zu verdanken, dass ich heute ruhig schlafen kann und am Wochenende keinen Stress habe.
Riesen Danke, Jörg!

9 Jörg Kruse

Freut mich, dass es jetzt funktioniert :)

nach oben

floating boxes

Beitrag schreiben (als Gast)