div height 100% @ tutorials.de: Tutorials, Forum & Hilfe

crashx · 17.07.08 21:12

Ich habe ein DIV um die Website zusammen zu halten.
Nun wollte ich ein background-image hinzufügen, was auch prächtig funktioniert hat.
Doch wenn der Seiteninhalt grösser ist als das Fenster und man Scrollen muss, geht das DIV nicht mit, sprich bleibt bei den 100% fenster grösse stehen.

Problem taucht bei FF 2.0, 1.5 und bei den Netscape Browsern auf.

PRoblem wird der <div class="holder"> sein
CSS:

Code :

html, body{
  margin: 0 auto;
  border: 0px;
  padding: 0px;
  text-align: center;
  font-family: arial;
  background-image: url(../images/back_v.jpg);
  background-repeat: repeat-x;
  font-size: 12px;
}
a:link, a:visited, a:active{
  color: #000000; 
  text-decoration: none; 
}
a:hover{
  color: #999999;
  text-decoration: none;
}
img{
  margin: 0 auto;
  border: 0px;
}
div.holder{
  margin: 0 auto;
  padding: 0px;
  border: 0px;
  width: 800px;
  height: 101%;
  background-image: url(../images/back_h.jpg);
  background-repeat: repeat-y;
  display: block;
}
div.top{
  margin: 0 auto;
  border: 0px;
  padding: 0px;
  width: 800px;
  height: 180px;
  background-image: url(../images/top.jpg);
}
div.top_content1{
  margin: 130px 0 0 0;
  border: 0px;
  padding: 0px;
  width: 723px;
  text-align: right;
  float: left;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 2px;
}
div.top_content2{
  margin: 10px 0 0 0;
  border: 0px;
  padding: 0px;
  width: 723px;
  text-align: right;
  float: left;
  font-size: 13px;
  letter-spacing: 0px;
}
div.content{
  margin: 0 auto;
  border: 0px;
  padding: 0px;
  width: 650px;
  text-align: left;
}

PHP:

PHP-Code:


<?php
include('com/connect.php');
echo '<html>';
  echo '<head>';
    echo '<link href="css/layout.css" rel="stylesheet" type="text/css" />';
  echo '</head>';
  echo '<body>';
    echo '<div class="holder">';
      echo '<div class="top">';
        echo '<div class="top_content1">';
          echo 'Wirte der Willisauer Napfregion';
        echo '</div>';
        echo '<div class="top_content2">';
          $sql = "SELECT * FROM `navigation`
                  ORDER BY `pos` ASC
                 ";
          $result = mysql_query($sql);
          while($row = mysql_fetch_array($result)){
              echo '<a href="'.$row['url'].'">';
                echo $row['titel'];
              echo '</a>&nbsp;|&nbsp;';
          }
        echo '</div>';
      echo '</div>';
      echo '<div class="content">';
        //-------content--------------------------------------------
        
        $string = $_SERVER['PHP_SELF'];
        $string = explode('/', $string);
        $sql = "SELECT * FROM `content`
                WHERE `allocate` = '".mysql_real_escape_string($string[2])."'
                ORDER BY `pos` ASC
               ";
        $result = mysql_query($sql);
        while($row = mysql_fetch_array($result)){
          if($row['class'] == 'titel'){
            echo '<div class="'.$row['class'].'">';
              echo nl2br($row['text']);
            echo '</div>';
          }
          if($row['class'] == 'design1'){
            echo '<div class="'.$row['class'].'">';
              echo nl2br($row['text']);
            echo '</div>';
          }
          if($row['class'] == 'design2'){
            echo '<div class="'.$row['class'].'">';
              echo nl2br($row['text']);
            echo '</div>';
            echo '<div class="'.$row['class'].'_img">';
              echo '<a href="#" OnClick="javascript: fenster(\'pcview.php?img='.$row['img0'].'&i=img0\',\'Picture view 1.0\',600,500)">';
                echo '<img src="thumb/thumb_'.$row['img0'].'">';
              echo '</a>';
            echo '</div>';
          }
          if($row['class'] == 'design3'){
            echo '<div class="'.$row['class'].'_img">';
              echo '<a href="#" OnClick="javascript: fenster(\'pcview.php?img='.$row['img0'].'&i=img0\',\'Picture view 1.0\',600,500)">';
                echo '<img src="thumb/thumb_'.$row['img0'].'">';
              echo '</a>';
            echo '</div>';
            echo '<div class="'.$row['class'].'">';
              echo nl2br($row['text']);
            echo '</div>';
          }
          if($row['class'] == 'design4'){
            echo '<div class="'.$row['class'].'">';
              echo nl2br($row['text']);
            echo '</div>';
            echo '<div class="'.$row['class'].'_img">';
              echo '<a href="#" OnClick="javascript: fenster(\'pcview.php?img='.$row['img0'].'&i=img0\',\'Picture view 1.0\',600,500)">';
                echo '<img src="thumb/thumb_'.$row['img0'].'">';
              echo '</a>';
            echo '</div>';
            echo '<div class="'.$row['class'].'_img">';
              echo '<a href="#" OnClick="javascript: fenster(\'pcview.php?img='.$row['img1'].'&i=img1\',\'Picture view 1.0\',600,500)">';
                echo '<img src="thumb/thumb_'.$row['img1'].'">';
              echo '</a>';
            echo '</div>';
          }
          if($row['class'] == 'design5'){
            echo '<div class="'.$row['class'].'">';
              echo nl2br($row['text']);
            echo '</div>';
            echo '<div class="'.$row['class'].'_img">';
              echo '<a href="#" OnClick="javascript: fenster(\'pcview.php?img='.$row['img0'].'&i=img0\',\'Picture view 1.0\',600,500)">';
                echo '<img src="thumb/thumb_'.$row['img0'].'">';
              echo '</a>';
            echo '</div>';
          }
          if($row['class'] == 'design6'){
            echo '<div class="'.$row['class'].'_img">';
              echo '<a href="#" OnClick="javascript: fenster(\'pcview.php?img='.$row['img0'].'&i=img0\',\'Picture view 1.0\',600,500)">';
                echo '<img src="thumb/thumb_'.$row['img0'].'">';
              echo '</a>';
            echo '</div>';
          }
        }
        
        //---------------------------------------------------------
      echo '</div>';
    echo '</div>';
  echo '</body>';
echo '</html>';
?>

Anbei noch eine Visuelle darstellung des problemes.

Danke für euer Hilfe.

**Quaese** · 17.07.08 23:56

Hi,

mal ein Versuch ins Blaue hinein.

Du hast im Element holder eine feste Höhe zugewiesen. Hier solltest du besser mit min-height für moderne Browser arbeiten.

Code :

div.holder{
  margin: 0 auto;
  padding: 0px;
  border: 0px;
  width: 800px;
  height: auto !important; /* moderne Browser */
  height: 101%; /* IEs - Höhe wird an den Inhalt angepasst */
  min-height: 101%;  /* minimale Höhe für moderne Browsern */
  background-image: url(../images/back_h.jpg);
  background-repeat: repeat-y;
  display: block;
}

Sollte damit das Problem nicht gelöst sein, bitte den geparsten Quellcode posten - der PHP-Code mit den Datenbankabfragen und Includes hilft da nur bedingt weiter.

Ciao
Quaese

crashx · 18.07.08 00:50

Danke für die Antwort.

Ich konnte das Problem eingrenzen, und es hat nicht mit dem div.holder zu tun, sondern mit float: left;

in den von der datenbank geholten inhalten.
CSS:

Code :

div.design4{
  margin: 0 0 6px 10px;
  padding: 0px;
  border: 0px;
  width: 580px;
  text-align: justify;
}
  div.design4_img{
    margin: 0 0 6px 10px;
    padding: 0px;
    border: 0px;
    width: 290px;
    float: left;
  }

PHP-Code:


if($row['class'] == 'design4'){

            echo '<div class="'.$row['class'].'">';

              echo nl2br($row['text']);

            echo '</div>';

            echo '<div class="'.$row['class'].'_img">';

              echo '<a href="#" OnClick="javascript: fenster(\'pcview.php?img='.$row['img0'].'&i=img0\',\'Picture view 1.0\',600,500)">';

                echo '<img src="thumb/thumb_'.$row['img0'].'">';

              echo '</a>';

            echo '</div>';

            echo '<div class="'.$row['class'].'_img">';

              echo '<a href="#" OnClick="javascript: fenster(\'pcview.php?img='.$row['img1'].'&i=img1\',\'Picture view 1.0\',600,500)">';

                echo '<img src="thumb/thumb_'.$row['img1'].'">';

              echo '</a>';

            echo '</div>';

          }

wenn ich den Wert float: left; weg lasse zeigt es mir das div.holder über die ganze Seite an, jedoch stimmt die positionierung der <div class="'.$row['class'].'_img"> nicht mehr da zwei neben einander angezeigt werden.

vielleicht hierzu jemand einen hilfreichen tipp.

**Quaese** · 18.07.08 10:01

Hi,

stelle vor dem Schliessen des Contentbereichs den normalen Textfluss (clear: both) wieder her.

CSS:

Code :

.clearDiv{ font-size: 1px;
           line-height: 0em;
           height: 0;
           clear: both;}

PHP/HTML:

Code :

<?php
include('com/connect.php');
echo '<html>';
  echo '<head>';
    echo '<link href="css/layout.css" rel="stylesheet" type="text/css" />';
  echo '</head>';
  echo '<body>';
    echo '<div class="holder">';
      echo '<div class="top">';
        echo '<div class="top_content1">';
          echo 'Wirte der Willisauer Napfregion';
        echo '</div>';
        echo '<div class="top_content2">';
          $sql = "SELECT * FROM `navigation`
                  ORDER BY `pos` ASC
                 ";
          $result = mysql_query($sql);
          while($row = mysql_fetch_array($result)){
              echo '<a href="'.$row['url'].'">';
                echo $row['titel'];
              echo '</a>&nbsp;|&nbsp;';
          }
        echo '</div>';
      echo '</div>';
      echo '<div class="content">';
        //-------content--------------------------------------------
        // ...        
        //---------------------------------------------------------
        [B]echo("<div class=\"clearDiv\">&nbsp;</div>");[/B]
      echo '</div>';
    echo '</div>';
  echo '</body>';
echo '</html>';
?>

Im Übrigen wäre es schön gewesen, wenn du den geparsten Quellcode gepostet hättest.

Ciao
Quaese

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

Mehrspaltiges Layout: Probleme mit min-height:100% bzw height:100%

height=100%

IE Height 100%

height:100%

min-height und IE

E-Mail:

Abonnieren Abbestellen