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

gelöst Benötige Hilfe beim Umstieg von Tabellen zu DIVs

Mitglied: mabue88

mabue88 (Level 2) - Jetzt verbinden

29.11.2014, aktualisiert 13:33 Uhr, 1485 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
Sicherheit
Benötige Hilfe bei einer Definition
Frage von D1Ck3nSicherheit1 Kommentar

Hallo Leute, ich versuche momentan einen vorgegebenen Katalog mit Fragen zu der Informations-Sicherheit verständlich in einer Dokumentation festzuhalten, aber ...

Server-Hardware

Benötige Hilfe für Serverauswahl

gelöst Frage von Tim.KramerServer-Hardware14 Kommentare

Hallo zusammen, ich brauche eure Hilfe. Seit kurzer Zeit arbeite ich für eine neue Firma und dort existiert so ...

Entwicklung

Benötige Hilfe bei Regular Expression

gelöst Frage von Thomas91Entwicklung6 Kommentare

Hallo, ich benötige hilfe bei einem Regularen Ausdruck: dieser sollte wenn möglich ohne /ig auf zwei Zeilen einen treffer ...

Batch & Shell

Benötige Hilfe mit "move-item" in verbindung mit "-force"

gelöst Frage von Slider-OverrideBatch & Shell4 Kommentare

Ich bin seit tagen ab verzweifeln, Ich benötige einen simplen befehl um Ordern (welche datein beinhalten zu verschieben) Da ...

Neue Wissensbeiträge
Windows 10
Zero-Day-Lücke in Microsoft Edge
Information von kgborn vor 21 StundenWindows 10

In Microsofts Edge-Browser klafft wohl eine nicht geschlossene (0-Day) Sicherheitslücke im Just In Time Compiler (JIT Compiler) für Javascript. ...

Sicherheit
Microsoft und Skype: Sicherheit
Information von kgborn vor 21 StundenSicherheit

Die Tage gab es ja einige Berichte zur Sicherheit des Skype-Updaters. Der Updater von Skype läuft unter dem Konto ...

Datenschutz

Behörden ignorieren Sicherheitsbedenken gegenüber Windows 10

Information von Penny.Cilin vor 1 TagDatenschutz8 Kommentare

Hallo, passend zum Thema Ablösung LIMUX in München ein Beitrag bei Heise (siehe Link folgend). Behörden ignorieren Sicherheitsbedenken gegenüber ...

Sicherheit
Information Security Hub Munich airport
Information von brammer vor 1 TagSicherheit

Hallo, Neues Center für Cyber Kriminalität am Münchener Flughafen brammer

Heiß diskutierte Inhalte
Exchange Server
Exchange Postfach Einbindung Betriebs-rat -Arzt, Bewerbung .
gelöst Frage von YellowcakeExchange Server24 Kommentare

Hey ich habe da mal eine Denksport Aufgabe bekommen Genutzt wird ein Exchange Server 2010. hier gibt es den ...

Windows Server
Delgegierte OU via RDP verwalten - Objektverwaltung zuweisen
gelöst Frage von TOAOICEWindows Server12 Kommentare

Hallo, ich habe folgendes Problem. Ich möchte in meiner Domäne (Server2016), einer Gruppe (OUAdmin) Berechtigungen auf die OU Test ...

LAN, WAN, Wireless
Gigabit-Lan mit zwei 4-adrigen Kabeln?
Frage von ArvedirmerLAN, WAN, Wireless11 Kommentare

Ich habe folgendes Problem: Ich betreue eine kleine Firma die sich im 1.Stock eines Gebäudes befindet. Es existiert ein ...

Datenschutz
Behörden ignorieren Sicherheitsbedenken gegenüber Windows 10
Information von Penny.CilinDatenschutz8 Kommentare

Hallo, passend zum Thema Ablösung LIMUX in München ein Beitrag bei Heise (siehe Link folgend). Behörden ignorieren Sicherheitsbedenken gegenüber ...