Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit
GELÖST

Problem mit 3spaltigem bzw. 4spaltigem CSS-Layout

Frage Entwicklung CSS

Mitglied: dawson

dawson (Level 1) - Jetzt verbinden

27.06.2008, aktualisiert 24.08.2008, 4719 Aufrufe, 8 Kommentare

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 - Klicke auf das Bild, um es zu vergrößern
und das Beispiel ohne Newsblock: ba92cc6c961e806947513477f680208a-screenshot1 - Klicke auf das Bild, um es zu vergrößern

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

Ciao
Dawson
Mitglied: Mitchell
27.06.2008 um 10:52 Uhr
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
Bitte warten ..
Mitglied: dawson
27.06.2008 um 16:25 Uhr
Hier der gewünschte Code des Test-Templates:

01.
  
02.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
03.
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
04.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> 
05.
<head> 
06.
<title>Template</title> 
07.
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
08.
<meta name="title" content="Template" /> 
09.
<style type="text/css"> 
10.
div#page {width:1000px;background-color:#666} 
11.
div#head {width:100%;background-color:#00ffff} 
12.
div#left {float:left;width:200px;margin-right:10px;background-color:#ff0000} 
13.
div#center {float:left;width:580px;background-color:#aaa} 
14.
div#text {background-color:#00ff00} 
15.
div#inright {float:right;height:auto;width:150px;margin-left:10px;background-color:#6666ff} 
16.
div#right {float:left;width:200px;margin-left:10px;background-color:#DD6666} 
17.
div#footer {clear:both;width:100%;background-color:#00ffff} 
18.
</style> 
19.
</head> 
20.
<body> 
21.
 
22.
<div id="page"> 
23.
 
24.
	<div id="head">Kopf 
25.
	</div> 
26.
 
27.
	<div id="left">links 
28.
	</div> 
29.
 
30.
	<div id="center"> 
31.
		<div id="inright">Newsblock<br>Newsblock<br>Newsblock<br><br><br></div> 
32.
		<div id="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut  
33.
		labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.  
34.
		Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,  
35.
		consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,  
36.
		sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea  
37.
		takimata sanctus est Lorem ipsum dolor sit amet.</div> 
38.
	</div> 
39.
 
40.
	<div id="right">rechts</div> 
41.
 
42.
	<div id="footer">Fuß 
43.
	</div> 
44.
 
45.
</div> 
46.
 
47.
</body> 
48.
</html>
Bitte warten ..
Mitglied: Mitchell
01.07.2008 um 11:04 Uhr
ok, danke ^^

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

Mfg

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

Mfg

Mitchell
Bitte warten ..
Mitglied: dawson
01.07.2008 um 15:42 Uhr
Es ist ein CSS-Layout - ergo: keine Tabellen.
Es muss doch auch ohne, oder?
Keiner eine Idee?
Bitte warten ..
Mitglied: Mitchell
01.07.2008 um 22:24 Uhr
Hm...also das mit dem Ausdehen, wenn der Newsblock nicht da ist, bekommst du mit
01.
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
Bitte warten ..
Mitglied: Mitchell
24.08.2008 um 16:04 Uhr
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:

01.
div#inright {float:right;height:auto;width:150px; 
02.
margin-right:10px; 
03.
margin-bottom:70px; 
04.
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
Bitte warten ..
Ähnliche Inhalte
CSS
gelöst CSS Problem (2)

Frage von michi1983 zum Thema CSS ...

Entwicklung
gelöst IOS WebApp lädt CSS nicht mit (2)

Frage von maddig zum Thema Entwicklung ...

HTML
gelöst Angebundenes CSS funktioniert nach Link nicht mehr (4)

Frage von fugu zum Thema HTML ...

CSS
CSS Background-image erscheint einfach nicht (3)

Frage von MyApps2GO.de zum Thema CSS ...

Neue Wissensbeiträge
Windows Server

Umstellung SHA 1 auf SHA 2 - Migration der CA von CSP auf KSP

Tipp von Badger zum Thema Windows Server ...

Windows 10

Quato DTP94 unter Windows 10 x64 installieren und verwenden

Anleitung von anteNope zum Thema Windows 10 ...

Windows 10

Win10 1703 und Nutzerkennwörter bei Ersteinrichtung - erstaunliche Erkenntnis

(15)

Erfahrungsbericht von DerWoWusste zum Thema Windows 10 ...

Heiß diskutierte Inhalte
Windows 10
Windows 10 im Unternehmen? (28)

Frage von zorlayan zum Thema Windows 10 ...

LAN, WAN, Wireless
Ping u. DNS geht am Rechner nicht mehr (21)

Frage von Kuemmel zum Thema LAN, WAN, Wireless ...

LAN, WAN, Wireless
CNC Maschinen verlieren Netzwerkverbindung (kurioser Fehler) (18)

Frage von NoHopeNoFear zum Thema LAN, WAN, Wireless ...