Daniela Koller: Divs mit fester Breite zentrieren

Hallo,

Ich habe ein Problem mit Divs, und zwar benötige ich einen Bereich mit fester Breite in der Mitte des
Fensters mit dynamisch austauschbarem Inhalt aus verschiedenen Dateien, er muss zentriert sein
bei jeder Auflösung.

Das funktioniert auch ganz gut, aber sobald ich beim div-tag versuche die Breite festzulegen, kann
ich ihn nicht mehr als Layer ansprechen aus Javascript und Netscape, wenn ich auch noch die Center
Angabe hinzufüge, geht das Ansprechen zwar wieder, aber dafür ist er weder zentriert, noch hat er eine
feste Breite.

Mit IE habe ich es noch nicht getestet (Keiner verfügbar momentan).

Danke im Voraus

Daniela

------------------------------------------------------------------------------------------------------------------
<html>
   <head>
      <title>Normale Seite ohne Titel</title>

<script type="text/JavaScript">
         <!--
         function linken(ziel) {
            var nav = navigator.appName + "";

if (nav.substr(0,1) == "N") {
               window.document.info.src = ziel;
            }
            else {
               document.all.info.innerhtml.src = ziel;
            }
         }
         //-->
      </script>
   </head>

<body bgcolor="#004080" text="#0080C0" link="#000080">

<div id="info" style="position:absolute;top:75px;width=450px;" align="center">
         <p>
            Wird geladen.
         </p>
      </div>
      <a href="#" onClick="linken('test2.html');">
         Test2
      </a>
   </body>
</html>

  1. hi daniela,

    was mir auf anhieb einfallen würde (ohne test), wäre einfach das ganze in einen weitern div-tag zu legen:

    <div align=center>

    dein code

    </div>

    vieleicht funzt das ja *hoff*

    ich achua mir das aber nochmal an und wenn mir keiner zuvor kommt, schreib ich auch noch was dazu :-).

    alles liebe
    ole
    (8-)>

    1. <div align=center>

      dein code

      </div>

      Habs probiert, er übersieht es leider immernoch

      Trotzdem Danke

  2. Hi Daniela,

    mit diesem Code hast du erst mal dein 450 Pixel breites <div>, welches immer in der Mitte des Browserfensters ist. Die Seite funktioniert mit beiden Browsern und ist von mir mit IE5 und NN4.7 auf NT4 getestet wurden. Das <div> richtet sich bei einem resize auch wieder automatisch in der Mitte aus. Der NN stellt nur an Stellen an dehnen Inhalt im <div> ist Hintergrundfarbe dar.

    Die Sache mit dem hereinladen einer *.html in das <div> funktioniert aber nur im NN. Im IE muss man da den Umweg über ein <iframe> gehen. Lies dazu bitte im Archiv oder der Auslese, weil das schon mal diskutiert wurde. Ich habe jetzt leider keine Zeit mehr...

    Viel Spass noch

    ALEX

    ---------------------------------------------------------------------

    <html>
    <head>
      <title>Normale Seite ohne Titel</title>

    <script type="text/JavaScript">
        <!--
         function linken(ziel)
          {
           var nav = navigator.appName + "";

    if (nav.substr(0,1) == "N")
            {
             window.document.info.src = ziel;
            }
           else
            {
             document.all.info.innerhtml.src = ziel;
            }
          }

    function repaint()
          {
           var nav = navigator.appName + "";

    if (nav.substr(0,1) == "N")
            {
             document.info.left = (window.innerWidth - 450) / 2;
            }
           else
            {
             document.all.info.style.pixelLeft = (document.body.offsetWidth - 450) / 2;
             window.status = document.body.offsetWidth;
            }
          }

    //-->
       </script>
    </head>

    <body bgcolor="#FFFFFF" text="#0080C0" link="#000080" onResize="repaint();">

    <div id="info" style="position:absolute;left:300px;top:75px;
                             width:450px;min-width:450px;max-width:450px;
                             background-color:#00FF00;
                             clip:rect(0px 450px 100px 0px);">
        <p>
         Wird geladen.dfjkgbdfkysjgbksyjbfkböfykdjgvbklsdagfblkasbfbfkösajbfkjsbfkjsbfskdjbfvsjkbfvksbcksbvksafbvsklakbflskadbflaskbfashdbvfsavhdfslahdvfslabfaslbdflhsavflashvfavfjalvd
        </p>
       </div>
       <script language="JavaScript">
        <!--
         repaint();
        //-->
       </script>

    <a href="#" onClick="linken('test2.html');">
        Test2
       </a>

    </body>
    </html>

    1. Vielen Dank,

      funktioniert beinahe perfekt. (Lässt sich nicht in eine Tabelle packen, aber mit absoluter Positionierung ist
      das auch gar nicht notwendig).

  3. Hallo Daniela!

    Ich habe ein Problem mit Divs, und zwar benötige ich einen Bereich mit fester Breite in der Mitte des
    Fensters mit dynamisch austauschbarem Inhalt aus verschiedenen Dateien, er muss zentriert sein
    bei jeder Auflösung.

    »»Netscape

    Mit Netscape geht es so:
    Grüße
    Thomas

    <html>
       <head>
          <title>Normale Seite ohne Titel</title>
    <style type="text/css">
    <!--
    #infoa{
    position:absolute;
    top:75px;
    align:center;
    border:none;
    width:470px;
    height:200px;
    }
    #infob {
    position:relative;
    }
    -->
    </style>
          <script type="text/JavaScript">
             <!--
             function linken(ziel) {
                var nav = navigator.appName + "";

    if (nav.substr(0,1) == "N") {
                   document.layers.infoa.document.layers.infob.src = ziel;
                }
         }
             //-->
          </script>
       </head>

    <body bgcolor="#004080" text="#0080C0" link="#000080">

    <div id="infoa">
       <table width="470" cellpadding="0" cellspacing="0" border="0">
       <tr><td>
    <div id="infob">
    wird geladen
    </div>
       </td></tr>
       </table>

    </div>
          <a href="#" onClick="linken('test2.html');">
             Test2
          </a>
       </body>
    </html>

    =========

    1. Hi Thomas,

      leider funktioniert deine Lösung nicht, das Problem ist, das Netsi den Layer (ILayer) zwar ausblankt,
      aber dann nichts mehr darin erscheint.

      Gruss und Danke

      Daniela

      1. Hallo Daniela!

        leider funktioniert deine Lösung nicht,

        also ich habe es mit NS 4.6 getestet und es funktionierte,
        sonst hätte ich es nicht gepostet.

        Tut mir leid, daß es bei dir nicht geht.

        Grüße
        Thomas

        1. Hallo Thomas

          also ich habe es mit NS 4.6 getestet und es funktionierte,
          sonst hätte ich es nicht gepostet.

          Das Problem tritt bei mir erst auf wenn ich versuche dem Layer ein anders Dokument zuzuweisen.
          Ich glaube das Problem ist auch bereits im Forum aufgetaucht, jedoch hat niemand auf diese
          Frage geantwortet. Das Problem tritt mindestens unter 4.61 Englisch und 4.7 Deutsch auf.
          Beim Wechseln der Source wird zwar der neue Hintergrund angezeigt, jedoch nicht der Inhalt.
          Liegt wohl das ich den ILAYER in eine Tabelle gepackt habe, aber ich sehe keine andere Möglichkeit
          das eine andere Spalte genau gleich hoch wird.

          Trotzdem vielen Dank für deine Hilfe

          Daniela

  4. hi,

    also, ich finde am zuverlaessigsten geht sowas, indem Du die Fensterbreite abfragst, und dann den DIV-Layer mit text entsprechend positionierst.
    Moeglicherweise hilft es auch, zwei DIVs ineinander zu verschachteln.
    Zum Fenstergroesse abfragen hab ich da ein kleines Testscript: http://www.kamera-grafik-design.de/fenster.htm
    Vielleicht hilft es Dir weiter.

    Gruesse  Joachim