19. 09. 2008, 22:34

Hallo Community,

ich wollte zum ersten Mal von Tabellen losgelöst ein Layout (Grundlage Dreamweaver Gerüst, Code s.u.) machen und direkt hab ich ein Riesen Problem.

Mein Main Container soll von zwei Bildern (links & rechts, in denen ist ein Farbverlauf), die wiederum einen Hintergrund haben, der das Bild nach dem Verlauf fortsetzt, flankiert werden. Wie realisiere ich das?

Ich habe es mit 3 divs versucht, left, mid, right. Das sieht auch so lange gut aus bis der Inhalt des mid divs (da soll der Content rein) über die Größe der left und right divs hinauswächst, denn die wachsen nicht mit. Wenn ein Footer darunter ist, wächst das mid div sogar über den Footer.

Für Hilfe bin ich sehr dankbar, nach 3 ergbnislosen Stunden, habe ich keine Idee mehr.

Code s.u.

Grüße

P.S. Die images kann ich auf Nachfrage zur Verfügung stellen

[HTML]<!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>go for it</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #ffffff;
background-image: url(images/bg2.gif);
background-repeat: repeat-x;
margin: 0; /* Es empfiehlt sich, margin (Rand) und padding (Auffüllung) des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen Rechnung zu tragen. */
padding: 0;
text-align: center; /* Hierdurch wird der Container in IE 5*-Browsern zentriert. Dem Text wird dann im #container-Selektor die Standardausrichtung left (links) zugewiesen. */
color: #000000;
}
.oneColFixCtrHdr #container {
width: 900px; /* Mit einer Breite, die 20 Pixel unter der vollen Breite von 800 Pixel liegt, können Sie dem Browser-Chrome Rechnung tragen und gleichzeitig eine horizontale Bildlaufleiste vermeiden. */
background: #FFFFFF;
margin: 0 auto; /* Durch automatische Ränder (in Verbindung mit einer Breite) wird die Seite zentriert. */
border:0;
text-align: left; /* Hierdurch wird die Einstellung text-align: center im Body-Element überschrieben. */
}
.oneColFixCtrHdr #header {
height:149px;
background-image:url(images/header_bg.gif);
background-repeat:repeat-x;
background: #ffffff;

padding: 0 0 0 0; /* Diese Auffüllung entspricht der linksbündigen Ausrichtung der Elemente in den divs, die darunter erscheinen. Wenn im #header anstelle von Text ein Bild eingesetzt wird, sollten Sie die Auffüllung entfernen. */
}
.oneColFixCtrHdr #header h1 {
margin: 0; /* Wenn Sie den Rand des letzten Elements im #header-div auf 0 einstellen, können Sie das Auftreten unerwarteter Abstände zwischen divs vermeiden. Wenn das div einen Rahmen hat, ist dies unnötig, weil dieser Rahmen die gleiche Wirkung hat. */
padding: 0 0; /* Durch die Verwendung der Auffüllung anstelle von Rändern lässt sich gewährleisten, dass das Element die Kanten des div nicht berührt. */
}
.oneColFixCtrHdr #mainContent {
margin:0;
padding: 0 20px; /* padding (Auffüllung) bezeichnet den Innenabstand und margin (Rand) den Außenabstand der div -Box. */
background: #FFFFFF;
}
.oneColFixCtrHdr #footer {
padding: 0 10px; /* Diese Auffüllung entspricht der linksbündigen Ausrichtung der Elemente in den divs, die darunter erscheinen. */
background:#DDDDDD;
}
.oneColFixCtrHdr #footer p {
margin: 0; /* Wenn Sie die Ränder des ersten Elements in der Fußzeile auf 0 einstellen, können Sie unerwartete Abstände zwischen divs vermeiden. */
padding: 10px 0; /* Durch die Verwendung der Auffüllung bei diesem Element entsteht genau wie bei einem Rand ein Leerraum, aber ohne die potenziellen Abstandsprobleme. */
}
.oneColFixCtrHdr #header img {
border: 0px none 0;
text-align:left;
}
.oneColFixCtrHdr #nav_top {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
height:43px;
background-image: url(images/nav_bg.gif);
background-repeat: repeat-x;
background-position: 0px 0px;
}

.oneColFixCtrHdr #container #nav_top ul {
float:left;
display:block;

height:43px;
margin:0;
padding:0;
}

.oneColFixCtrHdr #container #nav_top li {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
background-image: url(images/nav_button_bg.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
list-style-type: none;
float:left;
display:block;
width:102px;
height:29px;
margin:0;
padding-top: 14px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
text-align: center;
}
.oneColFixCtrHdr #container #nav_top .nav_left {
background-image: url(images/table-based_08.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
float: right;
height: 43px;
width: 93px;
margin: 0;
padding: 0px;
}
.oneColFixCtrHdr #container #nav_top .nav_right {
background-image: url(images/table-based_05.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
float: left;
height: 43px;
width: 93px;
margin: 0;
padding: 0px;
}
.oneColFixCtrHdr #container #topContent {
background-image: url(images/table-based_10.gif);
background-repeat: repeat-x;
background-position: 0px 0px;
height:25px;

}
.oneColFixCtrHdr #container #topContent .top_left {
background-image: url(images/table-based_09.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
margin: 0px;
padding: 0px;
float: left;
height: 25px;
width: 93px;
}
.oneColFixCtrHdr #container #topContent .top_right {
background-image: url(images/table-based_11.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
margin: 0px;
padding: 0px;
float: right;
height: 25px;
width: 93px;
}

.oneColFixCtrHdr #container #main {
background-image: url(images/table-based_13.gif);
background-repeat: repeat-x;
background-position: 0px 0px;
margin:0 auto;
padding:0;
}

.oneColFixCtrHdr #container #main .main_left {

background-image: url(images/table-based_12.gif);
background-repeat: repeat-y;
margin: 0px;
padding: 0px;
float: left;
height: 351px;
width: 93px;
}

.oneColFixCtrHdr #container #main .main_right {

background-image: url(images/table-based_14.gif);
background-repeat: repeat-y;
margin: 0px;
padding: 0px;
float: right;
height: 351px;
width: 93px;
}

.main_bg_left {
background-image:url(images/main_left_end.gif);
background-repeat:repeat-y;
}
.main_bg_right {
background-image:url(images/main_right_end.gif);
background-repeat:repeat-y;
}
.oneColFixCtrHdr #container #main_left {
}
.oneColFixCtrHdr #container #main_container {
width: 900px;
margin:0 auto;
padding: 0px;

}
.oneColFixCtrHdr #container #main_container #left {
background-image: url(images/main_left_end.gif);
background-repeat: repeat-y;
float: left;
width: 93px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
height:100%;
}
.oneColFixCtrHdr #container #main_container #mid {
background-image: url(images/table-based_13.gif);
background-repeat: no-repeat;
float: left;
width: 709px;
padding-left:5px;
}
.oneColFixCtrHdr #container #main_container #right {
background-image: url(images/main_right_end.gif);
background-repeat: repeat-y;
float: left;
width: 93px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
height:100%;
}
.oneColFixCtrHdr #container #footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin:0 auto;
height: auto;
}
/* .oneColFixCtrHdr #container #main_container #main_left {
height: 100%;
width: 93px;
background-image: url(images/main_left_end.gif);
background-repeat: repeat-y;
background-position: 0px 0px;
}
.oneColFixCtrHdr #container #main_container #main_right {
height: 100%;
width: 93px;
padding-left:807px;
background-image: url(images/main_right_end.gif);
background-repeat: repeat-y;
background-position: 807px 0px;
}
*/

-->
</style>
</head>

<body class="oneColFixCtrHdr">

<div id="container">
<div id="header">
<img src="images/table-based_01.jpg" alt="header_left" width="93" height="149" border="0" /><img src="images/table-based_02.gif" alt="Reifen Ricker Logo" width="237" height="149" border="0" /><img src="images/table-based_03.gif" alt="header_spacer" border="0" /><img src="images/table-based_04.jpg" alt="header_right" border="0" /> </div>
<!-- end #header -->
<div id="nav_top" class="navigation">
<span class="nav_right"></span>
<ul><li>Home</li>
<li>Lexikon</li>
<li>Daten</li>
<li>Impressum</li>
</ul>
<span class="nav_left"></span>
</div>
<div id="topContent">
<span class="top_left"></span>
<span class="top_right"></span>
</div>
<div id="main_container">
<div id="left"><img src="images/table-based_12.gif" alt="main_left" width="93" height="351" /></div>
<div id="mid">
<h1>Beispieltext Headline</h1>
<p>Wo gehts hin?</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="right"><img src="images/table-based_14.gif" alt="main_left" width="93" height="351" /></div>







</div>
<div id="footer">
<p>Fußzeile</p>
<!-- end #footer --></div>

<!-- end #container --></div>
</body>
</html>

[/HTML]