• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

problem mit zentriert ausgerichteten container

M

mattmagic149

New member
Hi Leute!

Ich habe mein Website so aufgebaut, dass ein Absolutcontainer vertikal und horizontal zentriert liegt und dahinter ein Hintergrund.
Ich habe das folgendermaßen gelöst:

Code: 
.absolutecontainer {
	position: absolute;
	top:50%;
	left:50%;
	margin:-319px 0px 0px -500px;
	text-align: center;
	-khtml-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border: 3px solid rgb(105,40,42);
	background-color: #000/*rgb(190,190,190)*/;
	filter: alpha(opacity=75);-moz-opacity: 0.85;opacity: 0.85;
	width: 1000px;
	height: 638px;}

Mein Problem: wenn jetzt jemand eine zu kleine Auflösung hat, also kleiner als die 1000px breit, dann fehlen ihm einige Teile von der linken Seite und wenn eventuell auch vom oben.
Gibt es eine bessere Lösung den Container mittig zu plazieren als ihn einen negativen margin zu geben?
 
Zuletzt bearbeitet:
Horizontal mittig geht besser mit margin: 0 auto;
wenn du vertical zentrieren willst würde ich dir sowieso raten eine prozentuale Höhe (z.b. 80%) zu nehmen und dann nach deiner Methode zu arbeiten.

PS: Ich persönlich finde verticale Zentrierung nicht besonders toll...
 
bei mir funktioniert margin: 0 auto; gar nicht und mit einer prozentualen Höhe steht es dann ja nicht bei jedem Bildschirm genau mittig oder?
Warum findest du die vertikale Zentrierung nicht besonders super?
 
das mit dem margin funktioniert auch nur bei position: static.
Prozentuale Höhe (z.B. 80%) + ein prozentualen Rand (margin-top: 20%) ergeben eine perfekt mittige Darstellung.

Bei sehr kleinen Displays wird entweder der Anzeigebreich sehr klein (wenn man die obige Methode verwendet) oder man sieht einen Teil des Inhaltes nicht (exakt dein Problem) - beides nicht besonders toll.

Was du auch machen kannst ist Folgendes:
Code: 
<!DOCTYPE html">

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
html, body{
	height: 100%;
	min-height: 400px;
	width: 100%;
	margin: 0;
	padding: 0;
}

#content {
	width: 396px;
	height: 396px;
	background-color: black;
	border: 2px solid blue;
	margin: -200px auto;
	position: relative;
	top: 50%;
}
</style>
</head>
<body>
<div id="content"></div>
</body>
</html>
- Nachteil: Der Browser muss min-height interpretieren.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben