Problem mit Höhe der Div-tags @ tutorials.de: Tutorials, Forum & Hilfe

poli-dori · 04.01.06 18:54

Hallo,

schaut euch mal bitte diese seite an.

Die Seite ist mit Templates und CSS aufgebaut. Ihr seht das ich da 4 Boxen habe. In 3 ist eine Flashfilm drin, in der einen oben rechts nichts (sie ist gelb). Zudem Erkennt ihr einen Balken (© 2006 RADIO COMPANY - COMPANY GROUP ) der offensichtlich nichts an dieser Stelle zu tun hat. Genau dieser Balken ist das Problem. Der Balken Besteht natürlich aus Divs und ist in eine unsichtbare Box (#content) eingeschachtelt. Diese Box beinhaltet auch den editierbaren Bereich des Templates und ein include() welches eine externe PHP-Datei reinlädt. Am include() liegt das problem nicht, denn ich habe es auch damit probiert, den Inhalt der includeten Datei direkt in die index.php reinzupacken.

Laut CSS soll der Balken immer einige Pixel unterhalb des "bottoms" von #content sein. Wenn ich #content mit einer Grafik oder einem Flashfilm auffülle (wie z.B. hier) dan funktioniert das auch. Aber wenn in #content weitere Divs (mit einer bestimmten Höhe) auftreten, scheint das die Höhe von #content nicht zu beeinflussen und der Balken bleibt oben.

CSS der index.php:

PHP-Code:


  html {    
        height: 100%;
        overflow-y: scroll;
        overflow: -moz-scrollbars-vertical 
    }
    body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        background-image: url(../images/bg.gif);
        background-repeat: repeat-y;
        background-position: center top;
        background-attachment: fixed;
        }
    #main_bg {
        font-family: Arial, Helvetica, sans-serif;
        height: 100%;
        width: 778px;
        position: absolute;
        left: 50%;
        margin-left: -389px;
    }
    #top {
        height: 100px;
        width: 738px;
        background-color: #CCCCCC;
        position: absolute;
        left: 18px;
        top: 13px;
        border: 1px solid #999999;
        padding: 1px;
    }
    #top_in {
        height: 90px;
        width: 728px;
        background-color: #FFFFFF;
        position: absolute;
        left: 1px;
        top: 1px;
        padding: 5px;
    }
    #high {
        width: 130px;
        height: 610px;
        background-color: #CCCCCC;
        top: 133px;
        position: absolute;
        right: 18px;
        border: 1px solid #999999;
        padding: 1px;
    }
    #high_in {
        width: 120px;
        height: 600px;
        background-color: #FFFFFF;
        top: 1px;
        position: absolute;
        right: 1px;
        padding: 5px;
    }
    #power {
        width: 590px;
        height: 212px;
        background-color: #CCCCCC;
        top: 133px;
        position: absolute;
        left: 18px;
        border: 1px solid #999999;
    }
    #power_in {
        width: 588px;
        height: 210px;
        background-color: #FFFFFF;
        top: 1px;
        position: absolute;
        left: 1px;
    }
    #power_adv {
        width: 180px;
        height: 150px;
        background-color: #FFFFFF;
        position: absolute;
        right: 5px;
        bottom: 5px;
    }
    #power_login {
        width: 180px;
        height: 45px;
        background-color: #FFFFFF;
        position: absolute;
        right: 4px;
        top: 5px;
        text-align: right;
    }
    #menu {
        width: 405px;
        height: 214px;
        background-color: #FFFFFF;
        top: -1px;
        position: absolute;
        left: -1px;
    }
    #content {
        width: 590px;
        top: 363px;
        position: absolute;
        left: 18px;
    }
    #credits {
        width: 590px;
        height: 30px;
        background-color: #CCCCCC;
        bottom: -48px;
        position: absolute;
        left: 0px;
        border: 1px solid #999999;
    }
    #credits_in {
        width: 578px;
        height: 18px;
        background-color: #FFFFFF;
        top: 1px;
        position: absolute;
        left: 1px;
        padding: 5px;
    }
    #bottomspacer {
        width: 1px;
        height: 50px;
        top: 0px;
        position: absolute;
        left: 0px;
    }
    #wr_top {
        width: 264px;
        height: 34px;
        background-color: #999999;
        top: 16px;
        position: absolute;
        left: 16px;
    }
    #energy {
        width: 262px;
        height: 262px;
        background-color: #CCCCCC;
        top: 66px;
        position: absolute;
        left: 16px;
        border: 1px solid #999999;
    }
    #energy_in {
        width: 250px;
        height: 250px;
        background-color: #FFFFFF;
        top: 1px;
        position: absolute;
        left: 1px;
        padding: 5px;
    }
    #wr_player {
        width: 262px;
        height: 79px;
        background-color: #CCCCCC;
        top: 346px;
        position: absolute;
        left: 16px;
        border: 1px solid #999999;
    }
    #wr_player_in {
        width: 250px;
        height: 67px;
        background-color: #FFFFFF;
        top: 1px;
        position: absolute;
        left: 1px;
        padding: 5px;
    }
    .stile1 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10px;
        font-style: normal;
        line-height: 15px;
        font-weight: normal;
        font-variant: normal;
        color: #333333;
        text-transform: uppercase;
        vertical-align: middle;
    }

CSS der includeten Datei:

PHP-Code:


  body {
      margin-left: 0px;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
  }
  #bg {
      background-color: #99FFFF;
      position: absolute;
      width: 100%;
      left: 0px;
      top: 0px;
  }
  #box_1 {
      background-color: #FFFFCC;
      position: absolute;
      height: 164px;
      width: 288px;
      left: 0px;
      top: 0px;
  }
  #box_2 {
      background-color: #FFFFCC;
      position: absolute;
      height: 164px;
      width: 288px;
      left: 304px;
      top: 0px;
  }
  #box_3 {
      background-color: #FFFFCC;
      position: absolute;
      height: 164px;
      width: 288px;
      left: 0px;
      top: 180px;
  }
  #box_4 {
      background-color: #FFFFCC;
      position: absolute;
      height: 164px;
      width: 288px;
      left: 304px;
      top: 180px;
  }

HTML:

PHP-Code:


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html><!-- InstanceBegin template="/Templates/template_1.dwt" codeOutsideHTMLIsLocked="false" -->
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>RADIO COMPANY</title>
    <link href="css/index.css" rel="stylesheet" type="text/css" />
    <!-- InstanceEndEditable -->
    <link href="css/company1.css" rel="stylesheet" type="text/css" />
    <!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
    
    <script language="JavaScript">
    function openNewWindow(URLtoOpen,windowName, windowFeatures) {
    newWindow=window.open(URLtoOpen, windowName, windowFeatures); }
    </script>
    
    </head>
    
    <body>
    <div id="main_bg">
    <div id="top">
    <div id="top_in">
    <?php include'inc_company_top.php' ?>
    </div>
    </div>
    <div id="high">
    <div id="high_in">
    <?php include'inc_company_high.php' ?>
    </div>
    </div>
    <div id="power">
    <div id="power_in">
    <div id="power_adv">
    <?php include'inc_company_power.php' ?>
    </div>
    <div id="power_login">
    <?php include'inc_login.php' ?>
    </div>
    </div>
    <div id="menu">
 <object classid="clsid:-)27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="405" height="214">
    <param name="movie" value="swf/menu.swf">
    <param name="quality" value="high">
    <param name="menu" value="false">
 <embed src="swf/menu.swf" width="405" height="214" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" menu="false"></embed>
    </object>
    </div>
    </div>
    <div class="stile1" id="content">
    <!-- InstanceBeginEditable name="content" --><?php include'inc_index.php' ?><!-- InstanceEndEditable -->
    <div id="credits">
    <div id="bottomspacer"></div>
    <div class="stile1" id="credits_in">
    <div align="right">&copy; 2006 RADIO COMPANY - COMPANY GROUP </div>
    </div>
    </div>
    </div>
    </div>
    </body>
    <!-- InstanceEnd --></html>

Kann mir bitte jemand erklären was ich da falsch mache?

Maik · 04.01.06 19:37

Zitat von poli-dori

Kann mir bitte jemand erklären was ich da falsch mache?

Wenn die 4 Boxen in dem DIV#content absolut positioniert sind und somit aus dem normalen Textfluss genommen wurden, dann muß das 'nachfolgende' DIV mit der Copyright-Angabe ebenfalls in dem Parent-DIV positioniert werden.

Da in der zweiten Beispiel-Seite das Flash-File nicht in dem DIV#content positioniert ist, wird der 'Balken' auch darunter im Textfluss angezeigt.

poli-dori · 04.01.06 19:47

Doch, auch in der 2. Setie befindet sich das Flasfile innerhalb von #content.

PHP-Code:


<div class="stile1" id="content">

<!-- InstanceBeginEditable name="content" -->

                        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="592" height="524">

                          <param name="movie" value="swf/fortyssimi.swf">

                          <param name="quality" value="high">

                          <param name="menu" value="false">

                          <embed src="swf/fortyssimi.swf" width="592" height="524" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" menu="false"></embed>

    </object>

    <!-- InstanceEndEditable -->

<div id="credits">

<div id="bottomspacer"></div>

<div class="stile1" id="credits_in">

<div align="right">&copy; 2006 RADIO COMPANY - COMPANY GROUP </div>

</div>

</div>

</div>

Maik · 04.01.06 19:51

Ja, aber die Flash-Datei ist ohne (feste) Positionsangaben in dem DIV#content eingebettet

[editpost]

Dieses einfache Beispiel soll dir den Sachverhalt verdeutlichen:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
div#position
{
position: absolute;
left: 50px;
top: 100px;
width: 200px;
height: 200px;
background: #dfdfdf;
}

div#no_position
{
background: #afafaf;
}
-->
</style>

</head>
<body>

<div id="position">position</div>

<div id="no_position">no position</div>

</body>
</html>

poli-dori · 05.01.06 10:14

Hi,

ok, das habe ich verstanden. Ich verstehe aber nicht was ich jetzt in meiner CSS bzw. HTML-Datei verändern kann damit es ...

Kannst du mir einen weiteren Tip geben bitte?

Maik · 05.01.06 10:17

Habe ich doch schon gestern Abend ... das DIV muß ebenfalls mit Positionsangaben in dem DIV#content eingebettet werden.

poli-dori · 05.01.06 10:42

Das Flashfile liegt darin ohne Positionsangaben, weil es in keinem weiterem DIV eingebettet ist. So weit so gut. Dabei verhält sich der Balken mit den Credits (id="credits") so wie ich es aben möchte.
Die vier Boxen haben doch eine feste Positionsangabe.

PHP-Code:


  #box_1 {

       background-color: #FFFFCC;

       position: absolute;

       height: 164px;

       width: 288px;

       left: 0px;

       top: 0px;

   }

und sie werden innerhalb des editierbaren Bereiches geladen.
Der editierbare Bereich befindet sich innerhalb von #content. Sollte ich das eher umgekehrt machen? Sprich #content in den editierbaren Bereich setzen?
Sonst verstehe ich nichtwas du meinst.
Der Creditsbalken gehört zum Template.

Liegt das Problem vielleicht trotzdem u.a. am:
<?php include'inc_index.php' ?>
?

Maik · 05.01.06 10:57

So wie ich das anhand deines CSS- und HTML-Codes überblicke, hast du zwei Möglichkeiten:

Das DIV außerhalb des DIV#content notieren.
Das DIV mit Positionsangaben im DIV#content notieren.

Anhaltspunkt sind die beiden unteren Boxen box3 und box4, für die du folgende gleichen Angaben gemacht hast:
Code :
1 2 3
position: absolute; top: 180px; height: 164px;
Folglich würde die Positionsangabe für das DIV lauten:
Code :
1 2 3
position: absolute; top: 360px; /* = 180px + 164px +16px */ left: 0px;

poli-dori · 05.01.06 11:28

Mit dieser Methode klappt es für die Startseite, aber für die anderen leider nicht:

Link 1
Link 2
Link 3

Verdammt!!

In #content werden immer unterschiedlich hohe Seiten reingeladen. Der Creditsbalken sollte sich daran eben anpassen. und immer 16px unterhalb dess "bottom" von #content sein.

So langsam werde ich auf CSS verzichten (was die includeten seiten betrifft) und auf die gute alte Tabelle zurückgreifen!
Was denkst du?

Maik · 05.01.06 11:40

Da der Inhalt in allen Seiten unterschiedlich groß / lang ist, empfiehlt es sich, die DIVs nicht absolut zu positionieren, sondern 'normal' in dem Parent-DIV einzubetten, dann hängt der Credit-Balken auch immer automatisch unter ihnen.

Das zweispaltige Layout (box1/box2 und box3/box4) liesse sich mit zwei nebeneinander floatenden DIVs realisieren, in denen jeweils die untereinanderliegenden Boxen eingebettet werden, also in der linken Spalte box1 + box3 und in der Rechten box2 + box4.

[editpost]

Ich hänge mal ein Beispiel an

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
#content {
         width: 590px;
}

div.leftCol {
            float: left;
            width: 288px;
}

div.rightCol {
             float: right;
             width: 288px;
}

#box_1, #box_2, #box_3, #box_4 {
      background-color: #FFFFCC;
      height: 164px;
      width: 288px;
      margin: 16px 0 16px 0;
}

#credits {
  clear: left;
  background-color: #FFFFCC;
}
-->
</style>

</head>
<body>

<div id="content">
     <div class="leftCol">
          <div id="box_1">box 1</div>
          <div id="box_3">box 3</div>
     </div>

     <div class="rightCol">
          <div id="box_2">box 2</div>
          <div id="box_4">box 4</div>
     </div>

     <div id="credits">credits</div>
</div>

</body>
</html>

poli-dori · 05.01.06 15:39

Danke für dein Hilfe,

ich werds gleich testen!

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Problem mit html tags

Problem mit 100%+ Höhe

Höhe und Breite von <a>-Tags in Firefox

Problem mit Höhe im IE

Problem mit HTML Tags in DB

E-Mail:

Abonnieren Abbestellen