✔ div container positionieren ?

Status
Nicht offen für weitere Antworten.
versuch13

versuch13

Erfahrenes Mitglied
hi, also, ich versuche mich zur Zeit an Webdesign ohne Tabellen. Jetzt habe ich folgendes Problem. Ich möchte ein Layout nicht nur zentriert, sondern auch, naja, so dass auch von oben und unten der gleiche Abstand zu den containern besteht, auf der seite platzieren.

Hier mein Code:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
.main {
 border: 1px solid #333333;
 height: 600px;
 width: 600px;
 margin:auto;
}
.header {
 background-color: #FF9900;
 height:100px;
}
.content {
 background-color: #CCCCCC;
 height:500px;
 width:600px;
}
-->
</style>
</head>
<body>
<div class="main">
  <div class="header">HEAD</div>
  <div class="content">CONTENT</div>
</div>
</body>
</html>


hoffe jemand hat eine lösung. mfg
 
Hallo versuch13,

hier der CSS-Code zum horizontalen und vertikalen Zentrieren deines DIVs:
Code: 
.main {
position: absolute;
left: 50%;
width: 600px;
margin-left: -300px; /* negative Hälfte von width:600px */
top: 50%;
height: 600px;
margin-top: -300px; /* negative Hälfte von height:600px */
border: 1px solid #333333;
}
 
He, hi Michael,

du hilfst mir immer gut weiter. Danke. Also, es funktioniert ja, aber kannst du mir vielleicht auch erklären was es damit auf sich hat?
Ist das immer so?

Bsp.:

Wenn ich jetzt einen #main container (800*600) auf diese Art und Weise platzieren möchte,
wäre der style also dieser:

#main
{
position: absolute;
left: 50%;
width:800px;
margin-left:-400px;
top:50%;
height:600px;
margin-left:-300px;
}


?

víelen Dank.
Mfg. Timm
(und danke nochmal für das extra tut layer opacity vor ein paar monaten, hast mir echt weitergeholfen.)
greetz



>> ja, ok, habe es gerade mal ein wenig ausgetestet. Also es funktioniert immer so ja?
Das ist zumindest jetzt bei mir der fall gewesen.
Trotzdem wäre es korreckt wenn du mir vielleicht erklären kannst was es mit den 50% und dem negativ Einzug auf sich hat? Nur des Verständnis wegens. danke
MfG
 
Zuletzt bearbeitet:
Hallo Timm,

wenn für das DIV nur die Position left:50% bzw. top:50% bestimmt wird, dann beginnt / startet das DIV ab der (horizontalen / vertikalen) Seitenmitte und sitzt somit aussermittig. Erst durch das negative margin [-left / -top] wird das DIV zentriert.

Du kannst dies ja mal ausprobieren, indem du die margin-Angaben aus dem CSS-Code komplett entfernst und anschliessend die Seite im Browser betrachtest.
 
Ja, hi Maik,
ich hab es die nacht noch ausprobiert und auch verstanden. Hatte gestern abend nur einen Hänger, ist ja eigentlich ganz logisch, aber ich wäre selbst nie darauf gekommen. Daher nochmal danke.
MfG
 
Hi Leute,

wie kann ich es so umschreiben, dass sich die 50%(top) nicht auf die gesamte Seitenhöhe, sondern auf ein Tabellenzeile bezieht.Ich habe nämlich eine Tabelle, die eine Zeile (Head/Logo) von 100Px hat, eine Navi-Zeile von 30Px und eine 3. Zeile, in der ich den Content zentrieren möchte.
Wie z.B. bei dieser Seite: http://www.e-frame.at

Danke & Gruß SP
 
Die von mir vorgestellte CSS-Technik zum horizontalen und vertikalen Zentrieren eines <div> -Elements im Browserfenster lässt sich nicht auf den Inhalt einer Tabellenzelle anwenden.

Ausserdem wird der Inhalt in einer Tabellenzelle mit Höhenangabe automatisch vertikal zentriert :suspekt:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
td.content
{
height: 400px;
}
-->
</style>

</head>
<body>

<table border="1" cellspacing="3" cellpadding="10">
       <tr>
           <td class="content">content</td>
       </tr>
</table>

</body>
</html>
 
Hallo Michael,

danke Dir für die Antwort, aber genau das ist ja mein Problem...dass meine kleine Content-Tabelle vorher auch ohne vertical-align oder ähnliches mittig saß, und dies seit dem Befehl Doctype ...4.01 nicht mehr macht. Mittlerweile weiß ich, dass man keine height von 100% für eine Tabelle einsetzen kann und das ist wahrscheinlich mein Problem.
Wie kann ich dann aber realisieren, dass meine Content-Tabelle in der unteren Zelle der Gesamttabelle immer vertikal mittig sitzt, wenn sich doch deren Höhe immer aus der Gesamthöhe des Bildschirms abzüglich der Logozeile (100px) und der Navizeile (30px) ergibt?
Hast Du vielleicht eine Idee?

Gruß Stefan
 
Du darfst zwar das height -Attribut nicht im <table>-Element einsetzen / verwenden

Code: 
<table height=100%" cellpadding="0" cellspacing="0"> ... </table>
aber sehr wohl mit CSS eine Höhe für die Tabelle bestimmen ;-]

Code: 
table.content { height: 100%; }
HTML: 
<table class="content" cellpadding="0" cellspacing="0"> ... </table>
 
Zuletzt bearbeitet von einem Moderator:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück