Zur Navigation

CSS Layout beats Frames

1 C)-(iLL@

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:

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

18.07.2005 17:24 | geändert: 18.07.2005 17:27

2 Jörg

Wie ist das, wenn du für #bottomright eine feste Breite von n px definierst, für #bottomleft eine Breite von 100% und ein margin-right von n px?

Das mit dem scrollbar / nicht scrollbar ist mir nicht ganz klar, soll der Inhalt von #bottomright bei overflow abgeschnitten werden?

18.07.2005 19:06

3 C)-(iLL@

Hi Jörg, danke erstmal fürs Ansehen. Deinen Vorschlag hatte ich bereits versucht (habs nun auch noch mal probiert), aber das Problem ist, dass der Text von bottomleft dann in bottomright überfließt und die Scrolleiste über bottomright ist. Ich habe in die scrollbaren Divs einen längeren lipsum Text eingefügt Auch folgende float-Experimente haben nichts gebracht. Der IE braucht zusätzlich:
div#topleft {
	float: right;
}
div#topright {
	float:left;
}
div#bottomleft {
	float:right;
}
Wenn ich mit dem Schrott den Firefox füttere und das Fenster stauche, flimmert es fröhlich vor sich hin. Der IE wird wohl wieder eine PHP-Detection und ein zweites CSS brauchen >:|

Die Scrollbaren Areas sollen topleft, topright und bottomleft sein. Diese sollen auch eine variable Breite haben. left hat eine fixe breite, und so soll bottomright sie auch haben. bottomright darf nicht scrollen, der Inhalt darf abgeschnitten werden.

18.07.2005 19:20

4 Jörg

Ohne Angaben von width und margin-right für #bottomleft scheint es aber zu funktionieren?

div#bottomright {
width: 150px;
float: right;
background: #FF1493;
height: 100%;
}

div#bottomleft {
background: #FFA500;
height: 100%;
overflow: auto;
}

18.07.2005 19:37

5 C)-(iLL@

Super, Danke ;^) Die Breite ganz weg zu lassen, das habe ich wohl noch nicht versucht =) Auf dem FF funktioniert es gut, mit Opera noch besser (beim Stauchen geht bottomright nicht über left), NS7 gut, NS8 wie FF.
Der IE... ojeoje... dem werd ich wohl eine prozentuale Breite schenken müssen. Was der beim Stauchen veranstaltet ist nicht schön.... hätte er doch eine min-width *seufz*.
Danke nochmal für die schnelle Hilfe ;)

18.07.2005 19:55

Beitrag schreiben (als Gast)





[BBCode-Hilfe]