✔ css-layout auf seite horizontal und vertikal zentrieren

Status
Nicht offen für weitere Antworten.
Q

quidnovi

Erfahrenes Mitglied
Hi @ all!

Ich hab ein Problem, mit dem ich einfach nicht klar komme und ich hoffe, dass mir vielleicht irgendjemand helfen kann.
Vorwegnehmen möchte ich, dass ich bereits sämtliche mir relevant vorkommende Seiten durchgegangen bin und ich auch Mr. Google befragt habe, doch habe ich nirgendwo etwas Befriedigendes gefunden.

Folgendes:
Mein css-layout will sich einfach nicht in der Mitte zentrieren lassen. Ich bringe es horizontal auf die Reihe und auch vertikal, doch schaffe ich nicht beides.
Im günstigsten Fall soll die Seite browserunabhängig programmiert sein - heißt, immer mittig.

Um ein besseres Bild zu bekommen, hänge ich mal meine css an:
HTML: 
body {
		text-align:center;
		
		}
	
	#frame {
		width:950px;
		margin-right:auto;
		margin-left:auto;
		margin-top:10px;
		padding:0px;
		text-align:left;
		overflow: hidden;
		}
		
	#contentleft {
		width:175px;
		padding:0px;
		float:left;
		background:#663366;
		height: 400px;
		}
	
	#contentcenter {
		width:600px;
		padding:0px;
		height: 400px;
		float:left;
		background:#eee;
		overflow: auto;
		}
	
	#contentright {
		width:175px;
		padding:0px;
		float:left;
		background:#66FF99;
		height: 400px;
		}
	
	#contentheader {
		background:#FF6699;
		border: 1px solid silver;
		height: 100px;
		}
    #contentnavigation {
		background:#FF99CC;
		border: 1px solid silver;
		height: 30px;
		}
	
        #contentfooter {
		background:#FF99CC;
		border: 1px solid silver;
		height: 30px;
		clear:left;
                background:#339999;
                text-align:center;
                padding:0px;
		}
		
	#contentheader h1 {
		font-size:14px;
		padding:10px;
		margin:0px;
		}
	
	#contentright p { font-size:10px}

Möchte noch dazusagen, dass dies die letzte verzweifelte Möglichkeit ist, die ich angewendet habe. Auch mit diversen Prozentangaben habe ich es einfach nicht geschafft.

Wie gesagt, ich bin am verzweifeln.
Vielleicht kann mir ja jemand helfen.
Bin für jede Hilfe dankbar.

Grüße quidnovi

p.s.: Vielleicht sollte ich noch dazusagen, dass ich mich erst seit kurzem mit css beschäftige - bitte also um etwas Nachsicht.
 
Hier mal ein Lösungsbeispiel für eine horizontal und vertikal zentrierte Box:

Code: 
div#centerBox {
position: absolute;
left: 50%;
width: 950px;
margin-left: -475px; /* negative Hälfte von width:950px */
top: 50%;
height: 560px;
margin-top: -280px; /* negative Hälfte von height:560px; */
border: 1px solid #000;
}
HTML: 
<div id="centerBox">...</div>
 
Hallo michaelsinterface,
super, danke, es funktioniert!!

Vielen Dank auch für dein nebenstehendes Kommentar - somit kann auch ein Newbie noch was lernen.

Bei einer Browsergröße von 1024x768 haut es wunderbar hin - nochmals vielen Dank.

Was ich allerdings nicht verstehe ist, wieso jetzt plötzlich bei einer Größe von 800x600 die halbe Seite verschwindet.

Auch wenn ich alles Mögliche auf overflow: auto; setze, passiert gar nix. :-(

Hast du da vielleicht auch noch ne Ahnung, wie man das beheben kann?


Grüße quidnovi
 
Wenn die Monitorauflösung 800*600px beträgt, reicht die zentrierte Box (width: 950px) um 150 Pixel in der Horizontalen über das Browserfenster hinaus.

In der Vertikalen verhält es sich genauso, wenn das Fenster niedriger als 560px ist.

Wie man das beheben kann? Vielleicht ein kleineres Format für das Layout wählen?
 
Was du mir damit klar machen willst, verstehe ich schon. :)

Natürlich wäre es ein einfaches, einfach ein kleineres Format zu wählen, nur soll das leider so nicht sein.

Gebe ich deinen Code wieder heraus, so kann ich bei einer Größe von 800x600 zwar nicht das gesamte Layout sehen - ist ja klar, nur kann ich damit so scrollen, dass im Endeffekt auch alles ersichtlich ist.
Nehme ich allerdings deinen Code wieder rein, so scrollt die Seite natürlich auch, nur schneidet es mit oben, links und rechts einen Teil der Seite weg.

Darum meine Frage, warum das so ist und ob man das mit deinem Code umgehen kann. Immerhin ist es ursprünglich genau das gewesen, was ich gesucht und Dank deiner Wendigkeit gefunden habe. :-)
 
Daß der obere/untere bzw. linke/rechte Bereich des Layouts in den nichtsichtbaren Bereich verschwindet, liegt einfach daran, daß sich das DIV#centerBox immer im verfügbaren Anzeigebereich des Browserfensters in der Horizontalen und Vertikalen zentriert.

Von daher ist mir auch keine Möglichkeit bekannt, um bei der vorgestellten Technik diesen Effekt bei einer kleineren Bildschirmauflösung zu verhindern.
 
Schade!

Wäre ja zu schön gewesen, wären alle meine CSS-Problemchen einfach so in der Luft verpufft.
Dank dir nochmals für deine schnelle Hilfe.

In diesem Sinne ein "happy weekend".

Grüße quidnovi
 
Hi!

Auch wenn es schon ein paar Tage her ist, hätte ich noch einen Vorschlag für dich.

HTML: 
<head>
...
<script type="text/javascript">
	switch(screen.width) {
	case 800:
		document.write('<link rel="Stylesheet" href="stylesheet_mit_positionierungsangaben_800er_auflösung.css" type="text/css" />');
		break;
	case 1024:
		document.write('<link rel="Stylesheet" href="stylesheet_mit_positionierungsangaben_1024er_auflösung.css" type="text/css" />');
		break;
	case 1280:
		document.write('<link rel="Stylesheet" href="stylesheet_mit_positionierungsangaben_1280er_auflösung.css" type="text/css" />');
		break;
	case 1600:
		document.write('<link rel="Stylesheet" href="stylesheet_mit_positionierungsangaben_1600er_auflösung.css" type="text/css" />');
		break;
	default:
		document.write('<link rel="Stylesheet" href="default.css" type="text/css" />');
		break;
	}
</script>
...
</head>

<body>
<div class="center_div">
	Inhal
</div>
</body>
</html>

Damit wird ausgelesen, welche Auflösung der Anwender benutzt, und anschließend ein entsprechendes Stylesheet geladen. In dem schreibst du dann jeweils deine Positionierungsangaben, die eben für die entsprechende Auflösung passen.
Vielleicht ist es ja nützlich in deinem Fall.

Alles Gute,
Chris
 
Die ermittelte Bildschirmauflösung sagt aber nichts über die tatsächliche Browserfenstergröße bzw. die Größe des Darstellungsfeldes aus.
 
Das ist natürlich korrekt.
Es sollte ja auch nur eine begrenzte Möglichkeit darstellen.
Hab ich ja auch dazugeschrieben, dass es vllt nur eingeschränkt einsatzfähig ist.
Aber besser so, als gar nicht, oder?

Liebe Grüße
Chris
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück