Hallo, Gast! (Registrieren)

Letzte Ankündigung: MyBB 1.8.38 veröffentlicht (30.04.24)


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
Div Container geht nicht bis ganz nach unten?!
#1
Hallo liebe Community,

ich arbeite gerade an einer Homepage für mein Forum und bin gerade auf ein tierisch blödes Problem gestoßen.

Das Div, wo der Inhalt und alles drin steckt, geht ja weiter nach unten, wenn da mehr Inhalt drin steht.

Nun habe ich dem einen Hintergrund gegeben und border left bzw. right.

Leider, leider geht dieses Div nur bis zum Ende des Browsers und hört dann auf.

Ich wäre euch so sehr dankbar, wenn ihr mir sagen könntet was ich ändern muss, damit es bis nach ganz unten angezeigt wird!

Hier mal die Testwebsite:
http://nintendoworld.bplaced.net/

Code:
Den Code poste ich auch mal eben:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<!-- Datum Anfang -->
<script type="text/javascript">
var Datum2 = new (Date);
var Tag2 = Datum2.getDate();
var Wochentag = Datum2.getDay();
var Monat2 = Datum2.getMonth();
var Jahr2 = Datum2.getFullYear();
var Tagname = new Array("Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag");
var Monatname = new
Array("Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November ","Dezember");
</script>
<!-- Datum Ende -->
<style type="text/css">
html {height:100%;}
body {
background-color:#DDDDDD;
height:100%;
margin:0%;
padding:0%;
}
.u1 {
font-size:18px;
color:#FF0000;
font-weight:bold;
height:31px;
line-height:31px;
padding-left:3px;
vertical-align:middle;
text-align:center
}

div.table {
background-color:#FFFFFF;
margin:0% 10px;
padding:0% 10px;
width:980px;
height:100%;
border-left:1px solid #666666;
border-right:1px solid #666666;
margin:0px auto;
}
div.header {
height:187px;
background-image:url(images/header.jpg);
}
div.navi {
    width:980px;
    height:30px;
    vertical-align:middle;
    float:left;
    text-align: center;
}
div.datum {
width:350px;
height:30px;
line-height:30px;
float:left;
background-image:url(images/bg_buttons.jpg);
}
body,td,th {
    color: #333333;
}
div.navi_in {
    background-image:url(images/bg_buttons_navi.jpg);
    height:30px;
    line-height:30px;
    width:80px;
    vertical-align:middle;
    float:left;
    text-align: center;
}
.button_left, .button_right {
width:15px;
height:30px;
float:left;
}
.button_left {
background-image:url(images/bg_buttons_left.jpg);
}
.button_right {
background-image:url(images/bg_buttons_right.jpg);
}
.frei {
height:15px;
width:980px;
line-height:15px;
float:left
}
.box_abstand {
height:200px;
width:10px;
float:left;
}
.box_demnaechst {
    float:left;
    width:180px;
    height:200px;
    text-align: left;
    background-image:url(images/demnaechst.jpg)
}
.box_contentslider {
float:left;
width:400px;
height:200px;
text-align:left;
background-image:url(images/contentslider.jpg);
}
.box_test {
float:left;
width:380px;
height:200px;
text-align:left;
background-image:url(images/test.jpg);
}
.content_up {
background-image:url(images/body_bg_up.jpg);
width:590px;
line-height:15px;
height:15px;
float:left;
}
.content_down {
background-image:url(images/body_bg_down.jpg);
width:590px;
line-height:15px;
height:15px;
float:left;
}
.content_middle {
background-image:url(images/body_bg_middle.jpg);
width:590px;
text-align:left;
float:left;
vertical-align:text-top;
}
.downdown {
background-image:url(images/down.jpg);
width:980px;
height:50px;
line-height:50px;
float:left;
}
</style>
</head>

<body>
<div class="table">
    <div class="header"></div>
    
    <div class="frei"></div>
    
  <div class="navi">
  <div class="button_left"></div>
  <div class="navi_in">Home</div>
  <div class="navi_in">Community</div>
  <div class="navi_in">Software</div>
  <div class="navi_in">Hardware</div>
  <div class="navi_in">eSports</div>
  <div class="navi_in">Downloads</div>
  <div class="navi_in">Weiteres</div>
  <div class="button_right"></div>
  
  <div style="width:10px; height:30px; float:left;"></div>
  <div class="button_left"></div>
  <div class="datum">Heute ist <script language="JavaScript">document.write(Tagname[Wochentag]+", der "+Tag2+". "+Monatname[Monat2]+" "+Jahr2+" ");</script></div>
  <div class="button_right"></div>
  
  <div class="frei"></div>
  
   <div class="box_demnaechst">
   <div class="u1">Demnächst</div>
   </div>
  
   <div class="box_abstand"></div>
  
   <div class="box_contentslider">
   <div class="u1">Aktuelles</div>
   </div>
  
   <div class="box_abstand"></div>
  
   <div class="box_test">
   <div class="u1">Letzter Test</div>
   </div>
  
   <div class="frei"></div>
  
   <div style="width:680px;">
   <div class="content_up"></div>
   <div class="content_middle">
   *der Text
   </div>
   <div class="content_down"></div>
   </div>
  
<!-- Alles hier drueber -->
  </div>
  
</div>
</body>
</html>

Wäre euch wirklich mega dankbar!

MfG,
Waluigi
Zitieren
#2
Hallo Waluigi,

da gibt es mehrere Möglichkeiten. Eine dieser Möglichkeiten wäre es, übergroße Inhalte mit einem Scrollrand zu versehen. http://www.css4you.de/overflow.html

Mfg Garlant
Ich gebe keinen Support per Messenger oder PN!
Zitieren
#3
Vielen Dank für deine Antwort, Garlant.

Diese Möglichkeit finde ich persönlich nicht so schön.

Gibt es eine Möglichkeit, die div-Zelle einfach bis ganz nach unten zu ziehen?

MfG,
Waluigi
Zitieren
#4
Kann es sein, dass du die floats nicht richtig per clear "neutralisierst"?

Gruß,
Michael
[Bild: banner.png]
Support erfolgt NUR im Forum!
Bitte gelöste Themen als "erledigt" markieren.
Beiträge mit mangelhafter Rechtschreibung/Grammatik werden kommentarlos gelöscht.
Zitieren
#5
(12.05.2009, 18:58)Michael schrieb: Kann es sein, dass du die floats nicht richtig per clear "neutralisierst"?

Hallo,

Das kann sehr gut sein, da ich nicht wusste, dass man das machen muss.

Leider weiß ich auch gerade nicht wo ich das einsetzen soll.

Kann es dann auch sein, das das Div bis ganz nach unten gezogen wird?

MfG,
Waluigi
Zitieren
#6
Die HTML-Struktur sieht auch komisch aus. Ist es gewollt, daß das div "navi" bis ganz ans Ende reicht, also u.a. auch den ganzen Content mit einschließt? Wenn du dein HTML ordentlich einrücken würdest würde dir sowas auch leichter auffallen.

Das navi ist dann auf Höhe 30 Pixel beschränkt und da passt natürlich das ganze andere Zeug nicht rein, und damit hast du einen Overflow, was dazu führt daß das umschließende Element (div table) nicht auf den gesamten Inhalt ausgedehnt wird, denn die navi ist ja offiziell nur 30 Pixel hoch.

Vermutlich sind da noch andere Probleme drin, habs mir dann weiter nicht so genau angeschaut. Versuch erst einmal auf eine saubere div Schachtelung zu kommen, und kümmere dich erst danach um die Formatierung / Ausrichtung mit CSS.
Zitieren
#7
Das Div schließt eigentlich nur die Navigation und das rechts von der Navigation (Datum) ein.

Ich habe den Code mal versucht übersichtlicher einzurücken:

CSS Datei:
Code:
<style type="text/css">
html {height:100%;}
body {
background-color:#DDDDDD;
height:100%;
margin:0%;
padding:0%;
}
.u1 {
font-size:18px;
color:#FF0000;
font-weight:bold;
height:31px;
line-height:31px;
padding-left:3px;
vertical-align:middle;
text-align:center
}

div.table {
background-color:#FFFFFF;
margin:0% 10px;
padding:0% 10px;
width:980px;
height:100%;
border-left:1px solid #666666;
border-right:1px solid #666666;
margin:0px auto;
}
div.header {
height:187px;
background-image:url(images/header.jpg);
}
div.navi {
    width:980px;
    height:30px;
    vertical-align:middle;
    float:left;
    text-align: center;
}
div.datum {
width:350px;
height:30px;
line-height:30px;
float:left;
background-image:url(images/bg_buttons.jpg);
}
body,td,th {
    color: #333333;
}
div.navi_in {
    background-image:url(images/bg_buttons_navi.jpg);
    height:30px;
    line-height:30px;
    width:80px;
    vertical-align:middle;
    float:left;
    text-align: center;
}
.button_left, .button_right {
width:15px;
height:30px;
float:left;
}
.button_left {
background-image:url(images/bg_buttons_left.jpg);
}
.button_right {
background-image:url(images/bg_buttons_right.jpg);
}
.frei {
height:15px;
width:980px;
line-height:15px;
float:left
}
.box_abstand {
height:200px;
width:10px;
float:left;
}
.box_demnaechst {
    float:left;
    width:180px;
    height:200px;
    text-align: left;
    background-image:url(images/demnaechst.jpg)
}
.box_contentslider {
float:left;
width:400px;
height:200px;
text-align:left;
background-image:url(images/contentslider.jpg);
}
.box_test {
float:left;
width:380px;
height:200px;
text-align:left;
background-image:url(images/test.jpg);
}
.content_up {
background-image:url(images/body_bg_up.jpg);
width:590px;
line-height:15px;
height:15px;
float:left;
}
.content_down {
background-image:url(images/body_bg_down.jpg);
width:590px;
line-height:15px;
height:15px;
float:left;
}
.content_middle {
background-image:url(images/body_bg_middle.jpg);
width:590px;
text-align:left;
float:left;
vertical-align:text-top;
}
.downdown {
background-image:url(images/down.jpg);
width:980px;
height:50px;
line-height:50px;
float:left;
}
.navi_abstand {
width:10px;
height:30px;
float:left;
}
</style>

HTML:
Code:
<div class="table">
    <div class="header"></div>
    
    <div class="frei"></div>
    
    <div class="navi">
        <div class="button_left"></div>
        <div class="navi_in">Home</div>
        <div class="navi_in">Community</div>
        <div class="navi_in">Software</div>
        <div class="navi_in">Hardware</div>
        <div class="navi_in">eSports</div>
        <div class="navi_in">Downloads</div>
        <div class="navi_in">Weiteres</div>
        <div class="button_right"></div>
    
        <div class="navi_abstand"></div>
        
          <div class="button_left"></div>
        <div class="datum">Heute ist <script language="JavaScript">document.write(Tagname[Wochentag]+", der "+Tag2+". "+Monatname[Monat2]+" "+Jahr2+" ");</script></div>
        <div class="button_right"></div>
        </div>
  
    <div class="frei"></div>
  
    <div class="box_demnaechst">
        <div class="u1">Demnächst</div>
    </div>
  
    <div class="box_abstand"></div>
  
    <div class="box_contentslider">
        <div class="u1">Aktuelles</div>
    </div>
  
    <div class="box_abstand"></div>
  
    <div class="box_test">
        <div class="u1">Letzter Test</div>
    </div>
  
    <div class="frei"></div>
  
    <div style="width:680px;">
        <div class="content_up"></div>
        <div class="content_middle">
             <p>oiopigfzzfdg</p>
             <p>fdfdh</p>
             <p>fdhgf</p>
             <p>hgfhgf</p>
             <p>hgfhj</p>
             <p>fhjgfjhfj</p>
             <p>jghjkhgk</p>
             <p>hkjhkjkjh</p>
             <p>kjhkjhkfh</p>
             <p>jhfkj</p>
             <p>thgf</p>
             <p>jhfgjhgfj</p>
             <p>fgjhfjhgj</p>
             <p>ghjhgdjhgdj</p>
             <p>hzdjhjzzh</p>
             <p>jhzjztjjz</p>
        </div>
    <div class="content_down"></div>
  
</div>

Wäre wirklich sehr sehr dankbar, wenn ihr mir weiterhin helfen würdet, das Problem zu lösen.

Edit:
Ich habe gerade mal die "height:100%;" Sachen entfernt, um zu gucken, wie weit das Div nach unten gezogen wird. Komischerweise wird dieser dann nur bis zum Ende des Headers gezogen.
Dies finde ich etwas sehr komisch.

Edit2:
In der ersten Zeile nach dem Body TAG steht "<div class="table">". Dies ist bei mir (Dreamweaver CS3) grau und nicht wie andere Variablen in blau eingefärbt. Das würde ja normalerweise heißen, das der Befehl irgendwie falsch wäre.

Ich bitte um eine Lösung. Sad
Da ich jetzt blöderweise nicht mehr editieren darf/kann, muss ich jetzt wohl einen Doppelpost machen.

Ich habe nun festgestellt, dass der Div-Container im anderen Div nur so groß wird, wie der header ist.

Hat das mit dem Befehl float zu tun, dass der die anderen Divs ja nur neben dem anderen Div einfügt, und somit ja theoretisch keine Zeile höher geht?

Kann mir einer sagen, wenn dies so sein sollte, wie ich das beheben kann?

Wäre sehr nett!

MfG,
Waluigi
Zitieren


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  CSS-Problem: Parent div springt aus gefloaterter div raus mattias 4 3.554 22.04.2012, 13:41
Letzter Beitrag: mattias
  Youtube Videos über einem Div-Tag Waluigi 8 3.791 12.04.2010, 13:01
Letzter Beitrag: Waluigi
  CSS / Frage zum div-Tag Jockl 5 3.132 09.03.2008, 18:10
Letzter Beitrag: Michael
  Forum in einer div box? alijan 14 5.071 08.08.2007, 22:45
Letzter Beitrag: alijan
  [gelöst]div-verschachtelungen modercol 9 3.269 10.05.2007, 17:39
Letzter Beitrag: Jan