Nebeneinanderliegende gleichhohe Boxen

mantiz · #1 (**permalink**) 06.02.2010, 20:33

So, nach langer Zeit stehe ich gerade wieder vor einem kleinen Problem.

Und zwar soll ich nun ein Layout umsetzen, wo es 3 nebeneinander liegende Boxen gibt, welche alle einen Border von 1px haben und jeweils ein kleiner Abstand zwischen den Boxen gegeben ist.

Die Möglichkeiten, die mir einfallen sind:

Tabelle
ich weiß, wäre auch das letzte, was ich anwenden würde
CSS-Tabelle
hier gibt es halt die bekannten Probleme, dass nicht alle Browser die Eigenschaften unterstützen
Faux-Columns
Hier könnte man entweder die vertikalen Border als Hintergrund-Bild angeben, wobei die Spalten-Breite dann fix wäre, oder aber man schachtelt zwei divs, wobei das eine div einen Hintergrund bei 33% erhält, das andere den Hintergrund auf 66% legt, um wenigstens etwas variabel zu sein.
Den oberen Border könnte ich durch die Boxen selbst festlegen, aber wie setze ich dann den unteren Border so, dass dieser bei allen auf gleicher Höhe liegt?
Das einzige, was mir einfallen würde, wäre unter den eigentlich Boxen nochmal 3 "Boxen" zu definieren, welche nur 1px hoch und jeweils 30% Breit sind, wobei ich dann aber bei einigen Zoom-Stufen wohl das Problem bekomme, dass die Border nicht zusammenpassen.

Mir gehen so langsam die Ideen aus, daher würde ich mich über weitere Ansätze freuen, wie ich da dran gehen kann.

In erster Linie geht es mir hier um einen Ansatz, wofür eigentlich erstmal kein Code benötigt wird, aber falls ich doch einen Testcase erstellen soll, einfach Bescheid sagen.

plastiko · #2 (**permalink**) 06.02.2010, 22:22

Zitat:

Zitat von mantiz

3. Faux-Columns
Hier könnte man entweder die vertikalen Border als Hintergrund-Bild angeben, wobei die Spalten-Breite dann fix wäre, oder aber man schachtelt zwei divs, wobei das eine div einen Hintergrund bei 33% erhält, das andere den Hintergrund auf 66% legt, um wenigstens etwas variabel zu sein.
Den oberen Border könnte ich durch die Boxen selbst festlegen, aber wie setze ich dann den unteren Border so, dass dieser bei allen auf gleicher Höhe liegt?

Wenn du die Grafiken hoch genug machst könntest du die unteren Linien in die Faux-Columns-Grafiken zeichnen, die oberen würde das erste Element in den gefloateten Boxen als border bekommen.

Dabei kommt es aber bestimmt zu Rundungsfehlern.

mantiz · #3 (**permalink**) 07.02.2010, 01:53

Genau die Rundungsfehler stören mich da.

Nach einigem Suchen habe ich schon mehrere Techniken gefunden, die aber dann keinen transparenten Bereich zwischen den Boxen erlauben, da dort mit Grafiken überlappt wird.

Ich teste morgen mal in einigen Browsern, wie es mit "display:table" etc. in den guten Browsern aussieht. Evtl. reicht ja ein Javascript für die IE<=7.

Muss ich mal klären, ob dies ein Problem wäre.

Falls sonst noch Ideen vorhanden sind, nur her damit.

etux · #4 (**permalink**) 07.02.2010, 03:18

Zitat:

Zitat von mantiz

Nach einigem Suchen habe ich schon mehrere Techniken gefunden, die aber dann keinen transparenten Bereich zwischen den Boxen erlauben, da dort mit Grafiken überlappt wird.

Hast Du auch nach „gleich hohe Spalten“ gesucht?

Zitat:

Zitat von mantiz

Und zwar soll ich nun ein Layout umsetzen, wo es 3 nebeneinander liegende Boxen gibt, welche alle einen Border von 1px haben und jeweils ein kleiner Abstand zwischen den Boxen gegeben ist.

Vor Kurzem hatte ich bei einer ziemlich ähnlichen (zwei Spalten Layout) Aufgabe im TYPO3Forum geholfen. Habe gerade eben festgestellt, dass Betty99 auch hier im Forum Hilfe gesucht hat.

http://xhtmlforum.de/59911-internet-...tml#post456331
http://xhtmlforum.de/59914-height-vo...-anpassen.html

3- und 4-Spalter – s. m. Sign

Edit: Ich sehe gerade, den Thread hier kennst Du doch schon.

mantiz · #5 (**permalink**) 07.02.2010, 11:28

Hi Emil,

ja, die Threads kommen mir bekannt vor.

Ich hab' mir zwar vorher nicht genau diese Threads angesehen, aber die Techniken auch woanders gefunden.

Das Problem bei all diesen Techniken ist, dass entweder die Spalten aneinander kleben, was dann kein Problem z.B. per Faux-Column, usw. darstellt.

Oder aber, wenn es einen transparenten Bereich zwischen den Boxen gibt, dann finde ich nur Beispiele, wo es für zwei Boxen gelöst ist, wobei es dort einfach ist eine abschließende Hintergrundgrafik mit einer Lücke unten drunter zu legen.
Für 3 Boxen oder mehr finde ich entweder kein Beispiel, oder die Boxen sind mit festen Breiten angegeben, was dann auch wieder kein Problem ist.

Ich habe da aber noch eine Idee, der ich noch nachgehe, melde mich später noch einmal dazu.

Viele Dank auf jeden Fall schonmal.

etux · #6 (**permalink**) 07.02.2010, 11:47

Hallo mantiz,
jetzt bin ich mir nicht mehr sicher, ob ich die Aufgabe richtig verstanden habe.
Ich poste Dir den Quellcode von der Betty99 Website. Ist das, was Du erreichen willst? Im Beispiel sind es nur zwei Spalten. Als Grundlage diente das Layout hier:

Demo-Layout : Inhalt zuerst, zwei gleich hohe Spalten, elastisch :: emil-webdesign.net

Da Du ja drei Spalten hast, müsstest Du eins der Layouts hier als Grundlage nehmen:

elastisch
Demo-Layout : Inhalt zuerst, drei Spalten, elastisch :: emil-webdesign.net

flüssig
Demo-Layout : Inhalt zuerst, drei Spalten, fluessig :: emil-webdesign.net

HTML-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="de" lang="de">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="Content-Language" content="de" />
	<meta name="language" content="de" />
	<title>Betty99 Testcase</title>
	<style type="text/css" media="screen, projection">
* {
	margin: 0;
	padding: 0;
}
html,
body {
	height: 100%;
}
html {
	font-size: 100.01%;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	line-height: 1.4;
	background: #000;
}
#container {
	position: relative;
	width: 922px;
	margin: 0 auto;
	padding-top: 10px;
	color: #fff;
}
#wrapper {
	position: absolute;
	left:0;
	top: 100%;
	width: 100%;
	padding-top: 5px;
}

/* SPALTEN */

/* Hintergrundspalten */
#column-left {
	float: left;
	width: 215px;
	margin-bottom: 5px;
	border: 1px solid #e41370;
}
#column-right {
	float: right;
	width: 698px;
	xmin-height: 350px;
	margin: -1px -706px -1px 10px;
	padding: .8em 0 2.4em;
	border: 1px solid #e41370;
}
/* Inhaltspalten */
#content {
	float: right;
	width: 678px;
	margin-right: 10px;
}
#navigation {
	float: left;
	width: 195px;
	margin-left: -212px;
}
#navigation ul {
	float: left;
	width: 100%;
	list-style: none;
}
#navigation li {
	border-bottom: 1px dotted #e41370;
}
#navigation a {
	display: block;
	padding: .4em 5px .4em 17px;
	text-decoration: none;
	color: #e41370;
}
#navigation a:hover {
	color: #bbb;
}
/* FOOTER */
#footer {
	clear: both;
	width: 920px;
	padding: 1em 0;
	text-align: center;
	border: 1px solid #e41370;
}
#footer a {
	color: #e41370;
	text-decoration: none;
}

#footer a:hover, div#footer a:focus {
	text-decoration: underline;
}

/* HEADER */
#header {
	padding: 4em 2em;
	border: 1px solid #e41370;
}
#header p {
	font-size: 2em;
}
	</style>
	<!--[if lte IE 7]><style type="text/css" media="screen">
* html body {
	font-size /**/: x-small;
	text-align: center;
}
* html div#container {
	text-align: left;
}
* html #column-right,
* html #navigation {
	position: relative;
}
* html #content {
	display: inline;
}
* html #navigation a {
	height:1px;
}
* html #navigation li {
	display /**/: inline;
	height /**/: 1px;
}
* html #header {
	width /**/: 920px;
}
	</style><![endif]-->
</head>
<body>
<div id="container">
	<div id="wrapper">
		<div id="column-left">
			<div id="column-right">
				<div id="content">
					<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. 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="navigation">
					<ul>
						<li><a href="#"  >Lorem ipsum ...</a></li>
						<li><a href="#"  >Lorem ipsum ...</a></li>
						<li><a href="#"  >Lorem ipsum ...</a></li>
						<li><a href="#"  >Lorem ipsum ...</a></li>
						<li><a href="#"  >Lorem ipsum ...</a></li>
						<li><a href="#"  >Lorem ipsum ...</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div id="footer">
			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat ...</p>
		</div>
	</div>
	<div id="header">
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy ...</p>
	</div>
</div>
</body>
</html>

mantiz · #7 (**permalink**) 07.02.2010, 13:20

Nochmal Hi

Danke für Deine Mühe, aber ich glaube Du missverstehst mich etwas.

Hier mal ein Testcase, wie meine aktuelle Lösung aussieht.
Scheint bisher in sämtlichen Browsern zu funktionieren, zumindest bei denen, wo ich getestet habe (IE6, IE7, IE8, Opera 7.54, Opera 10, Netscape 7.1, FF3).
Klar, die Spalteninhalte müssen noch besser positioniert werden.

Leider funktionieren nur jeweils 1-3 Zoomstufen in beide Richtungen, je nach Browser, da sich irgendwann die Grafiken überlappen, aber ich denke, ich lasse es erstmal so.

Ein Test bei Browsershots.org hat mich allerdings überrascht, ziemlich viele Browser kommen mit "display:table" klar.
Probleme gibt's anscheinend nur bei IE, Dillo und Avant.
Dillo ist mir egal, IE könnte man notfalls mit nicht gleichhohen Boxen versorgen, Avant kenne ich gar nicht, muss ich erstmal nach suchen.

HTML-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="de" lang="de">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
		<title>[ untitled ]</title>
		<style type="text/css">
body {
	background: #333;
	margin:     2em auto;
	width:      45em;
}

.three-boxes {
	clear: both;
}

.three-boxes .upper-left {
	background: url('3boxen_links_oben.gif') 33% 0 no-repeat;
	border-left: 1px solid #65686B;
	zoom: 1;
}

.three-boxes .upper-right {
	background: url('3boxen_rechts_oben.gif') 66% 0 no-repeat;
	border-right: 1px solid #65686B;
	padding-top: 1px;
	zoom: 1;
}

.three-boxes .lower-left {
	background: url('3boxen_links_unten.gif') 33% 100% no-repeat;
	zoom: 1;
}

.three-boxes .lower-right {
	background: url('3boxen_rechts_unten.gif') 66% 100% no-repeat;
	overflow: hidden;
	padding:    1%;
	zoom: 1;
}

.three-boxes .box1 {
	float: left;
	padding-left: 1%;
	width: 30%;
	background: #FFF;
}

.three-boxes .box2 {
	margin-left: 35%;
	width: 30%;
	background: #FFF;
}

.three-boxes .box3 {
	float: right;
	width: 30%;
	background: #FFF;
}

		</style>
	</head>
	<body>
		
<div class="three-boxes">
	<div class="upper-left">
		<div class="upper-right">
			<div class="lower-left">
				<div class="lower-right">
					<div class="box1">
						blub
					</div>
					
					<div class="box2">
						blub<br />
						blub<br />
					</div>
					
					<div class="box3">
						blub
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

	</body>
</html>

etux · #8 (**permalink**) 07.02.2010, 15:50

Hallo mantiz,

Du hast offensichtlich den falschen Code gepostet. Oder?

Zitat:

Zitat von mantiz

Und zwar soll ich nun ein Layout umsetzen, wo es 3 nebeneinander liegende Boxen gibt, welche alle einen Border von 1px haben und jeweils ein kleiner Abstand zwischen den Boxen gegeben ist.

Das verstehe ich so, dass Du eine Lösung ohne Grafiken suchst.
Dein Quellcode sagt mir auch, dass Du dem Layout eine Breite in „em“ gibst, die Spaltenbreiten aber in Prozenten haben willst. Wahrscheinlich, um für das Layout min- und/oder max-width einfacher definieren zu können.

Aus dem Layout
Demo-Layout : Gleich hohe Spalten (Drei-Spalten-flüssiges Layout) :: emil-webdesign.net
wird also das hier

HTML-Code:

<?xml version="1.0" encoding="utf-8"?>
<!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="de" lang="de">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="Content-Language" content="de" />
		<meta name="language" content="de" />
		<title>mantiz - testcase</title>
		<style type="text/css" media="screen, projection">

* { margin: 0; padding: 0; border: none; }
h1, h2, h3, h4, h5, h6 { font-size: 100.01%; }
html {
	font-size: 100.01%;
}
body {
	font-size: small;
	color: #fff;
	background: #262626;
}

#container {
	width: 50em;
	margin: 100px auto;
}
#container:after {
	content: ".";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
}

/* Hintergrundspalten */
#column-one {
	float: left;
	width: 31%;
}
#column-two {
	float: right;
	width: 100%;
	margin: -1px -110% -1px 10.1%;
}
#column-three {
	float: right;
	width: 100%;
	margin: -1px -110% -1px 10.1%;
}

#column-one,
#column-two,
#column-three {
	border: 1px solid #fff;
}

/* Inhaltspalten */
#content-three {
	float: right;
	width: 90%;
	margin-right: 5%;
}
#content-two {
	float: left;
	width: 90%;
	margin-left: -105%;
}
#content-one {
	float: left;
	width: 90%;
	margin-left: -215%;
}
#content-three,
#content-two,
#content-one {
	padding: 1em 0 1.6em;
}
</style>
		<!--[if lte IE 7]><style type="text/css" media="screen">
* html body {
	text-align /**/: center;
	font-size /**/: x-small;
	f\ont-size: x-small;

}
* html div#container {
	text-align /**/: left;
}
* html #content-three {
	display: inline;
}
* html #column-two,
* html #column-three,
* html #content-two,
* html #content-one {
	position: relative;
}
</style><![endif]-->
	</head>
	<body>
		<div id="container">
			<div id="column-one">
				<div id="column-two">
					<div id="column-three">
						<div id="content-three">
							<h2>column-one</h2>
							<h3>content-three</h3>
							<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. 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 ...</p>
						</div>
						<div id="content-two">
							<h2>column-two</h2>
							<h3>content-two</h3>
							<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. Lorem ipsum dolor sit amet, consetetur sadipscing elitr ...</p>
						</div>
						<div id="content-one">
							<h2>column-three</h2>
							<h3>content-one</h3>
							<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 ...</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

(IE absichtlich im Quirksmode. Mir fällt es nicht ein, wie ich es vor ein Paar Monaten ohne Quirksmode gelöst habe)

EDIT: Habe es hoch geladen:
mantiz - testcase

mantiz · #9 (**permalink**) 07.02.2010, 16:05

Hey, super.

Ich hatte es mit Grafiken gelöst, weil mir keine andere Variante eingefallen ist.

Aber das, was Du hochgeladen hast, ist anscheinend genau das, wonach ich gesucht habe.

Irre, vielen, vielen Dank.

So ganz hab' ich es beim überfliegen noch nicht kapiert, aber ich schaue es mir später nochmal im Detail an.

In Prozenten hab' ich es angegeben, weil ich eine max-width definiert habe, woran sich die Spalten/Boxen ja dann auch halten sollten.

etux · #10 (**permalink**) 07.02.2010, 16:23

Zitat:

Zitat von mantiz

Aber das, was Du hochgeladen hast, ist anscheinend genau das, wonach ich gesucht habe.

Auch alles was ich davor gepostet und verlinkt habe, war nichts anderes. Es hätte nur ein Paar Änderungen und Anpassungen gebraucht.
Die Kombination aus Spalten-Breiten in Prozent, durch negative Margins verschobene Spalten und Abstände zwischen den Spalten bereitet dem IE 6 Kummer. Wie sich IE 7 und 8 verhielten, habe ich nicht mehr in Erinnerung.
Da ich es im IE 6 nur bedingt stabil kriege, habe ich die Art von Layouts komplett "aus dem Programm genommen".

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Dingend Hilfe benötigt bei CSS Boxen für eine Wetterseite!	Web4Live	CSS	2	13.07.2011 16:01
Mitwachsende Container: 4 Boxen	Cu Chullain	CSS	1	08.09.2010 18:57
Boxen beim Seitenladen zuklappen (ohne "Flackern")	Plasm	Javascript & Ajax	5	08.01.2010 16:42
Gleiche Abstände zwischen Boxen?	Shepstar	CSS	5	29.07.2006 03:37
Nebeneinanderliegende Boxen gleich hoch ohne Höhenangabe?	Uta	CSS	1	10.09.2004 18:49