Kombination aus fixen und variablen Spalten

sockenloch · #1 (**permalink**) 08.12.2008, 23:38

Hallo!

Ich CSS-Anfänger wage mich an ein 3-Spalten-Layout. Die Grundprinzipien (Menüpunkte im XHTML als <ul>-Elemente, <div>-Container, float, clear, ...) habe ich einigermaßen verstanden und kriege es sowohl mit festen Spaltenbreiten als auch mit dynamischen hin, die sich der Breite des Browserfensters anpassen. Doch nun möchte ich eine Kombination davon:

Die erste Spalte soll die Menüstruktur enthalten, die per CSS formatiert wird. Die Spalte soll so breit sein, daß der längste Menüpunkt gerade noch hineinpaßt, unabhängig von der Schriftgröße, die der Benutzer im Browser ändern kann.

Die dritte Spalte ist erst mal nicht so wichtig. Die kann eine feste oder flexible Breite erhalten, was einfacher ist.

Die zweite Spalte, die den Inhalt enthält, soll den ganzen Rest der Fensterbreite ausfüllen.

Hat jemand ein Beispiel dafür (Link genügt)? In all meinen Versuchen ragte irgendwann ein Menüpunkt über die Spalte hinaus oder die Spalte wurde auch durch den längsten Menüpunkt nicht ausgefüllt, hätte also schmaler werden können.

Ersatzweise würde mir auch eine Antwort auf http://xhtmlforum.de/36099-spezielle...tenbreite.html genügen, wobei die 3. Spalte wie schon erwähnt nicht so wichtig ist.

Danke.

andir · #2 (**permalink**) 09.12.2008, 00:08

Du kannst deiner Navispalte eine Breite in em mitgeben. ( ausprobieren, so 20 em sollten reichen, wenn du längere Worte hast, anpassen), dein Inhaltscontainer bekommt einen entsprechenden margin.

sockenloch · #3 (**permalink**) 09.12.2008, 09:31

Hallo,

Zitat:

Zitat von andir

Du kannst deiner Navispalte eine Breite in em mitgeben. ( ausprobieren, so 20 em sollten reichen, wenn du längere Worte hast, anpassen), dein Inhaltscontainer bekommt einen entsprechenden margin.

Ok, das wäre eine Idee, um unterschiedliche Schriftgrößen in den Griff zu bekommen, aber dann muß ich den em-Wert doch immer wieder anpassen, wenn ein längerer Menüpunkt hinzukommt oder der längste wegfällt. Oder verstehe ich hier etwas Grundsätzliches nicht?

Es soll so funktionieren (der Einfachkeit halber nur zwei Spalten, links Menü, rechts Inhalt):

Code:

+------+----------------------+
|Berlin|                      |
|Köln  |                      |
|Essen |                      |
+------+----------------------+

Kommt nun ein neuer, längerer Menüpunkt hinzu, soll sich auch bei gleicher Schriftgröße die linke Spalte in ihrer Breite automatisch daran anpassen (auf Kosten der rechten Spalte natürlich):

Code:

+----------+------------------+
|Berlin    |                  |
|Köln      |                  |
|Essen     |                  |
|Düsseldorf|                  |
+----------+------------------+

Geht sowas überhaupt mit reinem CSS?

hubspe · #4 (**permalink**) 09.12.2008, 10:13

Moin,

Wie soll sich die Breite automatisch anpassen, wenn du sie per CSS festgelegt hast?
Selbst wenn du keine Breite festlegst, kann die Spalte nur so breit werden wie Platz ist.
Wenn du ohne Angabe von width floatest werden diese Elemente auf die Breite ihres Inhaltes geschrumpft (shrink-to-fit-Verhalten!).

wenn eine Spalte eine genau definierte Breite hat und der Inhalt einer Zeile ist breiter als die Spalte hast du zwei Möglichkeiten:
-einen Zeilenumbruch
-die Spalte verbreitern, sodaß die lange Zeile hineinpaßt.

Wenn man eine Seite baut stehen die Menüpunkte doch i.d.R. von vornherein fest, sodaß man die Breite der Menüspalte bequem festlegen kann.

Kommen später noch Menüpunkte hinzu, die horizontal etwas mehr Platz beanspruchen, wird die Breite der Menüspalte und ggf. die der anderen Spalten entsprechend angepaßt.
Sollte doch eigentlich kein Problem sein.

andir · #5 (**permalink**) 09.12.2008, 10:14

Jein.

Du kannst den navicontainer so dimensionieren, dass er alle Eventualitäten berücksichtigt, sprich, etwas "großzügiger" dimensionieren oder deinem Inhaltscontainer ein größeres Margin mitgeben.

Oder - aber das hat auch seinen Nachteil:

Code:

white-space:nowrap

für die Textinhalte der Navi ( links) verwenden und dem Container /Listenpunkt ein overflow: visible mitgeben.
In diesem Fall dürfte der Navicontainer keine explizite Breite erhalten, sondern wird durch seinen Inhalt dimensioniert.

Jedenfalls ist aber der Konflikt mit dem Inhaltscontainer vorprogrammiert.

Oder und das ist hier meine bevorzugte Lösung: Navicontainer wie oben mit einer Breite die vom Inhalt bestimmt wird, der Inhaltscontainer wird daneben gefloatet. Dann kommen die beiden sich nicht ins Gehege. Beide liegen innerhalb eines Containers mit definierter Breite. Die dritte Spalte wäre dann neben dem Container, der Navi und Inhalt hat, zu floaten. Auch hier wird eine definierte Breite vergeben.

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
    <title>Titel</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
        <style type="text/css">

* {
            margin:0;
            padding: 0;
        }
body {
    width: 100%;
}
#wrap {
    width: 100%;
}
#contentwrap {
    float: left;
    width: 70%;
}
#navi {
    float: left;
    background-color: red;
    color: white;
}
#inhalt {
    float: left;
    background-color: #ffa;
    color: black;
}
#dritter {
    width: 29%;
    background-color: #ccc;
    float: left;
    clear: after;

}
        </style>
</head>

<body>
<div id="contentwrap">
    <div id="navi"><ul><li>eins</li><li>eintausend</li><li>dreitausendeinhundert</li></ul></div><div id="inhalt"><p>Testabsatz</p><p>Testabsatz</p><p>Testabsatz</p><p>Testabsatz</p><p>Testabsatz im Inhalt</p><p>Testabsatz</p></div><br style="clear:left;" /></div><div id="dritter"><p>Dritte Spalte</p></div>
</body>
</html>

Aber auch das hat seine Nachteile...

Alternativ müßtest Du Javascript einsetzen, die Breite des Navicontainers ermitteln und dem Inhaltscontainer auf diese Weise das margin verpassen.

Ich ziehe etwas "Luft" um die Container vor, aber auch das hängt davon ab, was du damit verwirklichen willst.

sockenloch · #6 (**permalink**) 09.12.2008, 17:11

Das geht schon in die Richtung dessen, was ich erreichen möchte. Wenn sich jetzt noch die mittlere Spalte bis zur rechten komplett ausdehnt, würde ich den Rest wohl hinkriegen. Oder, vereinfacht ausgedrückt:

Linke Spalte: So viel wie benötigt
Rechte Spalte: 10% oder 100 Pixel (egal, was einfacher ist)
Mittlere Spalte: Alles, was übrigbleibt

Doch so viel ich mit unterschiedlichen "width"-Werten und <div>-Verschachtelungen herumexperimentiere, ich bekomme nur entweder das gewünschte Verhalten in der linken Spalte oder eine mittlere Spalte, die den Rest auffüllt, aber niemals beides zusammen.

Vielleicht denke ich hier jedoch auch nur zu kompliziert?

(JavaScript ist tabu, die Seite soll auch mit abgeschaltetem JS gut funktionieren.)

etux · #7 (**permalink**) 10.12.2008, 01:19

Zugegeben nicht optimal, da auf die Schnelle gebastelt:

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>
	<title>XHTML-Forum</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="Content-Language" content="de" />
	<style type="text/css">
		/* <![CDATA[ */
* { margin: 0; padding: 0; border: 0; }
html {
	width: 100%;
	font-size: 100.01%;
}
body {
	width: 100%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	line-height: 1.4;
	text-align: center;
}
* html body {
	font-size: x-small;
	f\ont-size: small;
}
#container {
	width: 90%;
	margin: 0 auto;
	text-align: left;
	background: #999;
}
#header {
	background: #666;
}
#wrapper {
	float: left;
	display: table;
	width: 80%;
	background: #bbb;
}
#sidebar {
	float: right;
	width: 20%;
	background: #ddd;
}
#footer {
	clear: both;
	width: 100%;
	background: #666;
}

#menu {
	display: table-cell;
	white-space: nowrap;
	background: #ccc;
}
* html #menu {
	float: left;
}
#content {
	display: table-cell;
	background: #fff;
}
* html #content {
	float: right;
}

		/* ]]> */
	</style>
</head>

<body>

<div id="container">
	<div id="header">
		<h1>header</h1>
	</div>
	<div id="wrapper">
		<div id="menu">
			<h2>Navigation</h2>
			<ul>
				<li id="navigation1"><a href="#">navigation1</a></li>
				<li id="navigation2"><a href="#">navigation2</a></li>
				<li id="navigation3"><a href="#">navigation3</a></li>
				<li id="navigation4"><a href="#">navigation4 kann länger werden</a></li>
				<li id="navigation5"><a href="#">navigation5</a></li>
				<li id="navigation6"><a href="#">navigation6</a></li>
				<li id="navigation7"><a href="#">navigation7</a></li>
				<li id="navigation8"><a href="#">navigation8</a></li>
			</ul>
		</div>
		<div id="content">
			<h2>Seitentitel h2</h2>
			<h3>Überschrift h3</h3>
			<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
			<h3>Überschrift h3</h3>
			<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
		</div>
	</div>
	<div id="sidebar">
		sidebar
	</div>
	<div id="footer">
		footer
	</div>
</div>

</body>
</html>

Grüße: Emil

sockenloch · #8 (**permalink**) 10.12.2008, 18:10

Das ist ja genial - so ähnlich hatte ich es mir vorgestellt. Danke!

In einem meiner Experimente hatte ich exakt Deine <div>-Struktur verwendet, doch der entscheidende Trick ist offenbar das display:table-cell (auf diese Idee wäre ich nie gekommen). Und weil das mit dem IE nicht tut, hast Du dort Floats verwendet. Warum tut die Float-Lösung nicht mit dem Firefox?

Im IE fällt das Ganze übrigens in sich zusammen, wenn man das Fenster extrem schmal macht, aber das sollte nicht weiter stören.

(Doch ich sehe, ich muß noch viel über CSS lernen und Erfahrungen sammeln - wenn ich mir hier die Threads durchlese, dann gewinne ich manchmal den Eindruck, als ob da beim Seitenaufbau CSS genauso vergewaltigt werden muß wie früher die HTML-Tabellen :-/)

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
Problem beim ein/ausblenden von Spalten in Tabellen via CSS und JavaScript	chrisol_76	CSS	2	21.07.2008 18:37
3 dynam. Spalten mit Inhaltsüberlauf	spacegaier	CSS	6	12.10.2007 01:24
mysql: kann man count() in select Anfragen nicht mit anderen Spalten kombinieren?	braindead	Serveradministration und serverseitige Scripte	5	13.03.2007 23:53
3 Spalten immer gleich hoch. Wie mach ich das?	Fanello	CSS	7	21.02.2006 16:39