|
|||
![]()
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) |
Sponsored Links |
|
|||
![]()
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 |
Sponsored Links |
|
|||
![]()
Hallo,
Zitat:
Es soll so funktionieren (der Einfachkeit halber nur zwei Spalten, links Menü, rechts Inhalt): Code:
+------+----------------------+ |Berlin| | |Köln | | |Essen | | +------+----------------------+ Code:
+----------+------------------+ |Berlin | | |Köln | | |Essen | | |Düsseldorf| | +----------+------------------+ |
|
|||
![]()
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 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> 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 |
|
|||
![]()
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.) |
|
||||
![]()
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> |
|
|||
![]()
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 | |
Ansicht | |
|
|
![]() |
||||
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 |