1
Hi,
Ich habe einige Schwierigkeiten beim Umsetzen eines ehemaligen Frame-Layouts in CSS. Ich habe jetzt schon viel gewerkelt, aber ich bin am Ende meines Lateins. Das Problem ist ein Layout, unterteilt in ein Menu fixer breite und ganzer Höhe links, der verbleibende Teil rechts unterteilt in 4 verschieden große Fenster, von den en nur 3 scrollbar sein dürfen. Das funktioniert soweit auch, nur ein kleines Problem gibt es: Das 4. Fenster des rechten Bereichs unten rechts (bottomright) sollte eine fixe Breite bekommen, quasi als Untermenü fungieren. Dabei der Bereich links (bottomleft) davon eine dynamische Breite haben und scrollbar sein. Lässt sich das überhaupt bewerkstelligen?
Der Code:
Wenn Ihr mir sagt das geht nicht dann ist es auch ok, ein Tip wäre in jedem Fall sehr nett.
Rudy
Ich habe einige Schwierigkeiten beim Umsetzen eines ehemaligen Frame-Layouts in CSS. Ich habe jetzt schon viel gewerkelt, aber ich bin am Ende meines Lateins. Das Problem ist ein Layout, unterteilt in ein Menu fixer breite und ganzer Höhe links, der verbleibende Teil rechts unterteilt in 4 verschieden große Fenster, von den en nur 3 scrollbar sein dürfen. Das funktioniert soweit auch, nur ein kleines Problem gibt es: Das 4. Fenster des rechten Bereichs unten rechts (bottomright) sollte eine fixe Breite bekommen, quasi als Untermenü fungieren. Dabei der Bereich links (bottomleft) davon eine dynamische Breite haben und scrollbar sein. Lässt sich das überhaupt bewerkstelligen?
Der Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
</head>
<style type="text/css">
<!--
div#all{
border-left: 1px dashed #C0C0C0;
border-right: 1px dashed #C0C0C0;
margin: 0 auto 0 auto;
width: 90%;
height: 100%;
}
div#topright {
width: 20%;
background: #00FFFF;
height: 100%;
overflow: auto;
}
div#bottom {
background: #FF0000;
height: 55%;
}
div#bottomright {
width: 18%;
float: right;
background: #FF1493;
height: 100%;
}
div#right {
margin-left: 150px;
background: #00FF00;
height: 100%;
}
div#left {
width: 150px;
float: left;
background: #008000;
height: 100%;
}
div#bottomleft {
width: 82%;
background: #FFA500;
height: 100%;
overflow: auto;
}
div#topleft {
float: right;
width: 80%;
background: #AFEEEE;
height: 100%;
overflow: auto;
}
div#top {
background: #0000FF;
height: 45%;
}
html,body{
margin: 0;
padding: 0;
height: 100%;
}
-->
</style>
<body>
<div id="all">
<div id="left">left</div><!--left-->
<div id="right">
<div id="top">
<div id="topleft">topleft<br /> Lorem ipsum ...</div><!--topleft-->
<div id="topright">topright<br /> Lorem ipsum...</div><!--topright-->
</div><!--top-->
<div id="bottom">
<div id="bottomright">bottomright</div><!--bottomright-->
<div id="bottomleft">bottomleft<br />Lorem ipsum ...</div><!--bottomleft-->
</div><!--bottom-->
</div><!--right-->
</div><!--all-->
</body>
</html>Wenn Ihr mir sagt das geht nicht dann ist es auch ok, ein Tip wäre in jedem Fall sehr nett.
Rudy