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

Frage Entwicklung CSS

Mitglied: mabue88

mabue88 (Level 2) - Jetzt verbinden

29.11.2014, aktualisiert 13:33 Uhr, 1469 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 ...

Netzwerkmanagement
Benötige hilfe bei: Wired Radius Authentifizierung
gelöst Frage von Saiteck2009Netzwerkmanagement10 Kommentare

Guten Tag, Ich benötige eure Hilfe. Ich habe den Auftrag einen Internet Zugang einzurichten für Kunden. Dieser soll von ...

Neue Wissensbeiträge
Viren und Trojaner

Deaktivierter Keylogger in HP Notebooks entdeckt

Information von bitcoin vor 6 StundenViren und Trojaner1 Kommentar

Ein Grund mehr warum man Vorinstallationen der Hersteller immer blank bügeln sollte Der deaktivierte Keylogger findet sich im vorinstallierten ...

Router & Routing

Lets Encrypt kommt auf die FritzBox

Information von bitcoin vor 10 StundenRouter & Routing

In der neuesten Labor-Version der FB7490 integriert AVM unter anderem einen Let's Encrypt Client für Zugriffe auf das Webinterface ...

Internet

Was nützt HTTPS, wenn es auch von Phishing Web-Seiten genutzt wird

Information von Penny.Cilin vor 3 TagenInternet17 Kommentare

HTTPS richtig einschätzen Ob man eine Webseite via HTTPS aufruft, zeigt ein Schloss neben der Adresse im Webbrowser an. ...

Webbrowser

Bugfix für Firefox Quantum released - Installation erfolgt teilweise nicht automatisch!

Erfahrungsbericht von Volchy vor 4 TagenWebbrowser8 Kommentare

Hallo zusammen, gem. dem Artike von heise online wurde mit VersionFirefox 57.0.1 sicherheitsrelevante Bugs behoben. Entgegen der aktuellen Veröffentlichung ...

Heiß diskutierte Inhalte
Batch & Shell
Trusted Sites für alle User auf dem PC einpflegen
Frage von xXTaKuZaXxBatch & Shell12 Kommentare

Aufgabestellung: Es sollen auf 1 PC (bzw. mehreren PCs) vertrauenswürdige Sites per Powershell eingetragen werden, die für alle User ...

Voice over IP
Telefonstörung - Ortsrufnummern kein Verbindungsaufbau
Frage von Windows10GegnerVoice over IP10 Kommentare

Hallo, sowohl bei uns als auch beim Opa ist es über VoIP nicht möglich Ortsrufnummern anzurufen. Es kommt nach ...

Vmware
DOS 6.22 in VMWare mit CD-ROM
gelöst Frage von hesperVmware8 Kommentare

Hallo zusammen! Ich hab ein saublödes Problem. Es ist eine VMWare mit DOS 6.22 zu erstellen auf dem ein ...

Cloud-Dienste
PIM als SaaS Nutzungsgebühr
Frage von vanTastCloud-Dienste8 Kommentare

Moin, wir haben uns ein PIM (Product Information Management) nach unseren Ansprüchen für viel Geld als SaaS-Lösung bauen lassen. ...