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, 4692 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.

Mit freundlichen Grüßen

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?

Mit freundlichen Grüßen

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>

Mit freundlichen Grüßen

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.

Mit freundlichen Grüßen

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.

Mit freundlichen Grüßen

Mitchell
Bitte warten ..
Neuester Wissensbeitrag
Internet

Unbemerkt - Telekom Netzumschaltung! - BNG - Broadband Network Gateway

(3)

Erfahrungsbericht von ashnod zum Thema Internet ...

Ähnliche Inhalte
Exchange Server
Problem mit POP3-Abruf eines Exchange-2013-Postfachs

Frage von YotYot zum Thema Exchange Server ...

Multimedia & Zubehör
gelöst BENQ Beamer Fernbedingung Frequenz Problem (4)

Frage von xbast1x zum Thema Multimedia & Zubehör ...

Windows Server
Google Chrome Web Store Problem auf Terminal Farm

Frage von dakoerry zum Thema Windows Server ...

Multimedia & Zubehör
gelöst Problem: DVI zu VGA (8)

Frage von Protected zum Thema Multimedia & Zubehör ...

Heiß diskutierte Inhalte
Windows Server
Outlook Verbindungsversuch mit Exchange (15)

Frage von xbast1x zum Thema Windows Server ...

Grafikkarten & Monitore
Tonprobleme bei Fernseher mit angeschlossenem Laptop über HDMI (11)

Frage von Y3shix zum Thema Grafikkarten & Monitore ...

Microsoft Office
Keine Updates für Office 2016 (11)

Frage von Motte990 zum Thema Microsoft Office ...