Fließendes Layout: zwei flexible Textspalten?

[dieselross]

Moin,

ist es möglich, in einem umgebenden Container (div) zwei gleich breite Spalten anzuordnen (ebenfalls als div's), die sich flexibel der Fensterbreite anpassen (per Prozentangabe). Ich möchte erreichen, daß ein zweispaltiges Layout innerhalb eines Containers, der seinerseits auf 80% der Fensterbreite festgelegt ist frei fließt, dabei aber harmonusch ausgewogen bleibt.

Gruß
dieselross

[suit]

ist es möglich, in einem umgebenden Container (div) zwei gleich breite Spalten anzuordnen (ebenfalls als div's), die sich flexibel der Fensterbreite anpassen (per Prozentangabe).

Ja, ist melgich zu erschlagen Ehemann mit Handtuch - wenn Handtuch gefillt mit Bigeleisen[1].

Gib den inneren Elementen auch eine jeweils eine prozentuelle Breitenangabe - in Summe solltest du 100 nicht überschreiten ;).

Ich möchte erreichen, daß ein zweispaltiges Layout innerhalb eines Containers, der seinerseits auf 80% der Fensterbreite festgelegt ist frei fließt, dabei aber harmonusch ausgewogen bleibt.

Viel Spass dabei :)

[1] böhmischer Akzent :p

[dieselross]

[1] böhmischer Akzent :p

Dein behmisch ist beeeindruckend. ;-)

Thx für die schnelle Antwort.
Irgendwie hatte ich so 'was auch schon gedacht, aber irgendwie klappt das nicht recht. Ich muß mal den Code durchforsten heute abend und dann hier einstellen. Irgendwas mach' ich falsch.

Gruß
dieselross

[dieselross]

Nachtrag:

ich brauche auch noch ein min-width, damit mir bei kleinen Fensterbreiten das Layout nicht durcheinanderrutscht. Aber da schiebt's mir dann background-Elemente des umgebenden divs aus dem Layout 'raus.

Gruß
dieselross

[suit]

ich brauche auch noch ein min-width, damit mir bei kleinen Fensterbreiten das Layout nicht durcheinanderrutscht. Aber da schiebt's mir dann background-Elemente des umgebenden divs aus dem Layout 'raus.

Das musst du herzeigen - kann mir drunter nix vorstellen :)

[dieselross]

Das musst du herzeigen - kann mir drunter nix vorstellen :)

Ich hoffe, das wird jetzt nicht zu viel. Und ich hoffe auch sehr, das verdeutlicht mein Problem.

CSS:

body {  
	background-image:url('../media/BodyBG.jpg');  
	padding:0;  
	margin:0;  
	font-family:Arial, Helvetica, sans-serif;  
	font-size:101%;  
}  
#Frame {  
	display:block;  
	width:80%;  
	min-width:740px;  
	min-height:400px;  
	background-color:#ffffff;  
	margin-left:auto;  
	margin-right:auto;  
}  
#Header {  
	display:block;  
	width:100%;  
	height:70px;  
	background-image:url('../media/FrameTop.jpg');  
	background-repeat:repeat-x;  
}  
#HeaderLeft {  
	display:inline-block;  
	width:40px;  
	height:70px;  
	background-image:url('../media/FrameUL.jpg');  
	background-repeat:no-repeat;  
	position:relative;  
	float:left;  
}  
#HeaderRight {  
	display:inline-block;  
	width:40px;  
	height:70px;  
	background-image:url('../media/FrameUR.jpg');  
	background-repeat:no-repeat;  
	position:relative;  
	float:right;  
}  
#Navigation {  
	display:block;  
	width:100%;  
	min-width:400px;  
	height:75px;  
	background-image:url('../media/NavBG.jpg');  
	background-repeat:repeat-x;  
}  
#NavigationLeft {  
	display:inline-block;  
	width:70px;  
	height:75px;  
	background-image:url('../media/NavL.jpg');  
	background-repeat:no-repeat;  
	position:relative;  
	float:left;  
}  
#NavTabs {  
	display:inline-block;  
	position:relative;  
	left:0px;  
	top:-16px;  
	width:544px;  
	background-image:url('../media/NavBG.jpg');  
	background-repeat:repeat-x;  
}  
#NavigationRight {  
	display:inline-block;  
	width:70px;  
	height:75px;  
	background-image:url('../media/NavR.jpg');  
	background-repeat:no-repeat;  
	position:relative;  
	float:right;  
}  
#MainBlock {  
	display:block;  
	width:100%-80px;  
	height:100%;  
	min-width:400px;  
	min-height:400px;  
}  
#MainLeft {  
	display:inline-block;  
	width:40px;  
	height:100%;  
	min-height:400px;  
	background-image:url('../media/FrameL.jpg');  
	background-repeat:repeat-y;  
	position:relative;  
	float:left;  
}  
#MainRight {  
	display:inline-block;  
	width:40px;  
	height:100%;  
	min-height:400px;  
	background-image:url('../media/FrameR.jpg');  
	background-repeat:repeat-y;  
	position:relative;  
	float:right;  
}  
#ContentArea {  
	display:inline-block;  
	position:relative;	  
	width:100%;  
	min-width:400px;  
	min-height:400px;  
	background-color: blue;  
}  
#ContentLeft {  
	display:inline-block;  
	position:relative;  
	width:49%;  
	min-height:400px;  
	background-color: red;  
}  
#ContentRight {  
	display:inline-block;  
	position:relative;  
	width:49%;  
	float:right;  
	clear:both;  
	min-height:400px;  
	background-color:yellow;  
}  
#Footer {  
	display:block;  
	width:100%;  
	height:70px;  
	background-image:url('../media/FrameBottom.jpg');  
	background-repeat:repeat-x;  
}  
#FooterLeft {  
	display:inline-block;  
	width:40px;  
	height:70px;  
	background-image:url('../media/FrameLL.jpg');  
	background-repeat:no-repeat;  
	position:relative;  
	float:left;  
}  
#FooterRight {  
	display:inline-block;  
	width:40px;  
	height:70px;  
	background-image:url('../media/FrameLR.jpg');  
	background-repeat:no-repeat;  
	position:relative;  
	float:right;  
}  
#Logo {  
	display:inline-block;  
	width:200px;  
	height:40px;  
	position:relative;  
	top:30px;  
	background-image:url('../media/Logo.jpg');  
	background-repeat:no-repeat;  
}	  
.invisible {  
	display: none;  
}  
#homeSpace {  
	display: block;  
	width: 136px;  
	height: 75px;  
	position: absolute;  
	border:0px;  
	left: 0px;  
}  
#homeCurrent {  
	display: block;  
	width: 136px;  
	height: 75px;  
	background-image:url('../media/NavTabCurrent.jpg');  
	background-repeat: no-repeat;  
	background-position: center bottom;  
}  
#home:link {  
	display: block;  
	width: 136px;  
	height: 75px;  
	background-image:url('../media/NavTab3State.jpg');  
	border:0px;  
	background-repeat: no-repeat;  
	background-position: center top;  
}  
#home:visited {  
	display: block;  
	width: 136px;  
	height: 75px;  
	background-image:url('../media/NavTab3State.jpg');  
	border:0px;  
	background-repeat: no-repeat;  
	background-position: center top;  
}  
#home:hover {  
	display: block;  
	width: 136px;  
	height: 75px;  
	background-image:url('../media/NavTab3State.jpg');  
	border:0px;  
	background-repeat: no-repeat;  
	background-position: center center;  
}  
#home:active{  
	display: block;  
	width: 136px;  
	height: 75px;  
	background-image:url('../media/NavTab3State.jpg');  
	border:0px;  
	background-repeat: no-repeat;  
	background-position: center bottom;  
}  
#galerieSpace {  
	display: block;  
	width: 100px;  
	height: 40px;  
	position: absolute;  
	border:0px;  
	left: 136px;  
}  
#galerieCurrent {  
	display: block;  
	width: 136px;  
	height: 75px;  
	background-image:url('../media/NavTabCurrent.jpg');  
	border:0px;  
	background-repeat: no-repeat;  
	background-position: center bottom;  
}  
#galerie:link {  
	display: block;  
	width: 136px;  
	height: 75px;  
	background-image:url('../media/NavTab3State.jpg');  
	border:0px;  
	background-repeat: no-repeat;  
	background-position: center top;  
}  
#galerie:visited {  
	display: block;  
	width: 136px;  
	height: 75px;  
	background-image:url('../media/NavTab3State.jpg');  
	border:0px;  
	background-repeat: no-repeat;  
	background-position: center top;  
}  
#galerie:hover {  
	display: block;  
	width: 136px;  
	height: 75px;  
	background-image:url('../media/NavTab3State.jpg');  
	border:0px;  
	background-repeat: no-repeat;  
	background-position: center center;  
}  
#galerie:active{  
	display: block;  
	width: 136px;  
	height: 75px;  
	background-image:url('../media/NavTab3State.jpg');  
	border:0px;  
	background-repeat: no-repeat;  
	background-position: center bottom;  
}  

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
   "http://www.w3.org/TR/html4/loose.dtd">  
  
<html lang="de">  
<head>  
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
	<title>untitled</title>  
	<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" charset="utf-8">  
	<meta name="generator" content="TextMate http://macromates.com/">  
	<meta name="author" content="Holger Pleus">  
	<!-- Date: 2009-09-04 -->  
</head>  
<body>  
	<div id="Frame">  
		<div id="Header">  
			<div id="HeaderLeft">  
			</div>  
			<div id="Logo">  
			</div>  
			<div id="HeaderRight">  
			</div>  
		</div>		  
		<div id="Navigation">  
			<div id="NavigationLeft">  
			</div>  
			<ul id="NavTabs">  
				<li id="homeSpace">  
					<a id="homeCurrent">  
					<span class="invisible">Home</span></a>  
				</li>  
				<li id="galerieSpace">  
					<a id="galerie" href="#">  
					<span class="invisible">Galerie</span></a>  
				</li>  
			</ul>  
			<div id="NavigationRight">  
			</div>  
		</div>  
		<div id="MainBlock">  
			<div id="MainLeft">  
			</div>  
			<div id="SidebarLeft">  
			</div>  
			<div id="ContentArea">  
				<div id="ContentLeft">  
				</div>  
				<div id="ContentRight">  
				</div>  
			</div>  
			<div id="MainRight">  
			</div>  
		</div>  
		<div id="Footer">  
			<div id="FooterLeft">  
			</div>  
			<div id="FooterRight">  
			</div>  
		</div>  
	</body>  
</html>  

Gruß
dieselross

[suit]

Ich hoffe, das wird jetzt nicht zu viel. Und ich hoffe auch sehr, das verdeutlicht mein Problem.

Ich dachte da eher an ein auf das Wesentliche reduziertes Beispiel welches man sich direkt online ansehen kann :)

[dieselross]

Ich dachte da eher an ein auf das Wesentliche reduziertes Beispiel welches man sich direkt online ansehen kann :)

Hat etwas gedauert, weil ich etwas anderes zu tun hatte.
guckst Du: hier und hier.

Gruß
dieselross

[dieselross]

Nachtrag: Ich habe hierbei den besonderen Macken des Internet-Exploders noch keine Rechnung getragen. Da sieht's völlig Banane aus.
Erst 'mal möchte ich, daß es in Standardkonformen Brausern richtig funzt. Für IE gibt's vielleicht dann ein Layout mit fixierten Breiten.

Gruß
dieselross

[dieselross]

Ich dachte da eher an ein auf das Wesentliche reduziertes Beispiel welches man sich direkt online ansehen kann :)

Hattest du schon Gelegenheit, dir meine Beispiele anzusehen? Ich frag' ja nur 'mal so.

Gruß
dieselross

[suit]

Hattest du schon Gelegenheit, dir meine Beispiele anzusehen? Ich frag' ja nur 'mal so.

Ich hab' den Thread völlig übersehen - sorry.

Versuch dein Beispiel weniger komplex zu gestalten, wirf alles weg und beginne Schritt für Schritt von außen nach innen das Ganze neu zu bauen bis der Fehler auftritt.

[dieselross]

Danke für den Hinweis. Ich werd' aber wohl erst nächste Woche wieder dazu kommen. Ich melde mich dann wieder. *droh* ;-)

Gruß
dieselross

[dieselross]

Also hier hab' ich das ganze jetzt 'mal abgespeckt. Ich hoffe, so wird's erkennbar.

Gruß
dieselross

[suit]

Also hier hab' ich das ganze jetzt 'mal abgespeckt. Ich hoffe, so wird's erkennbar.

Das Layout fällt bereits vorher auseinander (bzw. allgemein ist es fehlerhaft dargestellt - zumindest in Firefox 3 und Opera 9.6) :)

ggf. solltest du nochmal von außen nach innen beginnen das Layout Stück für Stück zusammensetzen.

Verzichte vorerst auf Hintergrundbilder und verzierung und verwende nur Farben - etwa so könnte das aussehen:

<!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>  
		<title>SELFHTML t=190482</title>  
		<style type="text/css">  
			html {  
				padding: 20px;  
				margin: 0;  
				background: #958F7F;  
			}  
			  
			body {  
				margin: 0 auto;  
				padding: 0;  
				min-width: 750px;  
				max-width: 1500px;  
				background: #E4E4E4;  
				position: relative;  
			}  
			  
			.c1, .c2, .c3, .c6 {  
				position: absolute;  
				top: -20px;  
				left: -20px;  
				width: 20px;  
				height: 20px;  
				background: red;  
				overflow: hidden;  
			}  
			  
			.c2 {  
				width: 100%;  
				left: 0;  
				background: green;  
			}  
				  
			.c3 {  
				left: auto;  
				right: -20px;  
				background: yellow;  
			}  
			  
			.c6 {  
				width: 100%;  
				left: 0;  
				top: auto;  
				bottom: -20px;  
				background: magenta;  
			}  
			  
			h1 {  
				padding: 0;  
				margin: 0;  
				background: blue;  
			}  
			  
			#menu {  
				padding: 0;  
				margin: 0;  
				border-bottom: 2px solid red;  
			}  
			  
			#menu:after {  
				content: '.';  
				clear: both;  
				display: block;  
				height: 0;  
				visibility: hidden;  
			}  
			  
			#menu li {  
				padding: 5px;  
				margin: 0;  
				list-style: none;  
				float: left;  
				background: cyan;  
			}  
			  
		</style>  
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  
		<script type="text/javascript">  
			// <![CDATA[  
				jQuery.noConflict();  
				jQuery(document).ready(function(){  
					jQuery('div#content>div:not(:first-child)').css('display', 'none');  
					jQuery('ul#menu>li').bind(  
						'click',  
						function() {  
							var index = jQuery('li').index(this);  
							jQuery('div#content>div').css('display', 'none');  
							jQuery('div#content>div:eq(' + index + ')').css('display', 'block');  
							  
						}  
					);  
				  
				});  
  
			// ]]>  
		</script>  
	</head>  
	<body>  
		<h1>re-ality</h1>  
		<ul id="menu">  
			<li>Tab 1</li>  
			<li>Tab 2</li>  
			<li>Tab 3</li>  
		</ul>  
		<div id="content">  
			<div id="tab1">  
				<h2>überschrift, tab1</h2>  
				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>  
			</div>  
			<div id="tab2">  
				<h2>überschrift, tab2</h2>  
				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>  
				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>  
				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>  
				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>  
				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>  
				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>  
				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>  
				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>  
			</div>  
			<div id="tab3">  
				<h2>überschrift, tab3</h2>  
				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>  
				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>  
			</div>  
		</div>  
		<div class="c1">ecke links oben</div>  
		<div class="c2">kante oben</div>  
		<div class="c3">rechts oben</div>  
		<div class="c6">kante unten</div>  
	</body>  
</html>  

[dieselross]

Also hier hab' ich das ganze jetzt 'mal abgespeckt. Ich hoffe, so wird's erkennbar.

Das Layout fällt bereits vorher auseinander (bzw. allgemein ist es fehlerhaft dargestellt - zumindest in Firefox 3 und Opera 9.6) :)

ggf. solltest du nochmal von außen nach innen beginnen das Layout Stück für Stück zusammensetzen.

Hmmm. Das hatte ich versucht. Irgendwie ist bei meiner kompletten Planung offenbar der Wurm drin.

Verzichte vorerst auf Hintergrundbilder und verzierung und verwende nur Farben - etwa so könnte das aussehen:

|
Ich hab' mir dein Beispiel angesehen. Ich komme allerdings nicht so richtig klar. Was soll das Java-Zeugs da drin? Und wie soll ich in der unteren Kante, die ja mit dem Hauptblock eine Breite hat, meine linke und rechte untere Ecke unterbringen?

Gruß
dieselross

[suit]

Ich hab' mir dein Beispiel angesehen. Ich komme allerdings nicht so richtig klar. Was soll das Java-Zeugs da drin?

Das JavaScript-Zeug ist dafür da, dass man "Seitenwechsel" simulieren kann, ich wollte dir eine 1:1 Kopiervorlage in die handdrücken und nicht 5 Dokumente :)

Und wie soll ich in der unteren Kante, die ja mit dem Hauptblock eine Breite hat, meine linke und rechte untere Ecke unterbringen?

So wie ich das mit den anderen Ecken und Kanten auch gemacht habe - ich hab' nur nicht alle ausgeführt. die divs mit den klassen .c1 bis .c8 sind dafür zuständig - im Beispiel sind aber nur ein paar enthalten.