Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

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

Div Bereich vertikal Zentrieren

Frage Entwicklung CSS

Mitglied: v3rtico

v3rtico (Level 1) - Jetzt verbinden

10.11.2008, aktualisiert 14.11.2008, 6410 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>
Mfg

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

Mfg

Mitchell

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

Mfg

Mitchell
Bitte warten ..
Ähnliche Inhalte
Python
gelöst Schmale vertikale Scrolleiste (6)

Frage von 132232 zum Thema Python ...

HTML
gelöst Iframe wird zu klein in div angezeigt (7)

Frage von Thomas91 zum Thema HTML ...

JavaScript
gelöst Funktion ausführen nach Refresch von DIV Container (2)

Frage von wiesi200 zum Thema JavaScript ...

HTML
gelöst Seitenwechsel innerhalb einer div-Box in HTML+CSS (7)

Frage von honeybee zum Thema HTML ...

Neue Wissensbeiträge
LAN, WAN, Wireless

Schwachstelle im WPA2 Protokoll veröffentlicht

(3)

Information von colinardo zum Thema LAN, WAN, Wireless ...

Heiß diskutierte Inhalte