dawson
Goto Top

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):
091e4a47bd3f24811a25d0b342255754-screenshot2
und das Beispiel ohne Newsblock:
ba92cc6c961e806947513477f680208a-screenshot1

Für Tipps oder auch weiterführende Links wär ich sehr dankbar.

Ciao
Dawson

Content-Key: 90760

Url: https://administrator.de/contentid/90760

Ausgedruckt am: 29.03.2024 um 10:03 Uhr

Mitglied: Mitchell
Mitchell 27.06.2008 um 10:52:49 Uhr
Goto Top
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
Mitglied: dawson
dawson 27.06.2008 um 16:25:41 Uhr
Goto Top
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>
Mitglied: Mitchell
Mitchell 01.07.2008 um 11:04:35 Uhr
Goto Top
ok, danke ^^

also, was genau willst du jetzt machen? Der Newsblock soll wo erscheinen, wenn nicht im Haupttext?

Mfg

Mitchell
Mitglied: dawson
dawson 01.07.2008 um 12:14:48 Uhr
Goto Top
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.
Mitglied: Mitchell
Mitchell 01.07.2008 um 12:44:30 Uhr
Goto Top
Dann mach 2 Tabellen draus. 1. Tabelle <text>, 2. Tabelle <newsblock>

Mfg

Mitchell
Mitglied: dawson
dawson 01.07.2008 um 15:42:22 Uhr
Goto Top
Es ist ein CSS-Layout - ergo: keine Tabellen.
Es muss doch auch ohne, oder?
Keiner eine Idee?
Mitglied: Mitchell
Mitchell 01.07.2008 um 22:24:30 Uhr
Goto Top
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
Mitglied: Mitchell
Mitchell 24.08.2008 um 16:04:14 Uhr
Goto Top
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:

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