Verschachtelung von DIV's bei unterschiedlichen Auflösungen

22.12.2004, 08:00

Hallo an die CSS-Profis,
es geht um die Seitengestaltung ohne Tabellen konform zu den Vorgaben des W3C.

Voraussetzungen
Der Inhalt ist komplett von der Gestaltung über eine CSS-Definition getrennt. Für die Positionierung von Inhalten werden keine Tabellen verwendet. Zumeist wird der DIV-Tag verwendet.

In diesem Fall gibt es einen Haupt-DIV der zwei untergeordnete DIV's beinhaltet. Diese liegen nebeneinander und decken die Breite fast komplett ab. Alle DIV haben eine prozentuale Breite.

Problem
Das ganze funktioniert bei einer Bildschirmauflösung von 1024x768. Sobald die Auflösung auf 800x600 Pixel herunter geht schiebt sich der Rechte DIV unter den linken DIV.

HINWEIS
Bitte nicht auf CSS 4 YOU verweisen, denn dort steht die lösung auch nicht!

Ich habe eine Testseite erzeugt in der die DIV's gefärbte Ränder haben, damit man direkt sieht was passiert, wenn man das Browserfenster in seiner Größe verändert.

Evtl. hat einer von Euch eine Idee.
Danke im Voraus....

Code:

<!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" dir="ltr" lang="de" xml:lang="de">
	<html>
	<head>
		<title>TestSeite</title>
		<style type="text/css">
			.layout_content {
				margin: 0px 20px 10px 10px;
				padding: 0px 0px 0px 0px;
				height: 100%;
				border: 1px solid blue;
			}
			.layout_content_left {
				float: left;
				margin: 0px 0px 0px 0px;
				padding: 0px 0px 0px 0px;
				width: 79%;
				border: 1px solid green;
			}
			.layout_content_right {
				float: right;
				margin: 0px 0px 0px 0px;
				padding: 6px 6px 6px 6px;
				width: 19%;
				border: 1px solid red;
			}
			table {
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div class="layout_content">
			<div class="layout_content_left">
				<table>
					<tr>
						<td>Spalte 1</td>
						<td>Spalte 2</td>
						<td>Spalte 3</td>
					</tr>
				</table>
			</div>
			<div class="layout_content_right">rechts</div>
		</div>
	</body>
</html>

toscho · 22.12.2004, 11:30

Zitat:

Zitat von windsurfmarkt

Problem
Das ganze funktioniert bei einer Bildschirmauflösung von 1024x768. Sobald die Auflösung auf 800x600 Pixel herunter geht schiebt sich der Rechte DIV unter den linken DIV.

Das ist kein Porblem, sondern gerade der Sinn der Eigenschaft »float«: So muß man nicht horizontal scrollen.

Freilich könntest du den Umbruch hinauszögern, wenn du der Tabelle keine Breite gäbest.

Prozentuale Breitenangaben sind immer knifflig und selten sinnvoll, wenn du den Wert nicht kennst, auf den sich die Prozentangaben beziehen. Deshalb wäre es wohl besser, wenn du der fließenden Box eine Breite in »em« gäbest, die sich am Inhalt orientiert.

Und wozu brauchst du das <div class="layout_content">? Sieht erstmal völlig überflüssig aus.

Gruß
Thomas

imported_Ben · 22.12.2004, 11:32

wenn ich mir das anschaue .. dann sieht das so aus, als wollte da jemand UNBEDINGT mit <div>-containern arbeiten.
fragt man sich wieso.

in einem anderen thread sprach ich von div-suppe ... das würde ich da einstufen. *stichel*

22.12.2004, 11:35

Hallo Thomas,
sicher in meinem Beispiel macht der Content-DIV nicht wirklich Sinn.
Das ist ein Ausschnitt aus einer größeren Seite die kplt. auf DIV's basiert.
Der Content-DIV dient dann zur Kapselung der beiden anderen Inhalte.

und Ben...
vielen Dank für Deinen Beitrag

22.12.2004, 13:37

Hallo Jungs,
vielen Dank für Eure hilfe. Eure Hinweise haben mich auf die richtige Spur gebracht und mir wieder einmal gezeigt, das Entwickler manchmal viel zu komplex denken, denn die Lösung ist so nah gewesen.

Einfach den rechten DIV die width-Eigenschaft wegnehmen und schon ist die Bildschirmauflösung kein Problem mehr! Wobei es immernoch interessant wird, wenn der Inhalt im Linken-DIV so groß ist, das es trotzdem zu Problemen kommt, bzw. der Inhalt dann doch unter den Linken-DIV rutscht!

Kann man den Umbruch verhindern?

Danke nochmals an dieser Stelle für Eurern Support.

toscho · 22.12.2004, 19:22

Du kannst den Umbruch nur verhindern, indem du dem Elternelement eine Minimalbreite gibst, die immer für das Nebeneinander beider Boxen ausreicht.

Ich rate dir davon aber ab, weil du damit die Flexibilität deines Layouts zerstörst. Horizontale Scrollbalken werden oft, sehr oft übersehen. Die dahinter versteckten Inhalte kannst du dann auch gleich ganz weglassen.

Und wenn ich noch eine persönliche Bitte anhängen darf: Sei so gut, und kürze deine Signatur auf ein erträgliches Maß. Auch das tut der Übersicht gut und spart denen Papier, die sich einen Thread mal ausdrucken.
Danke.

Gruß
Thomas

23.12.2004, 06:07

Anscheind gibt es keine Lösung für dieses Problem!

Wie macht Ihr das auf Euren Seiten, denn ich kann wohl nicht der einzige sein, der das Problem hat?

toscho · 23.12.2004, 20:46

ICh betrachte dasd nicht als Problem, sondern als besonderen Vorteil der Sprache CSS: Prinizipiell kann jedes Layout bis auf 20em hinab skalieren.
Es gibt auch keinen Grund, das kaputtzumachen.

24.12.2004, 14:45

Zitat:

Zitat von toscho

ICh betrachte dasd nicht als Problem, sondern als besonderen Vorteil der Sprache CSS: Prinizipiell kann jedes Layout bis auf 20em hinab skalieren.
Es gibt auch keinen Grund, das kaputtzumachen.

gib mir bitte mal ein Beispiel! Danke

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
DIVs nebeneinander?	wers1	HTML, Usability und Barrierefreiheit	13	18.07.2008 14:26
[JS] Divs nach Datum sortieren	cycap	JavaScript, Ajax und mehr	24	16.07.2008 18:48
2 Div's zentrieren	pfump	HTML, Usability und Barrierefreiheit	7	24.04.2008 10:57
Formular mit DIVs	Aris Sung	HTML, Usability und Barrierefreiheit	2	25.11.2007 14:09
Dynamisches Container-Div für floating Divs	HStev	HTML, Usability und Barrierefreiheit	1	14.09.2007 12:39
DIV's untereinander -> Problem	snatch-ic	HTML, Usability und Barrierefreiheit	1	05.02.2007 12:39
Spaltendesign mit DIVs	HStev	HTML, Usability und Barrierefreiheit	4	12.06.2006 12:29
3 divs nebeneinander mit dynamisch gleicher Höhe		HTML, Usability und Barrierefreiheit	19	18.01.2006 22:05
DIV's positionieren	scooter	HTML, Usability und Barrierefreiheit	10	12.01.2006 16:11
DIVs auf "echte" 100% der Seite setzen?	King2k	HTML, Usability und Barrierefreiheit	3	07.12.2005 15:15
Abstände 2er Divs voneinander.	'progman'	HTML, Usability und Barrierefreiheit	8	29.07.2005 11:42
DIVs nebeneinander	freitz	HTML, Usability und Barrierefreiheit	4	21.04.2005 22:47
DIVs visible -> hidden beim Laden der Seite		HTML, Usability und Barrierefreiheit	2	03.03.2005 22:20
[Erledigt] drei divs nebeneinander		HTML, Usability und Barrierefreiheit	5	10.01.2005 20:27
mehrere gleichnamige DIVs möglich?		HTML, Usability und Barrierefreiheit	6	26.08.2004 11:56

22.12.2004, 08:00
Gast Beiträge: n/a	Verschachtelung von DIV's bei unterschiedlichen Auflösungen Hallo an die CSS-Profis, es geht um die Seitengestaltung ohne Tabellen konform zu den Vorgaben des W3C. Voraussetzungen Der Inhalt ist komplett von der Gestaltung über eine CSS-Definition getrennt. Für die Positionierung von Inhalten werden keine Tabellen verwendet. Zumeist wird der DIV-Tag verwendet. In diesem Fall gibt es einen Haupt-DIV der zwei untergeordnete DIV's beinhaltet. Diese liegen nebeneinander und decken die Breite fast komplett ab. Alle DIV haben eine prozentuale Breite. Problem Das ganze funktioniert bei einer Bildschirmauflösung von 1024x768. Sobald die Auflösung auf 800x600 Pixel herunter geht schiebt sich der Rechte DIV unter den linken DIV. HINWEIS Bitte nicht auf CSS 4 YOU verweisen, denn dort steht die lösung auch nicht! Ich habe eine Testseite erzeugt in der die DIV's gefärbte Ränder haben, damit man direkt sieht was passiert, wenn man das Browserfenster in seiner Größe verändert. Evtl. hat einer von Euch eine Idee. Danke im Voraus.... Code: <!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" dir="ltr" lang="de" xml:lang="de"> <html> <head> <title>TestSeite</title> <style type="text/css"> .layout_content { margin: 0px 20px 10px 10px; padding: 0px 0px 0px 0px; height: 100%; border: 1px solid blue; } .layout_content_left { float: left; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; width: 79%; border: 1px solid green; } .layout_content_right { float: right; margin: 0px 0px 0px 0px; padding: 6px 6px 6px 6px; width: 19%; border: 1px solid red; } table { width: 100%; } </style> </head> <body> <div class="layout_content"> <div class="layout_content_left"> <table> <tr> <td>Spalte 1</td> <td>Spalte 2</td> <td>Spalte 3</td> </tr> </table> </div> <div class="layout_content_right">rechts</div> </div> </body> </html>


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

22.12.2004, 11:32
imported_Ben Erfahrener Benutzer Registriert seit: 18.09.2003 Beiträge: 13.598 PHP-Kenntnisse: Fortgeschritten	wenn ich mir das anschaue .. dann sieht das so aus, als wollte da jemand UNBEDINGT mit <div>-containern arbeiten. fragt man sich wieso. in einem anderen thread sprach ich von div-suppe ... das würde ich da einstufen. stichel __________________ Webentwickler-Blog - Buchbesprechung PHP Design Patterns - SQL-Antipatterns

22.12.2004, 11:35
Gast Beiträge: n/a	Content-DIV Hallo Thomas, sicher in meinem Beispiel macht der Content-DIV nicht wirklich Sinn. Das ist ein Ausschnitt aus einer größeren Seite die kplt. auf DIV's basiert. Der Content-DIV dient dann zur Kapselung der beiden anderen Inhalte. und Ben... vielen Dank für Deinen Beitrag

22.12.2004, 13:37
Gast Beiträge: n/a	Lösung ist eigentlich ganz einfach Hallo Jungs, vielen Dank für Eure hilfe. Eure Hinweise haben mich auf die richtige Spur gebracht und mir wieder einmal gezeigt, das Entwickler manchmal viel zu komplex denken, denn die Lösung ist so nah gewesen. Einfach den rechten DIV die width-Eigenschaft wegnehmen und schon ist die Bildschirmauflösung kein Problem mehr! Wobei es immernoch interessant wird, wenn der Inhalt im Linken-DIV so groß ist, das es trotzdem zu Problemen kommt, bzw. der Inhalt dann doch unter den Linken-DIV rutscht! Kann man den Umbruch verhindern? Danke nochmals an dieser Stelle für Eurern Support.

22.12.2004, 19:22
toscho Erfahrener Benutzer Registriert seit: 26.09.2004 Beiträge: 430	Du kannst den Umbruch nur verhindern, indem du dem Elternelement eine Minimalbreite gibst, die immer für das Nebeneinander beider Boxen ausreicht. Ich rate dir davon aber ab, weil du damit die Flexibilität deines Layouts zerstörst. Horizontale Scrollbalken werden oft, sehr oft übersehen. Die dahinter versteckten Inhalte kannst du dann auch gleich ganz weglassen. Und wenn ich noch eine persönliche Bitte anhängen darf: Sei so gut, und kürze deine Signatur auf ein erträgliches Maß. Auch das tut der Übersicht gut und spart denen Papier, die sich einen Thread mal ausdrucken. Danke. Gruß Thomas

23.12.2004, 06:07
Gast Beiträge: n/a	Anscheind gibt es keine Lösung für dieses Problem! Wie macht Ihr das auf Euren Seiten, denn ich kann wohl nicht der einzige sein, der das Problem hat?

23.12.2004, 20:46
toscho Erfahrener Benutzer Registriert seit: 26.09.2004 Beiträge: 430	ICh betrachte dasd nicht als Problem, sondern als besonderen Vorteil der Sprache CSS: Prinizipiell kann jedes Layout bis auf 20em hinab skalieren. Es gibt auch keinen Grund, das kaputtzumachen.