fenster mittig mit css

domesens · 19.02.2005, 17:46

Hallo!
Ich will den kompletten Inhalt meiner Seite in einer box darstellen, die sowohl horizontal als auch vertikal immer mittig bleiben soll (unabhängig von auflösung und größe des browserfensters).
Das habe ich mit folgendem code soweit auch hinbekommen:

#inhalt {
position: absolute;
height: 450px;
width: 750px;
margin: -225px -375px;
top: 50%;
left: 50%;
text-align: left;
padding: 0px;
background-color: #f5f5f5;
overflow: auto;
}

Der Nachteil bei diesem Code ist, dass die Scrollbalken einem nicht mehr viel weiterhelfen, sobald das Browserfenster kleiner als die box ist... An den Rändern wird dann immer etwas von der Box abgeschnitten!

Hat jemand einen Verbesserungsvorschlag, oder eine ganz andere Idee, um so was zu realisieren?

Viele Grüße und Danke im voraus
Dome

Terry · 19.02.2005, 18:09

Zitat:

Zitat von domesens

Hat jemand einen Verbesserungsvorschlag, oder eine ganz andere Idee, um so was zu realisieren?

Nein, leider nicht. Genau das Abgeschnittenwerden des Inhalts (links und oben) bei zu kleinem Viewport ist das Problem dieser Methode. Abhilfe gibt es da keine.

Bleibt nur: diese Methode nur bei sehr kleinen Boxen verwenden.
Andere Möglichkeiten, horizontal und vertikal zu zentrieren, gibt es meines Wissens aber nicht.

domesens · 21.02.2005, 22:24

Hab das Problem jetzt mit Tabellen gelöst...

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="metal2.css" rel="stylesheet" type="text/css">

</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%" align="center">
<tr>
<td>
<table width="750" height="450" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#000000">
         <tr> 
          <td width="750" height="450" align="left" valign="top" bgcolor="#FF9966"> 
            <div id="box"></div>
		  </td>
        </tr>
      </table>
</td>
</tr>
</table>
</body>
</html>

mit der css-datei:

Code:

body {
	background-color:#000000;
	font-size:12px;
	font-family:Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
	color:#564b47;
	padding:0px;
	margin:0px;
	overflow:auto;
}

#box {
	position:absolute;
	height:450px;
	width:750px;
	margin:0px;
	text-align:left;
	padding:0px;
	background-color:#ccd3ff;
	overflow:hidden;
}

Mit firefox klappt das wunderbar. beim ie hab ich das problem, dass die box ihre position nicht verändert, wenn ich die fenstergröße ändere. Erst wenn ich die Seite in der neuen Fenstergröße neu lade, stimmt alles.
Weiß jemand, woran das liegt?

Viele Grüße
dome

steffenk · 22.02.2005, 11:15

Du kannst das mit css schon lösen:

Code:

#inhalt { 
height: 450px; 
width: 750px; 
margin: 0 auto; 
text-align:left; 
vertical-align: middle;
padding: 0px; 
background-color: #f5f5f5; 
overflow: auto; 
}

das vertikal-zentrieren ist halt nicht ohne weiteres möglich.
Durch den auto-wert bei margin wird das ganze aber zentriert.

Um den IE in den Griff zu bekommen, nutze einen richtigen Doctype, so wie z.B.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

(hab ich auch erst hier gelernt, gibt gute Threads hier, die das erklären

)

steffenk · 22.02.2005, 11:22

Eine genaue Erklärung zur Zentrierung (horizontal und vertikal) mit css findest Du hier

Nele · 22.02.2005, 11:28

Ich würde hierfür auf jeden Fall zu Tabellen greifen, wie du es ja schon getan hast - auch wenn es nicht gerade "schön" ist.

Hier sind alle Möglichkeiten aufgelistet und sehr gut erklärt.
Damit sollte es auch bei dir und in älteren Browsern klappen.

Rinaldo · 22.02.2005, 11:31

Und mein Beispiel für horizontal UND vertikal zentrierte DIVs. Funktioniert soviel ich bis jetzt probiert habe, in allen Browsern

.

Nele · 22.02.2005, 13:31

Das ist genau das, was ich gepostet habe.

bongofury · 10.03.2005, 20:03

Zitat:

Zitat von Rinaldo

Und mein Beispiel für horizontal UND vertikal zentrierte DIVs. Funktioniert soviel ich bis jetzt probiert habe, in allen Browsern

.

Funktioniert leider nicht am IE unter Mac OSX

steffenk · 10.03.2005, 21:51

Zitat:

Zitat von bongofury

Funktioniert leider nicht am IE unter Mac OSX

Zeig mir eine Seite, die unter Mac OSX und IE läuft

bongofury · 12.03.2005, 00:15

Zitat:

Zitat von St@eff.en

Zeig mir eine Seite, die unter Mac OSX und IE läuft

Zugegeben, die Auswahl an CSS-gestylten Seiten ist nicht allzu groß, aber leider ist diese Kombination (zumindest im Agenturbereich) weiter verbreitet als mir selbst lieb ist...