zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Kombination aus fixen und variablen Spalten

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.12.2008, 23:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.12.2008
Beiträge: 16
sockenloch befindet sich auf einem aufstrebenden Ast
Standard Kombination aus fixen und variablen Spalten

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.

Geändert von sockenloch (08.12.2008 um 23:55 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.12.2008, 00:08
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.042
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.12.2008, 09:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.12.2008
Beiträge: 16
sockenloch befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

Zitat:
Zitat von andir Beitrag anzeigen
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?
Mit Zitat antworten
  #4 (permalink)  
Alt 09.12.2008, 10:13
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.087
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

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.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #5 (permalink)  
Alt 09.12.2008, 10:14
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.042
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #6 (permalink)  
Alt 09.12.2008, 17:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.12.2008
Beiträge: 16
sockenloch befindet sich auf einem aufstrebenden Ast
Standard

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.)
Mit Zitat antworten
  #7 (permalink)  
Alt 10.12.2008, 01:19
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

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
Mit Zitat antworten
  #8 (permalink)  
Alt 10.12.2008, 18:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.12.2008
Beiträge: 16
sockenloch befindet sich auf einem aufstrebenden Ast
Standard

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 :-/)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:44 Uhr.