Wieder Probleme mit geslictem Design

seecretum · 16.07.2009

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

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>

Code:

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;
}

Der status Momentan ist das sich der Contenrightback unter den Contenleftback schiebt. Ich hoffe ihr könnt mir helfen!

sokie · 16.07.2009

AW: Wieder Probleme mit geslystem Design

ich finde da ist sehr schwer durchzusehen.
vielleicht kannst du einfachmaleinen link zur seite posten
auffällig ist erstmal,dass da recht ausführlich eine klasse .p formatiert wird, die es im html gar nicht gibt.
div {
margin:0px;
padding-top:0px;
font-family:arial; font-size:14px;
}
ist auch eher unpraktisch, daswürde ich am Anfang der CSS per (*) universalselektor machen, die font-family in den body selektor. damit würde auch die formatierung des Elements p wegfallen können.

Ist die Menge der zusätzlichen container (_back) notwendig?

seecretum · 16.07.2009

AW: Wieder Probleme mit geslystem Design

Hmmm ok das mache ich... das mit dem p dingens ist wahrscheinlich noch vom Fireworks... weil ich immer ein Css exportiere was ich dann umschreibe so spar ich mir dann aber die Arbeit ein bisschen alles komplett von vorne zu schreiben... werde es aber ändern! Aber das hat mir ja jetzt leider nicht zur Lösung des Problems geholfen... das div werde ich auskommentieren... Link zur Seite gibts noch nicht... da ich das Design ja auch noch nicht fertig habe!

sokie · 16.07.2009

AW: Wieder Probleme mit geslictem Design

nein stimmt,das hatte mit der Lösung des Problems nichts zu tun.
damit der dritte rechte float nicht unter den content rutscht musst du darauf achten, dass die gesamtbreite der drei container zusammen nicht breiter wird als deine 1024px.

die definitionen:
.AbsWrap {
width: 100%;
position: relative;
}
.rowWrap {
width: 100%;
}
sind auch verwaist

seecretum · 16.07.2009

AW: Wieder Probleme mit geslictem Design

sokie schrieb:
nein stimmt,das hatte mit der Lösung des Problems nichts zu tun.
damit der dritte rechte float nicht unter den content rutscht musst du darauf achten, dass die gesamtbreite der drei container zusammen nicht breiter wird als deine 1024px.

Das weiss ich auch alles... man es wird im Dreamweaver auch alles richtig angezeigt... zum verrückt werden ist das! Vielleicht könnte man das ganze ja in einer Connect Now Sitzung aufklären? Wenn du lust hättest? Kann dir ja auch mal was machen, ich kann gut Animationen! Wenn mal eine brauchst oder ne Grafik...

So hat sich gelöst... Rechte Box gefloatet, clearfloat rein... und das dümmste was mir je passiert ist die feste größe der Middleboxdouble raus