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, 1463 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
Entwicklung
gelöst Benötige Hilfe bei Regular Expression (6)

Frage von Thomas91 zum Thema Entwicklung ...

Datenbanken
gelöst Hilfe bei MSSQL-Anweisung, Werte in andere Tabelle einfügen (8)

Frage von d4shoerncheN zum Thema Datenbanken ...

Windows Server
gelöst Domain Controller abgeschossen - benötige Hilfe - EILT (3)

Frage von Philzip zum Thema Windows Server ...

Microsoft Office
gelöst Übertrag in eine andere Tabelle (7)

Frage von charmeur zum Thema Microsoft Office ...

Neue Wissensbeiträge
Linux Netzwerk

Ping und das einstellbare Bytepattern

Erfahrungsbericht von LordGurke zum Thema Linux Netzwerk ...

Windows Update

Microsoft Update KB4034664 verursacht Probleme mit Multimonitor-Systemen

(3)

Tipp von beidermachtvongreyscull zum Thema Windows Update ...

Viren und Trojaner

CNC-Fräsen von MECANUMERIC werden (ggf.) mit Viren, Trojanern, Würmern ausgeliefert

(4)

Erfahrungsbericht von anteNope zum Thema Viren und Trojaner ...

Heiß diskutierte Inhalte
SAN, NAS, DAS
MSA 2050 RAID Konfig (21)

Frage von Leo-le zum Thema SAN, NAS, DAS ...

Netzwerkmanagement
Windows Server 2008 R2: "netsh reset" nicht verfügbar? (10)

Frage von RickTucker zum Thema Netzwerkmanagement ...

Netzwerkmanagement
Suche eine Software für Cloudverwaltung (6)

Frage von tsunami zum Thema Netzwerkmanagement ...

Google Android
Musik Wiedergabe am PC mit Smartphone über Bluetooth steuern (5)

Frage von justlukas zum Thema Google Android ...