div

    Hallo liebes Forum,

    Ich habe auf meiner Seite einen <div> Container gesetzt, um darin mit absoluter und relativer Position mehrere Objekte (Grafik, Buttons) zu platzieren.
    Obwohl alle diese Objekte nicht einmal den Platz von 800 mal 600 Pixel benötigen, vergrößert sich das <div> von selbst auf eine Größe, daß ich zum Schluß bei einer Bildschirmauflösung von 1280 mal 1024Scrollbalken rechts und untem am Bildschirm habe, obwohl dort definitiv nur leerer Platz ist, wo dieser Mehrraum durch das <div> produziert wird.

    Was ist da los...
    Wie groß der Rahmen des <div> ist, ist gut in der Entwurfsansicht Dreamweaver einzusehen. Auch lassen sich dort die Höhe und Breite nicht wirklich beeinflussen.

    Bitte um Hilfe.

    Ich habe Unterseiten im Fireworks erstellt, als HTML exportiert und lade sie auf eine Seite (Gesamtseite )zusammen:


    DIE GEDAMTSEITE:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>main</title>


    <link rel="stylesheet" type="text/css" href="../../css/css.css" />
    <script type="text/javascript" src="../../js/main.js"></script>
    <style type="text/css">
    <!--
    -->
    </style>
    </head>

    <body onLoad="MM_preloadImages('../pictures/energie_f2.gif','../pictures/kristalle_f2.gif','../pictures/bachblueten_f2.gif','../pictures/beratung_f2.gif','../pictures/indikationen_f2.gif','../pictures/arbeitsablauf_f2.gif','../pictures/ich_f2.gif','../pictures/kontakt_f2.gif')">

    <div id="panel">
    <table border="0" cellpadding="0" cellspacing="0" width="141">

    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>

    <tr>
    <td colspan="4"></td>
    <td></td>
    </tr>
    <tr>
    <td rowspan="10" colspan="2"></td>
    <td></td>
    <td rowspan="16"></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td rowspan="6"></td>
    <td colspan="2"></td>
    <td></td>
    </tr>
    <tr>
    <td colspan="2"></td>
    <td></td>
    </tr>
    <tr>
    <td rowspan="4"></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    </tr>
    </table>

    <iframe name="info" frameborder="1" width="100%" height="100%"></iframe>
    </div>

    </body>
    </html>


    DAS PANEL

    <html>
    <head>
    <title>panel.gif</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">td img {display: block;}</style>

    <script language="JavaScript1.2" type="text/javascript">
    <!--
    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_swapImage() { //v3.0
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }

    function MM_preloadImages() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }

    //-->
    </script>
    </head>
    <body bgcolor="#ffffff" onload="MM_preloadImages('../pictures/energie_f2.gif','../pictures/kristalle_f2.gif','../pictures/bachblueten_f2.gif','../pictures/beratung_f2.gif','../pictures/indikationen_f2.gif','../pictures/arbeitsablauf_f2.gif','../pictures/ich_f2.gif','../pictures/kontakt_f2.gif');">
    <table border="0" cellpadding="0" cellspacing="0" width="141">

    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>

    <tr>
    <td colspan="4"></td>
    <td></td>
    </tr>
    <tr>
    <td rowspan="10" colspan="2"></td>
    <td></td>
    <td rowspan="16"></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td rowspan="6"></td>
    <td colspan="2"></td>
    <td></td>
    </tr>
    <tr>
    <td colspan="2"></td>
    <td></td>
    </tr>
    <tr>
    <td rowspan="4"></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    </tr>
    </table>
    </body>
    </html>


    DER SCREEN

    <html>
    <head>
    <title>screen</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    </head>
    <body bgcolor="#ffffff">
    </body>
    </html>


    DIE CSS-Datei


    /* CSS Document */

    #panel {
    position:absolute;
    top:100px;
    left:40px;
    height: 595px;
    width: 864px;
    }

    #screen {
    position:relative;
    top:-350px;
    left:200px;
    height:400px;
    }

    iframe {position:relative; top:-710px; left:220px; width:600px; height:350px}


    DIE JS-DATEI:


    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_swapImage() { //v3.0
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }

    function MM_preloadImages() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }


    VIELEN DANK im Voraus, DarkSyranus

    johndo,

    oh je so wird das nix. Das sind insgesamt 3 html Seiten, eine CSS-Datei und eine JS-Datei. Eine HTML Seite hat nur 1x folgenden Aufbau:

    HTML
    <html>
<head>
<title>screen</title>
</head>
<body>
</body>
</html>

    Du kannst das nicht so zusammenklicken!!

    Gruß yeti66 :wink:

    Hallo yeti66,


    nun, wie eine HTML-Seite aufgebaut ist, weiß ich.
    CSS und JS lagere ich aber gerne aus, damit die HTML-Seite nicht unübersichtlich übervoll wird.

    Was das Zusammenstückeln der HTML Seiten betrifft, nun, die erstelle ich einzeln im Fireworks und von dort werden sie in einzelne HTML-Seiten exportiert. Danach koppiere ich mir jeweils den notwendigen Code aus den Einzelseiten in die Hauptseite, was normalerweise funktioniert, da nicht anderes passiert, als ein Verweis auf die Bilder, wo sie liegen. Ich denke nicht, das dieser übergroße, falsch dargestellte <DIV> -Container daran liegt, aber ich lasse micht gerne inspierieren und probiere gerne etwas anderes aus. Sollte es funktinieren, dann meinen Dank.

    Irgendwelche Vorschläge...

    Thanx & Greatings

    johndo,

    Naja das ist etwas verwirrend. Ich dachte Du hast den ganzen obigen Quellcode auf eine html-seite gebracht. Also mit DOCTYPE und dem CSS macht er (der #panel-conatiner ) doch was er soll, oder meinst Du etwas anderes.!!??

    Gruß yeti66 :wink:

    Hallo Leute,

    sorry yeti66, ja, mag tatsächlich verwirrend gewesen sein, aber wie gesagt, soweit bin ich des Webdesignens mächtig.
    Nun, macht <Div> eben nicht. Denn das PANEL selbst hat jetzt, sagen wir mal, Breite * Höhe 150*500 pixel, der SCREEN hat 700*400 Pixel, und der IFRAME über den SCREEN drübergelegt auch etwa 690*390 Pixel, dazu noch unter dem SREEN plaziert zwei Buttons die nicht groß sind.

    Und dennoch wirft der Browser bei einer Auflösung von 1027*768 rechts am Bildschirmrand und unten am Bildschirmrand einen Scrollbalken aus, so, als würde etwas über den Rand hinausreichen. Was es aber zusammengerechnet niemals macht.
    Und wenn ich dann in der Entwurfsansicht Dreamweaver nachsehe, wo man den Rahmen des <DIV> ansehen kann, macht sich dieser immer viel größer, als er eigentlich ist, und läßt sich auch mit Fixangaben nicht zurechtstutzen.

    johndo,

    besser Du meldest Dich im Forum immer erst an, sonst postest Du im eigenen Thread als Gast.

    Hier noch mal ein zentrierte Lösung. und da ragt nichts über irgendwas hinaus. Mit einer CSS-NAVI könntetst Du auch das JS weglassen.

    Gruß Yeti66 :wink: