8
Problem mit 3spaltigem bzw. 4spaltigem CSS-Layout
Hallo,
ich weiß, der Titel des Beitrags ist nicht gut gewählt, ich hoffe, ich kann mich wenigstens jetzt im Text gut genug ausdrücken.
Also, was ich brauche ist ein grundsätzlich 3spaltiges CSS-Layout. Soweit kein Problem.
- linke Spalte Navi
- rechte Spalte Bild
- mittlere Spalte steht Content
Die mittlere Spalte aber macht mir Kopfzerbrechen.
Sie soll so aufgebaut sein, dass darin der Haupttext steht und rechts daneben eine Art Newsblock (ca. 100px breit und 200-400px hoch, variabel) passt.
Noch immer kein Problem.
Ich habe also jetzt ein Div im Div erstellt und den Newsblock mit float:right ausgezeichnet.
Das passt aber nicht so 100%, da jetzt logischerweise der Haupttext um den Newsblock rumfließt. Darf er nicht. Er sollte immer auf seiner Breite bleiben.
Die Breite des Haupttextes kann ich aber nicht fix machen, da es vorkommen kann, dass der Newsblock auf manchen Seiten NICHT vorkommt.
Dann soll nämlich der Haupttext in der Mitte die ganze Breite nutzen. (mit fixer Breite des Haupttextes würde ja eine dritte, leere Spalte entstehen - nicht schön).
Wenn ich das ganze als 4spaltiges Layout mache, habe ich es nicht geschafft, den Haupttext-Block bei nicht-vorhanden-sein des Newsblocks sich ausdehnen zu lassen.
Ich hoffe, ich hab mich verständlich genug ausgedrückt.
Vielleicht steh ich ja absolut auf´m Schlauch und die Lösung ist total simple... aber ich seh sie nicht.
Hier das Beispiel mit Newsblock (so wie es momentan noch ist, aber nicht sein soll - der blaue Block soll (auch wenn kein Inhalt mehr drin ist) nach unten weiter gehen, damit der Text nicht den Block umfließt):
und das Beispiel ohne Newsblock: 
Für Tipps oder auch weiterführende Links wär ich sehr dankbar.
Ciao
Dawson
ich weiß, der Titel des Beitrags ist nicht gut gewählt, ich hoffe, ich kann mich wenigstens jetzt im Text gut genug ausdrücken.
Also, was ich brauche ist ein grundsätzlich 3spaltiges CSS-Layout. Soweit kein Problem.
- linke Spalte Navi
- rechte Spalte Bild
- mittlere Spalte steht Content
Die mittlere Spalte aber macht mir Kopfzerbrechen.
Sie soll so aufgebaut sein, dass darin der Haupttext steht und rechts daneben eine Art Newsblock (ca. 100px breit und 200-400px hoch, variabel) passt.
Noch immer kein Problem.
Ich habe also jetzt ein Div im Div erstellt und den Newsblock mit float:right ausgezeichnet.
Das passt aber nicht so 100%, da jetzt logischerweise der Haupttext um den Newsblock rumfließt. Darf er nicht. Er sollte immer auf seiner Breite bleiben.
Die Breite des Haupttextes kann ich aber nicht fix machen, da es vorkommen kann, dass der Newsblock auf manchen Seiten NICHT vorkommt.
Dann soll nämlich der Haupttext in der Mitte die ganze Breite nutzen. (mit fixer Breite des Haupttextes würde ja eine dritte, leere Spalte entstehen - nicht schön).
Wenn ich das ganze als 4spaltiges Layout mache, habe ich es nicht geschafft, den Haupttext-Block bei nicht-vorhanden-sein des Newsblocks sich ausdehnen zu lassen.
Ich hoffe, ich hab mich verständlich genug ausgedrückt.
Vielleicht steh ich ja absolut auf´m Schlauch und die Lösung ist total simple... aber ich seh sie nicht.
Hier das Beispiel mit Newsblock (so wie es momentan noch ist, aber nicht sein soll - der blaue Block soll (auch wenn kein Inhalt mehr drin ist) nach unten weiter gehen, damit der Text nicht den Block umfließt):
Für Tipps oder auch weiterführende Links wär ich sehr dankbar.
Ciao
Dawson
Auf Facebook teilen
Auf Twitter teilen
Auf Reddit teilen
Auf Linkedin teilenBitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 90760
Url: https://administrator.de/contentid/90760
Ausgedruckt am: 26.11.2024 um 04:11 Uhr
8 Kommentare
Neuester Kommentar
Hi Dawson,
wir könnten dir viel besser helfen, wenn du uns mal deinen Quelltext offenbarst. Sonst können wir nicht sehen, wo es hängt bzw. wo evtl was falsch gesetzt ist.
Mfg
Mitchell
wir könnten dir viel besser helfen, wenn du uns mal deinen Quelltext offenbarst. Sonst können wir nicht sehen, wo es hängt bzw. wo evtl was falsch gesetzt ist.
Mfg
Mitchell
Hier der gewünschte Code des Test-Templates:
<!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>Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="title" content="Template" />
<style type="text/css">
div#page {width:1000px;background-color:#666}
div#head {width:100%;background-color:#00ffff}
div#left {float:left;width:200px;margin-right:10px;background-color:#ff0000}
div#center {float:left;width:580px;background-color:#aaa}
div#text {background-color:#00ff00}
div#inright {float:right;height:auto;width:150px;margin-left:10px;background-color:#6666ff}
div#right {float:left;width:200px;margin-left:10px;background-color:#DD6666}
div#footer {clear:both;width:100%;background-color:#00ffff}
</style>
</head>
<body>
<div id="page">
<div id="head">Kopf
</div>
<div id="left">links
</div>
<div id="center">
<div id="inright">Newsblock<br>Newsblock<br>Newsblock<br><br><br></div>
<div id="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>
<div id="right">rechts</div>
<div id="footer">Fuß
</div>
</div>
</body>
</html>
ok, danke ^^
also, was genau willst du jetzt machen? Der Newsblock soll wo erscheinen, wenn nicht im Haupttext?
Mfg
Mitchell
also, was genau willst du jetzt machen? Der Newsblock soll wo erscheinen, wenn nicht im Haupttext?
Mfg
Mitchell
Die Site soll sich wie bei den beiden Bildern oben verhalten. Wenn der Newsblock vorhanden ist
(ein Script liest den Inhalt des Verzeichnisses aus und schaut ob news.php vorhanden ist, wenn ja, wirds inkludiert) soll er rechts vom Haupttext dargestellt werden, aber der Text soll eben NICHT drum rum fließen.
Und wenn der Newsblock nicht vorhanden ist, soll der Haupttext die gesamte Breite ausnutzen.
Soweit das Problem.
(ein Script liest den Inhalt des Verzeichnisses aus und schaut ob news.php vorhanden ist, wenn ja, wirds inkludiert) soll er rechts vom Haupttext dargestellt werden, aber der Text soll eben NICHT drum rum fließen.
Und wenn der Newsblock nicht vorhanden ist, soll der Haupttext die gesamte Breite ausnutzen.
Soweit das Problem.
Dann mach 2 Tabellen draus. 1. Tabelle <text>, 2. Tabelle <newsblock>
Mfg
Mitchell
Mfg
Mitchell
Es ist ein CSS-Layout - ergo: keine Tabellen.
Es muss doch auch ohne, oder?
Keiner eine Idee?
Es muss doch auch ohne, oder?
Keiner eine Idee?
Hm...also das mit dem Ausdehen, wenn der Newsblock nicht da ist, bekommst du mit
<code style="html">display:table-row
hin, aber das Nichtumfließen des Textes bekomme ich irgendwie nicht hin, ohne den Text mit dem Newsblock zu überlappen.
Mfg
Mitchell
<code style="html">display:table-row
hin, aber das Nichtumfließen des Textes bekomme ich irgendwie nicht hin, ohne den Text mit dem Newsblock zu überlappen.
Mfg
Mitchell
hi dawson,
ist zwar schon lange her, aber evtl. hast du ja noch keine Lösung. Ich hab den Beitrag schlichtweg vergessen und dann übersehen, trotzdem hier eine Lösung:
Damit hat der Newsblock platz für sich geschaffen und sollte er durch sein "div=inright" nicht inkludiert werden, nutzt der Text den gesamten Raum aus.
Mfg
Mitchell
ist zwar schon lange her, aber evtl. hast du ja noch keine Lösung. Ich hab den Beitrag schlichtweg vergessen und dann übersehen, trotzdem hier eine Lösung:
div#inright {float:right;height:auto;width:150px;
margin-right:10px;
margin-bottom:70px;
margin-left:10px;background-color:#6666ff} Damit hat der Newsblock platz für sich geschaffen und sollte er durch sein "div=inright" nicht inkludiert werden, nutzt der Text den gesamten Raum aus.
Mfg
Mitchell
