Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 11

Thema: div

  1. #1
    HTML Newbie
    Registriert seit
    01.11.2006
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard 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.
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Shogun Avatar von DarkSyranus
    Registriert seit
    28.03.2006
    Ort
    ::1/128
    Alter
    25
    Beiträge
    3.446
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    1

    Standard

    Könntest du bitte allen code, der etwas mit dem div, oder dessen inhalt hat posten.
    Vielen Dank

  3. #3
    Gast

    Standard

    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>[img]../pictures/spacer.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    </tr>

    <tr>
    <td colspan="4">[img]../pictures/panel_r1_c1.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    </tr>
    <tr>
    <td rowspan="10" colspan="2">[img]../pictures/panel_r2_c1.gif[/img]</td>
    <td>[img]../pictures/energie.gif[/img]</td>
    <td rowspan="16">[img]../pictures/panel_r2_c4.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    </tr>
    <tr>
    <td>[img]../pictures/panel_r3_c3.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    </tr>
    <tr>
    <td>[img]../pictures/kristalle.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    </tr>
    <tr>
    <td>[img]../pictures/panel_r5_c3.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    </tr>
    <tr>
    <td>[img]../pictures/bachblueten.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    </tr>
    <tr>
    <td>[img]../pictures/panel_r7_c3.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    </tr>
    <tr>
    <td>[img]../pictures/beratung.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    </tr>
    <tr>
    <td>[img]../pictures/panel_r9_c3.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    </tr>
    <tr>
    <td>[img]../pictures/indikationen.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    </tr>
    <tr>
    <td>[img]../pictures/panel_r11_c3.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    </tr>
    <tr>
    <td rowspan="6">[img]../pictures/panel_r12_c1.gif[/img]</td>
    <td colspan="2">[img]../pictures/arbeitsablauf.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    </tr>
    <tr>
    <td colspan="2">[img]../pictures/panel_r13_c2.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    </tr>
    <tr>
    <td rowspan="4">[img]../pictures/panel_r14_c2.gif[/img]</td>
    <td>[img]../pictures/ich.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    </tr>
    <tr>
    <td>[img]../pictures/panel_r15_c3.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    </tr>
    <tr>
    <td>[img]../pictures/kontakt.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    </tr>
    <tr>
    <td>[img]../pictures/panel_r17_c3.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    </tr>
    </table>
    [img]../pictures/screen.gif[/img]
    <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>[img]../pictures/spacer.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    </tr>

    <tr>
    <td colspan="4">[img]../pictures/panel_r1_c1.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    </tr>
    <tr>
    <td rowspan="10" colspan="2">[img]../pictures/panel_r2_c1.gif[/img]</td>
    <td>[img]../pictures/energie.gif[/img]</td>
    <td rowspan="16">[img]../pictures/panel_r2_c4.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    </tr>
    <tr>
    <td>[img]../pictures/panel_r3_c3.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    </tr>
    <tr>
    <td>[img]../pictures/kristalle.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    </tr>
    <tr>
    <td>[img]../pictures/panel_r5_c3.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    </tr>
    <tr>
    <td>[img]../pictures/bachblueten.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    </tr>
    <tr>
    <td>[img]../pictures/panel_r7_c3.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    </tr>
    <tr>
    <td>[img]../pictures/beratung.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    </tr>
    <tr>
    <td>[img]../pictures/panel_r9_c3.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    </tr>
    <tr>
    <td>[img]../pictures/indikationen.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    </tr>
    <tr>
    <td>[img]../pictures/panel_r11_c3.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    </tr>
    <tr>
    <td rowspan="6">[img]../pictures/panel_r12_c1.gif[/img]</td>
    <td colspan="2">[img]../pictures/arbeitsablauf.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    </tr>
    <tr>
    <td colspan="2">[img]../pictures/panel_r13_c2.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    </tr>
    <tr>
    <td rowspan="4">[img]../pictures/panel_r14_c2.gif[/img]</td>
    <td>[img]../pictures/ich.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    </tr>
    <tr>
    <td>[img]../pictures/panel_r15_c3.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    </tr>
    <tr>
    <td>[img]../pictures/kontakt.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</td>
    </tr>
    <tr>
    <td>[img]../pictures/panel_r17_c3.gif[/img]</td>
    <td>[img]../pictures/spacer.gif[/img]</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">
    [img]../pictures/screen.gif[/img]</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

  4. #4
    König(in) Avatar von yeti66
    Registriert seit
    21.10.2005
    Ort
    Harz
    Alter
    51
    Beiträge
    1.152
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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:
    Code:
    <html>
    <head>
    <title>screen</title>
    </head>
    <body>
    </body>
    </html>
    Du kannst das nicht so zusammenklicken!!

    Gruß yeti66
    Gruß yeti66
    ___________________________________________
    http://www.phpcontact.net/ Kontaktformulare für die eigene Hompage
    http://www.norbert-klippstein.de Freiberuflicher Musiker für individuelle Musikdienstleistungen

  5. #5
    Gast

    Standard

    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

  6. #6
    König(in) Avatar von yeti66
    Registriert seit
    21.10.2005
    Ort
    Harz
    Alter
    51
    Beiträge
    1.152
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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
    Angehängte Dateien Angehängte Dateien
    Gruß yeti66
    ___________________________________________
    http://www.phpcontact.net/ Kontaktformulare für die eigene Hompage
    http://www.norbert-klippstein.de Freiberuflicher Musiker für individuelle Musikdienstleistungen

  7. #7
    HTML Newbie
    Registriert seit
    04.11.2006
    Beiträge
    8
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    ansonsten versuch mal ein max-width: 864px; hinzupacken

  8. #8
    Gast

    Standard

    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.

  9. #9
    König(in) Avatar von yeti66
    Registriert seit
    21.10.2005
    Ort
    Harz
    Alter
    51
    Beiträge
    1.152
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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
    Angehängte Dateien Angehängte Dateien
    Gruß yeti66
    ___________________________________________
    http://www.phpcontact.net/ Kontaktformulare für die eigene Hompage
    http://www.norbert-klippstein.de Freiberuflicher Musiker für individuelle Musikdienstleistungen

  10. #10
    HTML Newbie
    Themenstarter

    Registriert seit
    01.11.2006
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Hallo yeti66

    Nun, zentrieren möchte ich durch die Möglicheit der CSS-Position (absolute und relative) umgehen, um flexibel zu bleiben.
    Angehängte Dateien Angehängte Dateien

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •