Top-Themen

Aktuelle Themen (A bis Z)

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

Frage Entwicklung CSS

GELÖST

Problem mit 3spaltigem bzw. 4spaltigem CSS-Layout

Mitglied: dawson

dawson (Level 1) - Jetzt verbinden

27.06.2008, aktualisiert 24.08.2008, 4736 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
CSS Problem
gelöst Frage von michi1983CSS2 Kommentare

Hallo Admins, eventuell kann mir ja hier einer weiterhelfen, ich stehe offenbar auf der Leitung. Auf folgender Website (die ...

HTML
CSS 3 - "viewport" Kein gültiges CSS?
gelöst Frage von ukodusHTML2 Kommentare

Hey Leute, gerade hab ich den Code (@viewport { }) durch den CSS-Überprüfer ) durchgejagt und er entgegnete: "Einlese-Fehler ...

CSS
Hilfe bei CSS
gelöst Frage von emeriksCSS8 Kommentare

Hi, vorne weg: Bin in HTML und CSS nicht so die Leuchte. Ich will bloß ein paar Reports erstellen ...

Webentwicklung
Webprogrammierung mit schickem Layout
Frage von MasterSchlumpfWebentwicklung3 Kommentare

Hallo zusammen, ich bin gerade dabei mich in das Thema Webprogrammierung einzuarbeiten. Womit bzw. wie erstellt man diese schicken, ...

Neue Wissensbeiträge
Linux

Meltdown und Spectre: Linux Update

Information von Frank vor 2 TagenLinux

Meltdown (Variante 3 des Prozessorfehlers) Der Kernel 4.14.13 mit den Page-Table-Isolation-Code (PTI) ist nun für Fedora freigegeben worden. Er ...

Tipps & Tricks

Solutio Charly Updater Fehlermeldung: Das Abgleichen der Dateien in -Pfad- mit dem Datenobject ist fehlgeschlagen

Tipp von StefanKittel vor 2 TagenTipps & Tricks

Hallo, hier einmal als Tipp für alle unter Euch die mit der Zahnarztabrechnungssoftware Charly von Solutio zu tun haben. ...

Sicherheit

Meltdown und Spectre: Wir brauchen eine "Abwrackprämie", die die CPU-Hersteller bezahlen

Information von Frank vor 3 TagenSicherheit12 Kommentare

Zum aktuellen Thema Meltdown und Spectre: Ich wünsche mir von den CPU-Herstellern wie Intel, AMD oder ARM eine Art ...

Sicherheit

Meltdown und Spectre: Realitätscheck

Information von Frank vor 3 TagenSicherheit12 Kommentare

Die unangenehme Realität Der Prozessorfehler mit seinen Varianten Meltdown und Spectre ist seit Juni 2017 bekannt. Trotzdem sind immer ...

Heiß diskutierte Inhalte
E-Mail
Erfahrungen mit hMailServer gesucht
Frage von it-fraggleE-Mail10 Kommentare

Hallo, meine neue Stelle möchte einen eigenen Mailserver. Ich als Linuxkind war direkt geistig mit Postfix dabei. Leider wollen ...

Entwicklung
VBS: alle PDF-Dateien in einem Ordner gleichzeitig öffnen
gelöst Frage von JuweeeEntwicklung9 Kommentare

Hallo, ich habe in deiner Ordnerstruktur (.\Tagesberichte\xx.18\) mehrere dynamische PDF-Formulare (mit LCD erstellt). Die Berichtsformulare sind im Layout alle ...

Firewall
Penetrationstester-Labor - Firewalls
Frage von Oli-nuxFirewall9 Kommentare

Mich würde interessieren warum man beim Einrichten eines Penetrationstester-Labor (VMs) die Firewall der Systeme deaktivieren soll? Hat das nur ...

Netzwerkgrundlagen
IPv6 Inter-VLAN Routing
gelöst Frage von clSchakNetzwerkgrundlagen9 Kommentare

Hi ich befasse mich gerade mit der Implementierung von IPv6 was bisher (in einem VLAN) korrekt funktioniert inkl. DNS ...