gregott: Probleme mit geslyctem Layout

Beitrag lesen

Probleme mit geslyctem Layout

gregott 16.07.2009 19:08

So ich habe ein Design geslyced, welches wie folgt unterteilt ist.

Main -Top Box --Header --Navobenback ---Navoben -Middleboxdouble --contentleftback ---contentleft --contentrightback ---contentright -bottombox --navuntenback ---navunten --spiegelung

Wenn der Contentleft über die größe seines übergeordneten Elements kommt, wenn ich Text T1 reinschreibe, soll sich der Contentback, welcher das übergeordnete Element ist, nach unten erweitern und die bottombox verschieben...

So das klappt auch halb... jetzt habe ich das Problem, wenn ich contentrightback und leftback floate, funktioniert das erweitern nicht mehr, setze ich einen Clearfloat ein schiebt sich die Bottom Box an die höhe des Contentrightback, überlappt den Text und darunter geht der Text weiter... ich poste hier mal den 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></title>
<link rel="stylesheet" type="text/css" href="./index.css" media="all" />

<style type="text/css">

</style>

<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

</head>

<body>
<meta name="description" content="ADD DESCRIPTION HERE" />
<meta name="keywords" content="ADD KEYWORDS HERE" />
<meta name="author" content="me" />


<div id="main">

    <!-- Top -->
    <div id="top_box">
        <div id="header">
        </div>
        <div id="nav_oben_back">
            <div id="nav_oben">
    <a href="index.htm" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('nav_oben_r1_c1','','nav_oben/nav_oben_r1_c1_f2.jpg',1);"><img name="nav_oben_r1_c1" src="nav_oben/nav_oben_r1_c1.jpg" width="163" height="50" border="0" id="nav_oben_r1_c1" alt="" /></a><a href="immobilienangebote.htm" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('nav_oben_r1_c2','','nav_oben/nav_oben_r1_c2_f2.jpg',1);"><img name="nav_oben_r1_c2" src="nav_oben/nav_oben_r1_c2.jpg" width="163" height="50" border="0" id="nav_oben_r1_c2" alt="" /></a><a href="wirsuchen.htm" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('nav_oben_r1_c3','','nav_oben/nav_oben_r1_c3_f2.jpg',1);"><img name="nav_oben_r1_c3" src="nav_oben/nav_oben_r1_c3.jpg" width="164" height="50" border="0" id="nav_oben_r1_c3" alt="" /></a><a href="ueberuns.htm" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('nav_oben_r1_c4','','nav_oben/nav_oben_r1_c4_f2.jpg',1);"><img name="nav_oben_r1_c4" src="nav_oben/nav_oben_r1_c4.jpg" width="163" height="50" border="0" id="nav_oben_r1_c4" alt="" /></a><a href="kontakt.htm" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('nav_oben_r1_c5','','nav_oben/nav_oben_r1_c5_f2.jpg',1);"><img name="nav_oben_r1_c5" src="nav_oben/nav_oben_r1_c5.jpg" width="163" height="50" border="0" id="nav_oben_r1_c5" alt="" /></a><a href="partner.htm" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('nav_oben_r1_c6','','nav_oben/nav_oben_r1_c6_f2.jpg',1);"><img name="nav_oben_r1_c6" src="nav_oben/nav_oben_r1_c6.jpg" width="163" height="50" border="0" id="nav_oben_r1_c6" alt="" /></a>
    <img src="nav_oben/spacer.gif" alt="" name="undefined_2" width="1" height="50" border="0" />

            </div>
        </div>
    </div>

    <!-- Middle -->
    <div id="middle_box_double">
        <div id="content_left_back">
            <div id="content_left">
                <div id="h1">
                Überschrift
                </div>
                <div id="h2">
                Überschrift 2
                </div>
                <div id="t1">
                <!-- INSERT TEXT HERE -->
                </div>
            </div>
        </div>
        <div id="content_right_back">
            <div id="content_right">

            </div>
        </div>
    </div>

    <!-- Bottom -->
    <div id="bottom_box">

        <div id="nav_unten_back_double">
            <div id="nav_unten">
            <a href="impressum.htm" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('nav_unten_r1_c1','','nav_unten/nav_unten_r1_c1_f2.gif',1);"><img name="nav_unten_r1_c1" src="nav_unten/nav_unten_r1_c1.gif" width="167" height="46" border="0" id="nav_unten_r1_c1" alt="" /></a><a href="haftungsausschluss.htm" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('nav_unten_r1_c2','','nav_unten/nav_unten_r1_c2_f2.gif',1);"><img name="nav_unten_r1_c2" src="nav_unten/nav_unten_r1_c2.gif" width="167" height="46" border="0" id="nav_unten_r1_c2" alt="" /></a>
    <img src="nav_unten/spacer.gif" width="1" height="46" border="0" alt="" />
            </div>
        </div>
        <div id="reflection_double">
        </div>
    </div>

</div>


</body>
</html>

body {
    background-color: #ffffff;
    margin:0px;
    padding:0px;
    background-position:center;
}
.p {
    margin:0px;
    padding:0px;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    text-align: inherit;
    color: inherit;
    line-height: inherit;
    vertical-align: top;
}
p {
    padding-top:0px;
    margin-top:0px;
}
img {
    border:0px;
}
div {
    margin:0px;
    padding-top:0px;
    font-family:arial; font-size:14px;
}
.AbsWrap {
    width: 100%;
    position: relative;
}
.rowWrap {
    width: 100%;
}
.clearfloat {
    clear:both;
    height:0px;
}
a:link, a:visited{
    COLOR:inherit;
    text-decoration:inherit;
}

/* Eigener Code ab hier */

#main {
    margin:auto;
    position:relative;
    width:1024px;
}
/* top */
#top_box {
    position:relative;
    width:1024px;

}
#header {
    position:relative;
    width:1024px;
    height:336px;
    background-image: url(bilder/header.jpg);

}
#nav_oben_back{
    position:relative;
    height:66px;
    background-image: url(bilder/nav_oben_back.jpg);

}
#nav_oben {
    position: relative;
    padding-left: 23px;
    padding-top: 7px;

}
/* middle */
#middle_box {
    position:relative;
    width:1024px;

}
#middle_box_double{
    position:relative;
    background-image:url(bilder/erweiterer1.jpg);
    background-repeat:repeat-y;
    width:1024px;

}
#middle_box_single {
    position:relative;
    background-image:url(bilder/erweiterer2.jpg);
    background-repeat:repeat-y;
    width:1024px;
}
#content_single_back {
    position:relative;
    width:1024px;
    height:426px;
    background-image: url(bilder/content.jpg);
    background-repeat:no-repeat;

}
#content_left_back {
    position:relative;
    width:648px;
    height:426px;
    background-image: url(bilder/content_left.jpg);
    background-repeat:no-repeat;

}
#content_right_back {
    position:relative;
    width:376px;
    height:426px;
    margin-bottom:0px;
    background-image: url(bilder/content_right.jpg);
    background-repeat:no-repeat;

}
#content_left {
    position:relative;
    padding-top:20px;
    padding-left:55px;
    width:500px;

}
#content_right {
    position:relative;
    padding-top:20px;
    padding-left:20px;
    width:300px;
}
#content_single {
    position:relative;
    padding-top:40px;
    padding-left:45px;
    width:870px;

}
/* bottom */
#bottom_box {
    position:relative;
    width:1024px;
}
#nav_unten_back_double {
    position:relative;
    width:1024px;
    height:57px;
    background-image:url(bilder/nav_unten_back1.jpg);
}
#nav_unten_back_single {
    position:relative;
    width:1024px;
    height:58px;
    background-image:url(bilder/nav_unten_back2.jpg);
}
#nav_unten {
    position:relative;
    padding-left:28px;
    padding-top:10px;
    height:46px;
}
#reflection_single {
    position:relative;
    height:166px;
    background-image: url(bilder/spiegelung2.jpg);
    background-repeat:no-repeat;
}
#reflection_double {
    position:relative;
    height:114px;
    background-image: url(bilder/spiegelung1.jpg);
    background-repeat:no-repeat;
    width:1024px;
}
#h1 {
    margin:0px;
    padding:0px;
    font-size: 24px;
    font-family: arial;
    text-decoration:underline;
    text-align: left;
    color: #000;
}
#h2 {
    margin:0px;
    padding-top:20px;
    padding-bottom:20px;
    font-size: 20px;
    font-family: arial;
    text-align: left;
    color: #000;
}
#t1 {
    margin:0px;
    font-family:arial;
    font-size:14px;
}