fexibler hinterggund

FoXMorayn · 13 April 2010

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

ps: der shop ist schon aktiv, gekauft werden darf schon.

FoXMorayn · 14 April 2010

Code:

<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.

FoXMorayn · 15 April 2010

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

Code:

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

FoXMorayn · 20 April 2010

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...

fexibler hinterggund

FoXMorayn

Guest

FoXMorayn

Guest

FoXMorayn

Guest

FoXMorayn

Guest

Neueste Beiträge