PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Problem mit DIV Containern und wachsendem Inhalt


The_Invisible
2009-01-10, 19:17:53
Hallo,

zuerst einmal der Code:


<!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>Prototyp</title>
<style type="text/css">
<!--
#main {
padding: 5px;
}

#main #main_frame {
background-color: #EFEFEF;
width: 1000px;
margin-right: auto;
margin-left: auto;
padding: 5px;
border: 1px dashed #999;
}

#main #main_frame #main_menu {
width: 150px;
background-color: #FEC;
display: block;
padding: 5px;
float: left;
}
#main #main_frame #main_content {
background-color: #E8FFEF;
display: block;
padding: 5px;
margin-left: 170px;
width: 650px;
}
#main #main_frame #main_extra {
float: right;
width: 150px;
background-color: #FFC4C4;
padding: 5px;
}
#main #main_frame #main_footer {
background-color: #C1D1FF;
padding: 5px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
-->
</style>
</head>

<body id="main">
<div id="main_frame">
<div id="main_menu">
<p>Menu</p>
<p>&nbsp;</p>
</div>
<div id="main_extra">
<p>Extra</p>
<p>&nbsp;</p>
</div>
<div id="main_content">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div id="main_footer">
Footer
</div>
</div>
</body>
</html>


Problem: Wenn der Inhalt von Menu oder Extra größer ist als von Content, wächst das jeweilige DIV über den Footer hinaus. Es sollte aber so sein wie bei Content, das sich der Footer dann automatisch weiter nach unten schiebt bzw das "main_frame" DIV mitwächst.

Habe sowas ähnliches schon mal gemacht wo es ohne Probleme funktioniert, leider konnte ich da eigentlich keine Unterschiede finden bzw wär das jetzige Beispiel sauberer. Das war aber schon immer ein bisschen Trickserei für mich.

mfg

darph
2009-01-10, 20:47:55
1) Warum transitional?

2) <div id="main_footer" style="clear:both;"> … </div> (Soll natürlich in deine CSS-Deklaration oben, dient hier nur der einfachen Verdeutlichung, wo das hin soll)

3) Du wirst dann nach hier im Forum nach "faux columns" suchen müssen, wenn der Hintergrund bei allen Spalten mitwachsen soll.

4) Du weißt schon, daß es doppelt gemoppelt ist, wenn du ids verschachtelt ansprichst?

5) Du mußt nicht zwingend divs verwenden. Das ist so schon eine ziemliche Div-Suppe (http://en.wikipedia.org/wiki/Span_and_div#Overuse). Anstatt einen kontextlosen Container und Text-Absätze wäre doch eine ungeordnete Liste viel angebrachter, schließlich wird es sich doch bestimmt um eine Aufzählung von Links handeln. HTML besteht schon aus mehr als div, p und span. :D

The_Invisible
2009-01-10, 23:14:55
danke für die tipps, es ist allerdings nur ein schneller prototyp mithilfe von dreamweaver der das so verschachtelt hat.

werde das morgen probieren.

mfg

The_Invisible
2009-01-11, 21:04:15
ok, scheint zu funzen, auch der hintergrund wächst mit ohne weiteres zutun.

der erweiterte prototyp sieht nun so aus:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prototyp</title>
<style type="text/css">
<!--
#main {
padding: 5px;
}
#main_frame {
background-color: #EFEFEF;
width: 1000px;
margin-right: auto;
margin-left: auto;
padding: 5px;
border: 1px dashed #999;
}
#main_header {
background-color: #FFFFCA;
padding: 5px;
margin-bottom: 10px;
}
#main_menu {
width: 150px;
background-color: #FEC;
display: block;
padding: 5px;
margin-bottom: 10px;
float: left;
}
#main_content {
background-color: #E8FFEF;
display: block;
padding: 5px;
margin-left: 170px;
margin-bottom: 10px;
width: 650px;
}
#main_extra {
float: right;
width: 150px;
background-color: #FFC4C4;
padding: 5px;
margin-bottom: 10px;
}
#main_footer {

background-color: #C1D1FF;
padding: 5px;
clear: both;
}
#main_content ul {
width: 600px;
margin-top: 5px;
margin-right: 5px;
margin-bottom: -3px;
margin-left: 5px;
}
#main_content ul li {
list-style-type: none;
background-color: #97FFB9;
padding: 5px;
font-weight: bold;
border: 1px solid #000;
margin-left: -40px;
margin-bottom: 8px;
}
#main_content ul li .text {
font-weight: normal;
text-align: justify;
}
-->
</style>
</head>

<body id="main">
<div id="main_frame">
<div id="main_header">
Header
</div>

<div id="main_menu">
<p>Menu</p>
</div>
<div id="main_extra">
<p>Extra</p>
</div>
<div id="main_content">
<ul>

<li>News 1
<p class="text">das ist der text der sehr lange ist das ist ein text der sehr langsehr lange istsehr lange istsehr lange istsehr lange istsehr lange istsehr lange istsehr lange istsehr lange istsehr lange iste ist</p>
</li>
<li>News 2
<p class="text">das ist der text der sehr lange ist das ist ein text der sehr langsehr lange istsehr lange istsehr lange istsehr lange istsehr lange istsehr lange istsehr lange istsehr lange istsehr lange iste ist
das ist der text der sehr lange ist das ist ein text der sehr langsehr lange istsehr lange istsehr lange istsehr lange istsehr lange istsehr lange istsehr lange istsehr lange istsehr lange iste ist</p>
<p class="text">das ist der text der sehr lange ist das ist ein text der sehr langsehr lange istsehr lange istsehr lange istsehr lange istsehr lange istsehr lange istsehr lange istsehr lange istsehr lange iste ist</p>
</li>
<li>News 3
<p class="text">das ist der text der sehr lange ist das ist ein text der sehr langsehr lange istsehr lange istsehr lange istsehr lange istsehr lange istsehr lange istsehr lange istsehr lange istsehr lange iste ist</p>

<p class="text">das ist der text der sehr lange ist das ist ein text der sehr langsehr lange istsehr lange istsehr lange istsehr lange istsehr lange istsehr lange istsehr lange istsehr lange istsehr lange iste ist</p>
</li>
</ul>
</div>
<div id="main_footer">
Footer
</div>
</div>
</body>

</html>


gibts sonst noch was gröberes auszusetzen? ist natürlich alles nur platzhaltermäßig aufgebaut, auch die farben.

mfg