✔ Probleme mit exakter Layerausrichtung

LuvShining · 1. Oktober 2005

Hallo,

heute befasse ich mich ein wenig mit dem neuen Layout meiner privaten Page. Hier habe ich nun ein klitzekleines Ausrichtungsproblem. Und zwar möchte ich den Inhalt zentriert und dynamisch in der Mitte ausgerichtet haben, aber immer fest mit 0px bottom.

Nun dachte ich, der Lösungsansatz müsste lauten, dass ich einen Layer in Höhe und Breite 100% ausrichte und den Inhalt mit festen Größenangaben Center ausrichte. Das klappt dann zwar mit dem Inhalt, aber nicht mit dem Hintergrundfeld für den Text.

Hier mein Problemkind:
#rahmen { /* Hauptrahmen */
position:absolute;
width:100%;
height:100%;
}

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

#logo { /* Logoansicht */
position:absolute;
left:0px;
width:300px;
height:500px;
bottom:0px;
z-index:2;
}

#rahmen_content { /* Rahmen für Inhaltsbereich */
position:absolute;
left:400px;
width:400px;
bottom:0px;
height:600px;
background-image:url("images/bg_button.jpg");
z-index:1;
}

#content { /* Inhalt */
position:absolute;
left:400px;
top:45px;
width:400px;
color:#000000;
font-family:verdana,arial,helvetica;
font-size:13px;
overflow:auto;
}

Beispielansicht:
So soll es aufgebaut sein. Nur innerhalb der "Tafelansicht" soll Text stehen.
Der gesamte Bereich allerdings soll im Browser immer zentriert, wenn auch immer bottom ausgerichtet sein.

Klappt aber gar nicht.
Ich hoffe, man konnte mein Problem nachvollziehen und jemand von euch hat eine Idee.

Viele Grüße
Nadine

Maik · 1. Oktober 2005

Bin mir jetzt nicht sicher, ob ich dein Problem bzw. deine Vorstellung richtig verstanden habe

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">
<!--
#main { /* Inhaltsrahmen */
position: absolute;
left:50%;
width:800px;
margin-left:-400px;
top:50%;
height:600px;
margin-top:-300px;
border: 1px solid #000000; /* Boxgrenze visualisieren */
}

#logo { /* Logoansicht */
position:absolute;
left:0px;
width:300px;
height:500px;
bottom:0px;
z-index:2;
background: #dfdfdf; /* Boxgrenze visualisieren */
}

#rahmen_content { /* Rahmen für Inhaltsbereich */
position:absolute;
left:400px;
width:400px;
bottom:0px;
height:600px;
background-image:url("images/bg_button.jpg");
z-index:1;
background: #dfdfdf;  /* Boxgrenze visualisieren */
}

#content { /* Inhalt */
position:absolute;
left:0;
top:45px;
width:400px;
color:#000000;
font-family:verdana,arial,helvetica;
font-size:13px;
overflow:auto;
background: #ffffff;  /* Boxgrenze visualisieren */
}
-->
</style>

</head>
<body>

<div id="main">

     <div id="logo">logo</div>
     <div id="rahmen_content">
               <div id="content">content</div>
     </div>

</div>

</body>
</html>

Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 8.50

✔ Probleme mit exakter Layerausrichtung

LuvShining

Erfahrenes Mitglied

Maik

Neue Beiträge