nicht angemeldet
3-Spalten-Layout, Content-Bereich mit variabler Breite
Gunnar BittersmannHallo,
für ein Webmagazin möchte ich ein 3-Spalten-Layout umsetzen. Mein bestreben ist, dabei das Design weitmöglichst vom Content zu trennen und vor allem auch auf Tabellen zur Gestaltung zu verzichten. Bisher bin ich schon gut vorangekommen, bin nun aber auf ein Problem gestoßen.
Das Layout soll aus 2 bis 3 Spalten bestehen, davon soll der Content-Bereich in der Mitte bzw. rechts immer soviel Breite wie möglich einnehmen, soviel, wie durch die anderen beiden Boxen eben noch vorhanden ist. Wie ich das mit einer Tabelle realisiert hätte, ist mir klar, hier hätte ich einfach einer Spalte bzw. zwei Spalten eine feste Breite zugewiesen, der anderen Spalte eine Breite von 100%. Aber wie mache ich das ganze analog mit CSS?
Hier ein Beispiel zur Verdeutlichung
http://www.pferde-liebe.de/ecuyer.de/gfx/beispiel.gif
Die bereits bestehende Seite inkl. CSS Datei findet ihr hier
http://www.pferde-liebe.de/ecuyer.de/index.php
Vielleicht könnt ihr mir ja helfen.
Liebe Grüße,
Sylvia
-
Tag Sylvia,
Also folgende Struktur hab ich grad im Firefox und IE probiert, die funktioniert (der Übersichtlichkeit halber schreib ich die Styles inline und nicht in eine CSS-Klasse)
...
<body>
<div id="links" style="width: 200px; float:left">LINKER BEREICH</div>
<div id="rechts" style="width: 200px; float:right">RECHTER BEREICH</div>
Hier kommt einfach Dein Hauptbereich mit ganz viel Text
Hier kommt einfach Dein Hauptbereich mit ganz viel Text
Hier kommt einfach Dein Hauptbereich mit ganz viel Text
Hier kommt einfach Dein Hauptbereich mit ganz viel Text
Hier kommt einfach Dein Hauptbereich mit ganz viel Text
</body>Viel erfolg,
Jörg
-
Hallo Jörg,
danke für deinen Vorschlag. Das Problem an der Sache ist nun, ich brauche definitiv eine Box, in der der Content dargestellt wird, weil die ebenfalls gestaltet wird, siehe auch die bereits fertig gestellte Seite. Der Content kommt später aus einer Datenbank und es werden mehrere Datenbankeinträge ausgelesen und jeder soll dann in einer eigenen Box dargestellt werden, das ist notwendig für die Umsetzung des Layouts. Deshalb hat mich der Vorschlag jetzt leider nicht so weiter gebracht :(
LG Sylvia-
Hallo Sylvia,
Vielleicht hilft dann Gunnars Post weiter, er hat noch ein Manko an meiner Lösung aufgedeckt und zu dessen Umgehung einen weiteren Container definiert.Vielleicht hilft das weiter?
Grüße,
Jörg
-
-
der Übersichtlichkeit halber schreib ich die Styles inline und nicht in eine CSS-Klasse
Hi Jörg,
Ich kann überhaupt nicht nachvollziehen, was daran übersichtlicher sein soll.Und wieso Klasse? Für einzeln identifizierbare Elemente sind IDs prädestiniert.
Außerdem geht bei dir der Text unter den div über die ganze Breite. Damit er das nicht tut, muss er auch noch in eine Box:
<body> <div id="links">LINKER BEREICH</div> <div id="rechts">RECHTER BEREICH</div> <div id="hauptbereich"> Hier kommt einfach Dein Hauptbereich mit ganz viel Text Hier kommt einfach Dein Hauptbereich mit ganz viel Text Hier kommt einfach Dein Hauptbereich mit ganz viel Text Hier kommt einfach Dein Hauptbereich mit ganz viel Text Hier kommt einfach Dein Hauptbereich mit ganz viel Text </div> </body>Im Stylesheet:
#links { width: 200px; float: left; } #links { width: 200px; float: right; }Anstelle von "links" und "rechts" wären aber Benennungen besser, die sich am Inhalt der Boxen, nicht an deren _gegenwärtig_ gewünschter Darstellung orientieren.
Und statt Breitenangaben in Pixeln lassen sich besser Angaben relativ zur Größe des Viewports und/oder zur Schriftgröße verwenden. Vorteilhaft finde ich width in % (gleiche Aufteilung bei allen Viewportbreiten) und min-width und max-width in em.
Live long and prosper,
Gunnar--
„Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)-
Copy & paste error detected!
#links { width: 200px; float: left; } #rechts { width: 200px; float: right; }Live long and prosper,
Gunnar--
„Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein) -
Hallo Gunnar,
Ich kann überhaupt nicht nachvollziehen, was daran übersichtlicher sein soll.
Ich meinte damit eigentlich nur, dass ich in diesem POST die Styles INLINE schreibe, weil man innerhalb des Forums besser sieht was zu was gehört, wenn die Styles inline geschrieben sind.
Dass sowas normalerweise in einen eigenen Sytle-Block gehört ist mir schon auch klar!Und wieso Klasse? Für einzeln identifizierbare Elemente sind IDs prädestiniert.
Pardon, Tippfehler, meinte Stylesheet statt Klasse.
Außerdem geht bei dir der Text unter den div über die ganze Breite. Damit er das nicht tut, muss er auch noch in eine Box
Stimmt, den Fall hab ich übersehen. Danke, guter Punkt.
Anstelle von "links" und "rechts" wären aber Benennungen besser, die sich am Inhalt der Boxen, nicht an deren _gegenwärtig_ gewünschter Darstellung orientieren.
Och nöö, Gunnar. Was denn noch, der fehlenbde Doctype in meinem post?
Das war ein Beispiel für eine DIV-Strukur, nicht für ein fertiges HTML-Dokument!Und statt Breitenangaben in Pixeln lassen sich besser Angaben relativ zur Größe des Viewports und/oder zur Schriftgröße verwenden. Vorteilhaft finde ich width in % (gleiche Aufteilung bei allen Viewportbreiten) und min-width und max-width in em.
Das kommt auf den jeweiligen Anwendungsfall an.
-
Ich meinte damit eigentlich nur, dass ich in diesem POST die Styles INLINE schreibe,
Ja, Jörg, mir war schon klar, was du meintest.
weil man innerhalb des Forums besser sieht was zu was gehört, wenn die Styles inline geschrieben sind.
Und genau das meine ich nicht. Ich denke, Trennung von Struktur und Layout ist immer vorteilhaft, auch in einem Forumposting.
(Außerdem will man ja n00bz nicht auf den falschen Weg führen.)
Och nöö, Gunnar. […] Das war ein Beispiel für eine DIV-Strukur, nicht für ein fertiges HTML-Dokument!
<quote cite="Otto">Wenn du schon mit Beispielen kommst, dann mit welchen, worunter der Junge sich auch was vorstellen kann!</quote> ;-)
Live long and prosper,
GunnarPS. <quote cite="Otto">Stell dir vor, du hast 28 Wecker und musst um 7 Uhr raus …</quote>
--
„Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)-
<quote cite="Otto">Stell dir vor, du hast 28 Wecker und musst um 7 Uhr raus …</quote>
<quote cite="SEIT WANN MUSS DER JUNGE UM 7 UHR RAUS? So wie der trödelt, muss der schon um halb 7 raus...">
*konter* ;)
Glück und langes Leben,
Jörg-
<quote cite="SEIT WANN MUSS DER JUNGE UM 7 UHR RAUS? So wie der trödelt, muss der schon um halb 7 raus...">
Ähm, Jörg, im cite-Attribut steht gewöhnlich nicht das Zitat, sondern dessen Quelle.
Und nun die Frage für unsere Kandidaten: Bringen sie diese Schnipsel in die richtige Reihenfolge:
< A Wenn du schon mit Beispielen kommst, dann mit welchen, worunter der Junge sich auch was vorstellen kann! >
< B Stell dir vor, du hast 28 Wecker und musst um 7 Uhr raus … >
< C Seit wann muss der Junge um 7 Uhr raus? So wie der trödelt, muss der schon um halb 7 raus! >
< D Du Papi, was ist 28 durch 7? >
Wer schafft’s als erster?
Live long and prosper,
GunnarPS. <quote cite="Otto">Stell dir vor, du hast 28 Wecker und musst um 7 Uhr raus …</quote>
*konter* ;)
Glück und langes Leben,
JörgLive long and prosper,
Gunnar--
„Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)-
< A Wenn du schon mit Beispielen kommst, dann mit welchen, worunter der Junge sich auch was vorstellen kann! >
< B Stell dir vor, du hast 28 Wecker und musst um 7 Uhr raus … >
< C Seit wann muss der Junge um 7 Uhr raus? So wie der trödelt, muss der schon um halb 7 raus! >
< D Du Papi, was ist 28 durch 7? >
D B C A
*schnauf*-
D B C A
Die richtige Antwort. In der grandiosen Zeit von 15.3 --- Minuten!
Nur schade, dass die Sendung schon lange vorbei ist. ;-)
Live long and prosper,
Gunnar--
„Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
-
-
-
-
-
-
Hallo Gunnar,
abgesehen zu deiner Empfehlung, auf variable Breitenangaben zurückzugreifen, was sich leider bei diesem Layout nicht vollständig realisieren lässt, kann ich leider nicht erkennen, inwiefern dein Posting nun für mich hilfreich sein sollte.
Gruß,
Sylvia-
[…] kann ich leider nicht erkennen, inwiefern dein Posting nun für mich hilfreich sein sollte.
Tut mir leid, Sylvia, ich kann in deinem Posting leider nicht erkennen, warum nicht.
Live long and prosper,
Gunnar--
„Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
-
-
-
-
Hi,
Das Layout soll aus 2 bis 3 Spalten bestehen, davon soll der Content-Bereich in der Mitte bzw. rechts immer soviel Breite wie möglich einnehmen,
also zwei- _oder_ link:http://de.selfhtml.org/css/layouts/anzeige/kopfundfuss.htm@title=drei-spaltig]?
Wenn das Dein Problem ist, solltest Du einem Vorfahrenelement (z.B. body) eine ID geben und über Nachfahrenselektoren die notwendigen Anpassungen vornehmen.freundliche Grüße
Ingo