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, 1329 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 ..
Neuester Wissensbeitrag
Microsoft

Lizenzwiederverkauf und seine Tücken

(5)

Erfahrungsbericht von DerWoWusste zum Thema Microsoft ...

Ähnliche Inhalte
DSL, VDSL
Umstieg von 1und1 (ADSL2+) auf Unitymedia (7)

Erfahrungsbericht von windowsboy zum Thema DSL, VDSL ...

Hyper-V
Benötige Hilfe bei Hyper-V-Core 2016 div. Befehle gesucht (4)

Frage von Stefan007 zum Thema Hyper-V ...

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

Frage von Philzip zum Thema Windows Server ...

Heiß diskutierte Inhalte
LAN, WAN, Wireless
FritzBox, zwei Server, verschiedene Netze (18)

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

Windows Netzwerk
Windows 10 RDP geht nicht (16)

Frage von Fiasko zum Thema Windows Netzwerk ...

Windows Server
Outlook Verbindungsversuch mit Exchange (15)

Frage von xbast1x zum Thema Windows Server ...