fexibler hinterggund

html.de-Forum HTML, XHTML & CSS
1

hallo,

ich versuche einen fexiblen rahmen zu erstellen und steh ein bisschen auf dem schlauch.
es handelt sich dabei um die linke und rechte seite von *.com
der rahmen soll sich in der mitte strecken. das problem dabei ist, dass ich den unten teil nicht unten fixiert bekomme. vllt hat jemand eine idee, wie ich das lösen kann.

gruß,
foxmorayno
[SIZE=1]
ps: der shop ist schon aktiv, gekauft werden darf schon[/SIZE].

2 
<style>
* {
    padding:0px;
    margin:0px;
    border:none;
    border-collapse:collapse;
}

tr {
    background:#000;
}

#middle_middle {
    vertical-align:top;
}

#middle_right, #middle_right table, #middle_left, #middle_left table, #middle_tr {
    height:100%;
}

#middle_left_top td {
    background:url('left1.jpg');
    height:204px;
    width:65px;
}

#middle_left_middle td {
    background:url('left3.jpg');
    width:65px;
}

#middle_left_bottom td {
    background:url('left2.jpg');
    height:590px;
    width:65px;
}


#middle_right_top td {
    background:url('left1.jpg');
    height:204px;
    width:65px;
}

#middle_right_middle td {
    background:url('left3.jpg');
    width:65px;
}

#middle_right_bottom td {
    background:url('left2.jpg');
    height:590px;
    width:65px;
}

</style>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="de" lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>fun-fox.de</title>

<meta name="Language" content="de" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

</head>

<body>


<table id="middle">
    <tr id="middle_tr">
        <td id="middle_left">
            <table>
                <tr id="middle_left_top"><td></td></tr>
                <tr id="middle_left_middle"><td></td></tr>
                <tr id="middle_left_bottom"><td></td></tr>
            </table>
        </td>
        <td id="middle_middle">
            content<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
        </td>
        <td id="middle_right">
            <table>
                <tr id="middle_right_top"><td></td></tr>
                <tr id="middle_right_middle"><td></td></tr>
                <tr id="middle_right_bottom"><td></td></tr>
            </table>
        </td>
    </tr>
</table>

</body>
</html>

vllt kennt jemand eine lösung schönere lösung, aber so funktioniert es.

3

die table-variante ist nicht in allen browsers tauglich.
eine harte variante mit suppe und js tuts aber in den aktuellen:

<html>
<head>
</head>
<style>
#middle_left_top {
    background:url('left1.jpg');
    height:204px;
    width:65px;
}

#middle_left_middle {
    background:url('left3.jpg');
    width:65px;
}

#middle_left_bottom {
    background:url('left2.jpg');
    height:590px;
    width:65px;
}

#middle_right_top {
    background:url('left1.jpg');
    height:204px;
    width:65px;
}

#middle_right_middle {
    background:url('left3.jpg');
    width:65px;
}

#middle_right_bottom {
    background:url('left2.jpg');
    height:590px;
    width:65px;
}

#middle_left, #middle_middle, #middle_right {
    float:left;
}

#middle_middle {
    width:964px;
}
</style>

<body>

<div id="middle">
    <div id="middle_left">
        <div id="middle_left_top"></div>
        <div id="middle_left_middle"></div>
        <div id="middle_left_bottom"></div>
    </div>
    <div id="middle_middle">  Text <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  </div>
    <div id="middle_right">
        <div id="middle_right_top"></div>
        <div id="middle_right_middle"></div>
        <div id="middle_right_bottom"></div>
    </div>
    <br style="clear:both" />
</div>




<script>
document.getElementById('middle_left_middle').style.height = document.getElementById('middle').offsetHeight - 204 - 590 + "px";
document.getElementById('middle_right_middle').style.height = document.getElementById('middle').offsetHeight - 204 - 590 + "px";
</script>

</body>
</html>
4

nunja das funktioniert solange man sehr statische seiten hat. sobald man versteckte elemente usw drin hat misst er diese auch mit und ich bin gezwungen eine festgelegte höhe zu setzten…