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

Benötige Hilfe beim Umstieg von Tabellen zu DIVs

Frage Entwicklung CSS

Mitglied: mabue88

mabue88 (Level 2) - Jetzt verbinden

29.11.2014, aktualisiert 13:33 Uhr, 1443 Aufrufe, 2 Kommentare, 1 Danke

Hallo,

bisher habe ich die Elemente innerhalb von HTML mit Tabellen (<table></table>) positioniert.
Nun will ich aber DIVs stattdessen verwenden. Allerdings bekomme ich das nicht wirklich hin.

Hier mal ein Beispiel, was ich für den Anfang mal machen will:
67dd90a1eeea8cf29c07b828e79f77d8 - Klicke auf das Bild, um es zu vergrößern

Im Netz finde ich zwar sehr viel Informationen zum Umgang mit DIVs, aber es wird bisher nie das angezeigt, was ich will.
Vielleicht kann mir da jemand Starthilfe geben...

Wichtig ist, dass das Layout in IE, Firefox und Chrome korrekt angezeigt wird.

Danke!
Mitglied: colinardo
LÖSUNG 29.11.2014, aktualisiert um 13:35 Uhr
Hi Mabue,

Beispiel:
http://jsfiddle.net/jsaqvfzr/

01.
<!doctype html> 
02.
<html> 
03.
<head> 
04.
<meta charset="utf-8"> 
05.
<title>DIV-Test</title> 
06.
<style type="text/css"> 
07.
body{color:white} 
08.
#global{ 
09.
	position:absolute; 
10.
	top:0; 
11.
	left:0; 
12.
	right:0; 
13.
	bottom:0; 
14.
15.
#left{ 
16.
	position:absolute; 
17.
	width: 20%; 
18.
	left: 0; 
19.
	top: 0; 
20.
	bottom: 0; 
21.
	background-color: red; 
22.
	display:table; 
23.
	height: 100%; 
24.
25.
#center{ 
26.
	position:absolute; 
27.
	width:60%; 
28.
	left:20%; 
29.
	top:0; 
30.
	bottom:0; 
31.
	background-color:green; 
32.
	display:table; 
33.
	height:100%; 
34.
35.
#right{ 
36.
	position:absolute; 
37.
	width:20%; 
38.
	right:0; 
39.
	top:0; 
40.
	bottom:0; 
41.
	height:100%; 
42.
43.
#right-top{ 
44.
	position:absolute; 
45.
	width:100%; 
46.
	height:50%; 
47.
	background-color:orange; 
48.
	display:table; 
49.
50.
#right-bottom{ 
51.
	position:absolute; 
52.
	width:100%; 
53.
	height:50%; 
54.
	bottom:0; 
55.
	background-color:blue; 
56.
	display:table; 
57.
58.
.inner-text{ 
59.
	display:table-cell; 
60.
	text-align:center; 
61.
	vertical-align:middle; 
62.
63.
</style> 
64.
</head> 
65.
 
66.
<body> 
67.
<div id="global"> 
68.
	<div id="left"> 
69.
        <div class="inner-text"> 
70.
            DEMO-LEFT 
71.
        </div> 
72.
    </div> 
73.
    <div id="center"> 
74.
        <div class="inner-text"> 
75.
            DEMO-CENTER 
76.
        </div> 
77.
    </div> 
78.
    <div id="right"> 
79.
    	<div id="right-top"> 
80.
            <div class="inner-text"> 
81.
                DEMO RIGHT-TOP 
82.
            </div> 
83.
        </div> 
84.
        <div id="right-bottom"> 
85.
            <div class="inner-text"> 
86.
                DEMO RIGHT-BOTTOM 
87.
            </div> 
88.
        </div> 
89.
    </div> 
90.
</div> 
91.
</body> 
92.
</html>
Grüße Uwe
Bitte warten ..
Mitglied: mabue88
29.11.2014 um 13:34 Uhr
Vielen Dank!
Bitte warten ..
Ähnliche Inhalte
Datenbanken
gelöst Join über drei Tabellen (5)

Frage von Kimaro zum Thema Datenbanken ...

UMTS, EDGE & GPRS
gelöst Benötige LTE Router der Routing unterstützt (22)

Frage von semper zum Thema UMTS, EDGE & GPRS ...

Datenbanken
gelöst SQL ORDER BY und Join mit 2 Tabellen (7)

Frage von Dipps zum Thema Datenbanken ...

Neue Wissensbeiträge
RedHat, CentOS, Fedora

Fedora, RedHat, Centos: DNS-Search Domain setzen

(13)

Tipp von Frank zum Thema RedHat, CentOS, Fedora ...

Drucker und Scanner

Samsung SL-M4025ND, firmware update und (kompatible) Tonerkassetten

(1)

Erfahrungsbericht von markus-1969 zum Thema Drucker und Scanner ...

Heiß diskutierte Inhalte
LAN, WAN, Wireless
gelöst Komplett neues Netzwerk, Ubiquiti WLAN, Router, Switch (16)

Frage von Freak-On-Silicon zum Thema LAN, WAN, Wireless ...

CMS
Lokales Wordpress im LAN - wie aufsetzen? (16)

Frage von Static zum Thema CMS ...

Windows Userverwaltung
gelöst Wie verfahrt Ihr mit den Windows-Benutzerkonten und -dateien von ausgeschiedenen Mitarbeitern? (14)

Frage von Bl0ckS1z3 zum Thema Windows Userverwaltung ...

LAN, WAN, Wireless
IP im privaten Netz nicht erreichbar (14)

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