mehrere DIVS / Tabellen nebeneinander (nach Auflösung)

mgutt · Beitrag von **mgutt** » 05.06.2007 15:03

Hallo,

hat jemand gerade eine Lösung parat, wie ich innerhalb einer Spalte mehrere Boxen abhängig von der Spaltenbreite positioniere?

z.B. hat die Spalte 100% Breite und die Boxen sind jeweils 150 Pixel breit. Da die Anzahl der Boxen immer anders ist, wollte ich es gerne zu so haben, dass die Boxen sich selbst ausrichten. Also im Endeffekt wie bei Images, die richten sich ja auch in Abhängigkeit zu der Spaltenbreite aus.

Dann ein bisschen Abstand zwischen die Boxen und die Sache wäre perfekt

Gruß
Marc

EDIT: Ok, ich denke ich werde mir selber helfen mit:
http://de.selfhtml.org/css/layouts/mehrspaltige.htm

Gruß

killerbees19 · Beitrag von **killerbees19** » 05.06.2007 15:06

Du könntest versuchen, mehrere SPAN-Tags als DIV's zu verwenden. Das habe ich einmal gemacht. Rahmen & Co. funktioniert dank CSS ja auch bei SPAN-Tags

MfG Christian

mgutt · Beitrag von **mgutt** » 05.06.2007 17:03

Hi,

sehe ich das richtig, dass ich bei DIV-Boxen wo z.B. die erste Zeile colspan="2" hätte und die zweite aus zwei Spalten besteht insgesamt drei DIVs brauche?

Also so:

Code: Alles auswählen

<div id="kopfzweispaltenbreit"></div>
<div id="linkespalte"></div>
<div id="rechtespalte"></div>

Bei verschachtelten Geschichten kann ich im Netz nämlich nur Problemkinder finden, die etwas mit "Fake"-Hintergrundbilder-DIVs lösen mussten.

Gruß
Marc

EDIT:

Ok, ich habe es soweit hinbekommen, aber leider interpretiert der IE den Befehl zur Zentrierung des Textes nicht so wie ich es gerne hätte:
[ externes Bild ]

Obwohl beide Spalten 150px breit sind, zentriert der IE auf der Größe der ersten Spalte minimal und bei der zweiten Spalte scheinbar richtig.

Source:

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>DIV Spalten</title>
<style type="text/css">
body, h1, h2
{
	font-size: 90%;
}
div#Box
{
	margin: 5px;
	padding: 0;
	float: left;
	width: 300px;
}
div#Head
{
	margin: 0;
	padding: 0;
	min-width: 300px;
}
div#Head h2
{
	margin: 0;
	padding: 5px;
	text-align:left;
	background-color: #FEBA02;
}
div#Left
{
	margin: 0;
	padding: 5px;
	float: left;
	text-align: center;
	background-color: #E6EDF6;
	min-width: 150px;
}
div#Right
{
	margin: 0;
	padding: 5px;
	text-align: center;
	background-color: #E6EDF6;
	min-width: 150px;
}
</style>
</head>
<body>

<div id="Box">
<div id="Head">
<h1>Hotels &Ouml;sterreich</h1>
<h2>Orte:</h2>
</div>
<div id="Left">
<a href="./innsbruck.htm">Innsbruck</a>
</div>
<div id="Right">
<a href="./innsbruck.htm">ab 29,- EUR</a>
</div>
<div id="Left">
<a href="./klagenfurt.htm">Klagenfurt</a>
</div>
<div id="Right">
<a href="./klagenfurt.htm">ab 58,- EUR</a>
</div>
<div id="Left">
<a href="./salzburg.htm">Salzburg</a>
</div>
<div id="Right">
<a href="./salzburg.htm">ab 6,- EUR</a>
</div>
<div id="Left">
<a href="./wien.htm">Wien</a>
</div>
<div id="Right">
<a href="./wien.htm">ab 17,- EUR</a>
</div>
</div>

</body>
</html>

Gruß

Beitrag von **S2B** » 05.06.2007 17:29

Tritt das Problem nur beim IE6 auf? Wenn ja, dann liegt es daran, dass der IE6 min-width noch nicht verstanden hat. Das ganze lässt sich aber relativ einfach durch ein Conditional Stylesheet (oder von mir aus auch einen CSS-Hack als Browserweiche) lösen, in dem man den entsprechenden Boxen einfach die min-width-Angabe als width-Angabe gibt.

Noch eine Randbemerkung: ID's sind für Elemente gedacht, die nur einmal auf der ganzen Seite vorkommen, wohingegen Klassen für Elemente da sind, die mehrfach vorkommen können. In deinem Fall wären also für Left und Right Klassen sinnvoll.

Edit: Aber wenn ich mir die Daten, die du damit ausgeben willst, so anschaue: Ich würde dafür eine Tabelle verwenden, da dadurch ein Zusammenhang zwischen dem Ort und dem Preis erzeugt wird.

mgutt · Beitrag von **mgutt** » 06.06.2007 14:28

Yo, der "min-width" war schuld.

Hier das Ergebnis:

Code: Alles auswählen

.Box
{
	margin: 5px;
	padding: 0;
	float: left;
	width: 300px;
}
.Head
{
	margin: 0;
	padding: 0;
	min-width: 300px;
}
.Head h2
{
	margin: 0;
	padding: 5px;
	text-align:left;
	background-color: #FEBA02;
}
.Left
{
	float: left;
	width: 140px;
	padding: 5px;
	text-align: center;
	background-color: #E6EDF6;
}
.Right
{
	float:right;
	width: 140px;
	padding: 5px;
	text-align: center;
	background-color: #E6EDF6;
}

Wie Du siehst bin ich auf Klassen umgestiegen

Edit: Aber wenn ich mir die Daten, die du damit ausgeben willst, so anschaue: Ich würde dafür eine Tabelle verwenden, da dadurch ein Zusammenhang zwischen dem Ort und dem Preis erzeugt wird.

Genau das mache ich doch mit dem DIV-Container?! Im Gegensatz zu <table> Tags ist der DIV-Container aber beweglich und "springt" bei der Veränderung der Fenstergröße in die nächste Zeile. Versuch das mal bei <table>

Beitrag von **S2B** » 06.06.2007 15:12

mgutt hat geschrieben:Genau das mache ich doch mit dem DIV-Container?! Im Gegensatz zu <table> Tags ist der DIV-Container aber beweglich und "springt" bei der Veränderung der Fenstergröße in die nächste Zeile. Versuch das mal bei <table>

Das machst du zwar optisch, aber semantisch machst du es nicht...

In so einem Fall würde ich dann mit (Definitions-)Listen arbeiten.

mgutt · Beitrag von **mgutt** » 06.06.2007 15:37

S2B hat geschrieben:
mgutt hat geschrieben:Genau das mache ich doch mit dem DIV-Container?! Im Gegensatz zu <table> Tags ist der DIV-Container aber beweglich und "springt" bei der Veränderung der Fenstergröße in die nächste Zeile. Versuch das mal bei <table>
Das machst du zwar optisch, aber semantisch machst du es nicht... In so einem Fall würde ich dann mit (Definitions-)Listen arbeiten.

Listen? Gib mal ein Beispiel bitte.

Beitrag von **S2B** » 06.06.2007 15:51

Ein vereinfachtes Beispiel (ohne die ganzen zusätzlichen CSS-Eigenschaften, die du bei deinem Code gesetzt hast):

Code: Alles auswählen

dt, dd {
  min-width: 150px
}

dt {
  float: left
}

Code: Alles auswählen

<dl>
  <dt>Ort 1</dt>
  <dd>Preis 1</dd>
  <dt>Ort 2</dt>
  <dd>Preis 2</dd>
</dl>

Dadurch wird jedem "Definitionsterm" (in diesem Fall der Ort) eine "Erklärung" zugeordnet (in diesem Fall der Preis).

mgutt · Beitrag von **mgutt** » 06.06.2007 17:22

Danke! Aber welchen Gewinn hat man dadurch?

Beitrag von **S2B** » 07.06.2007 13:20

Erstens brauchst du weniger Code und zweitens wird eine eindeutige Verbindung zwischen den zusammengehörigen Daten hergestellt, was z.B. Screenreadern hilft, die Seite besser zu "verstehen" (besser gesagt den Leuten, die den Screenreadern "lauschen").