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

Div Bereich vertikal Zentrieren

Frage Entwicklung CSS

Mitglied: v3rtico

v3rtico (Level 1) - Jetzt verbinden

10.11.2008, aktualisiert 14.11.2008, 6378 Aufrufe, 9 Kommentare

Ich arbeite derzeit an einer Seite, für welche ich einen Div Bereich auf einer Seite zentrieren muss.

Hallo,

ich arbeite derzeit an einer Seite und habe dabei ein Problem: Der Inhalt der Seite soll zentriert werden. Der Inhalt steht in einem Div Bereich, welcher demnach sowohl horizontal als auch vertikal mittig auf der Seite stehen soll, egal bei welcher Auflösung.

Hier eine Vorschau wie es aktuell aussieht: http://www.tekstr.de/developer/helen

Und hier der Quelltext:
01.
<html> 
02.
 
03.
	<head> 
04.
		<title>Helen's Seite</title> 
05.
		<link rel="stylesheet" type="text/css" href="style/style.css"> 
06.
	</head> 
07.
	 
08.
	<body> 
09.
		<!-- Außenrand--> 
10.
		 
11.
		 
12.
		<div align="center" style="margin: 0 auto" > 
13.
		<div 
14.
			align="center" 
15.
			style=" 
16.
			padding-left:50px; 
17.
			padding-right:170px; 
18.
			width:730px; 
19.
			height: 580px; 
20.
			border:1px solid black; 
21.
			margin: auto;"> 
22.
		 
23.
		<!-- Innenrand--> 
24.
				<div style=" 
25.
					width:639px; 
26.
					height: 364px; 
27.
					border:1px solid black; 
28.
					margin-top: 145px; 
29.
					padding-left: 50px; 
30.
					padding-right: 50px; 
31.
					padding-top: 20px; 
32.
					padding-bottom: 20px"> 
33.
				Innenrand 
34.
				</div> 
35.
		 
36.
			Dies ist die äußere Box 
37.
 
38.
		</div> 
39.
		</div> 
40.
	</body> 
41.
 
42.
</html>
Die oben im Quelltext erwähnte CSS Datei ist zur Zeit noch leer. Also wie kann ich den Div Bereich (Außenrand) vertikal zentrieren? Irgendeine Idee?

Vielen Dank schonmal

Grüße
Max aka v3rtico
Mitglied: bytecounter
10.11.2008 um 11:07 Uhr
Hallo,

ich würde das wie folgt machen (ungetestet!):

01.
... 
02.
  margin-top:50%; 
03.
  margin-bottom:50%; 
04.
  padding-top:-290px; 
05.
...
Du setzt den Nullpunkt in die Mitte und verschiebst dann den DIV um die Hälfte der DIV-Höhe nach oben. Setzt natürlich voraus, dass Du eine fixe Höhe hast.

vg
Bytecounter
Bitte warten ..
Mitglied: rittzrattz
10.11.2008 um 11:36 Uhr
Hi,

ich habe das auf einer Intranetseite so gelöst, indem ich eine Seite mit Frames gebaut habe, die die Seite mit dem Inhalt umschließen.

Frames sind zwar nicht mehr so ganz Zeitgemäß, aber es funktioniert.

Gruß
rittzrattz
Bitte warten ..
Mitglied: v3rtico
10.11.2008 um 11:45 Uhr
Das funktioniert leider nicht. Framesets möchte ich eher nicht verwenden.
Bitte warten ..
Mitglied: ITLocke
10.11.2008 um 12:59 Uhr
Hallo evtl hilft dir dieser Link:

http://www.css4you.de/

Gruß

Locke
Bitte warten ..
Mitglied: Mitchell
11.11.2008 um 07:01 Uhr
Hi Max,

wenn du bei jeder Auflösung eine Zentrierung erwirken willst, darfst du nicht mit Pixeln arbeiten. Da es relative Größen sind, nimm em:

01.
<!-- Innenrand--> 
02.
 
03.
 <div style="margin:5em 5em 5em 5em; width:639px; height: 364px; border:1px solid black;"> 
04.
 
05.
     Innenrand 
06.
 </div>
Mit freundlichen Grüßen

Mitchell

PS: Der Link oben funktioniert nicht mehr, die Datei ist nicht mehr da.
Bitte warten ..
Mitglied: ITLocke
11.11.2008 um 07:37 Uhr
Zitat von Mitchell:

PS: Der Link oben funktioniert nicht mehr, die Datei ist nicht mehr
da.

Hmm bei mir funktioniert er wunderbar...
Bitte warten ..
Mitglied: v3rtico
11.11.2008 um 08:14 Uhr
Stimmt ich habe den Ordner umbenannt, die neue Datei liegt in www.tekstr,de/developer/helen das hatte ich vergessen.
Bitte warten ..
Mitglied: Mitchell
11.11.2008 um 09:29 Uhr
ich habe dann mal den Link oben für alle geändert, damit man direkt drauf zugreifen kann

Mit freundlichen Grüßen

Mitchell

PS: Sieht gut aus die Seite ^^
Bitte warten ..
Mitglied: Mitchell
14.11.2008 um 07:13 Uhr
wie siehts hier aus, schon Neuigkeiten?

Mit freundlichen Grüßen

Mitchell
Bitte warten ..
Neuester Wissensbeitrag
CPU, RAM, Mainboards

Angetestet: PC Engines APU 3a2 im Rack-Gehäuse

Erfahrungsbericht von ashnod zum Thema CPU, RAM, Mainboards ...

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

Frage von Stefan007 zum Thema Hyper-V ...

Switche und Hubs
gelöst Netzwerk-Erweiterung mit 2.IP-Bereich und IP-Bereich für VOIP mit HP2530-Stack (2)

Frage von Quincy25 zum Thema Switche und Hubs ...

Schulung & Training
Wie komme ich in den Bereich Server Administration (4)

Frage von ITsupportguy zum Thema Schulung & Training ...

JavaScript
gelöst Externen DIV-Container via jQuery anzeigen (6)

Frage von Akrosh zum Thema JavaScript ...

Heiß diskutierte Inhalte
Grafikkarten & Monitore
Win 10 Grafikkarte Crash von Software? (13)

Frage von Marabunta zum Thema Grafikkarten & Monitore ...

Windows Server
Mailserver auf Windows Server 2012 (8)

Frage von StefanT81 zum Thema Windows Server ...

Backup
Clients als Server missbrauchen? (8)

Frage von 1410640014 zum Thema Backup ...

DSL, VDSL
DSL-Signal bewerten (8)

Frage von SarekHL zum Thema DSL, VDSL ...