Probleme mit Layer Ausrichtung

Status
Nicht offen für weitere Antworten.
LuvShining

LuvShining

Erfahrenes Mitglied
Hallöchen,

ich brüte seit gestern über einem klitzekleinen Layout-Problemchen.
Und zwar hätte ich gern, dass ich einen Hintergrund habe, der in einem "Container" mit der festen Größe 900 Pixel breit und 700 Pixel hoch angelegt ist. Dieser soll immer horizontal zentriert im Browser stehen. Nach oben (wenn die Auflösung also höher als 700 Pixel ist), soll die Hintergrundfarbe immer weiss und und nach unten #8F8F8F sein.

Weiter geht es mit einem Container, in dem innerhalb der rechten Seite mein Menü und der linken Seite der Text-Inhalt steht (feste Größen). Darunter, ebenfalls in einer festen Höhe und Breite das Menü und ein wenig Grafik-Schnickschnack. Dies allerdings ist das kleinste Übel für mich.

Ich bin einfach nicht in der Lage die Layer so anzulegen, dass der Layer mit dem Hintergrundbild und den festen Maßen immer mittig im Browserfenster liegt und nach oben und unten jeweils 50% mit der weissen oder #8F8F8F-Farbe belegt sind.

Ich würde mich freuen, wenn mir hier jemand Hilfestellung liefern würde.

Mein CSS-Code
Code: 
body { 
color: #000; 
font-size: 81.25%; 
font-family: Frutiger, Arial, Helvetica, Sans-Serif; 
line-height: 1.6em;
overflow: hidden;
} 


#container /* Rahmen 100/100 im Browser ausgerichtet */
{
position: absolute;
left: 50%;
width: 100%;
margin-left: -50%;
top: 50%;
height: 100%;
margin-top: -50%;
}

#centerDiv /* Rahmen 900 Breit und 700 Hoch ausgerichtet mit Hintergrundbild */
{
position: absolute;
left: 50%;
width: 900px;
margin-left: -450px;
top: 50%;
height: 700px;
margin-top: -350px;
border: 1px solid #dfdfdf;
background-image: url(images/background.jpg);
background-repeat: repeat-x;
background-position: top left;
}

#content { /* Inhaltsbereich der Seite */
position: absolute;
left:50%;
width:900px;
margin-left:-450px;
top:50%;
height:570px;
margin-top:-350px;
}

#shortnav { /* Shortnav */
position: absolute;
right:19px;
width:265px;
top:3px;
height:35px;
}

#left { /* Navigation der Seite */
position:absolute;
top:35px;
left:30px;
width:365px;
height:351px;
font-size:0.9em;
color:#8F8F8F;
}

#right { /* Textbereich der Seite */
position:absolute;
top:35px;
left: 425px;
width: 455px;
height: 345px;
overflow: auto;
}

#menue { /* Navigation der Seite */
position:absolute;
top:352px;
left:0px;
height:218px;
}

Dumm nur, es läuft nicht so wie ich es möchte.. und den Bereich mit den Farben oben und unten (weiss und dunkelbraun) ausserhalb des eigentlichen Hintergrundbildes bekomme ich überhaupt nicht eingebunden.


damit es einfacher zu verstehen ist, hier mal ein Beispielbild meiner Idee.

Grüße,
Nadine
 

Anhänge

  • beispiel.jpg
    beispiel.jpg
    53,2 KB · Aufrufe: 20
Hi,

kannst du bitte auch den dazugehörigen HTML-Code zeigen, damit man als Außenstehender nachvollziehen kann, ob die drei erstgenannten DIVs ineinander verschachtelt sind, und die eingebundenen Hintergrundgrafiken hier als ZIP-Datei zur Verfügung stellen?

Und welchen Sinn soll die zentrierte Positionierung des ersten DIVs #container ergeben, wenn es 100% breit und hoch ist, sprich das Browserfenster vollständig ausfüllt? :suspekt:
 
Hallo,
ja klar. Im Anhang meine aktuellen Dateien.
Den 100% ausgerichten Layer wollte ich dafür nutzen, dass der Bereich oben und unten jeweils mit einem 50% hohen Layer in den beiden Farben abgedeckt werden können.
Wahrscheinlich um die Ecke gedacht.
Ich kriegs jedenfalls nicht wirklich hin :-(

Vielen lieben Dank für Deine Bemühungen,
Nadine
 

Anhänge

  • images.zip
    3 KB · Aufrufe: 13
LuvShining hat gesagt.:
Ich bin einfach nicht in der Lage die Layer so anzulegen, dass [...] nach oben und unten jeweils 50% mit der weissen oder #8F8F8F-Farbe belegt sind.
Zum Vergrößern anklicken....
LuvShining hat gesagt.:
Den 100% ausgerichten Layer wollte ich dafür nutzen, dass der Bereich oben und unten jeweils mit einem 50% hohen Layer in den beiden Farben abgedeckt werden können.
Zum Vergrößern anklicken....
Vielleicht hilft dir das hier weiter?

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<TITLE>Testseite</TITLE>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="container">
     <div id="bottom"></div>
</div>
<div id="centerDiv">
     <div id="shortnav"></div>
     <div id="left"></div>
     <div id="right"></div>
</div>

</body>
</html>

Code: 
html,body {
height:100%;
margin:0;
padding:0;
}

#container {
position:relative;
width:100%;
height:100%;
background:#fff;
}

#bottom {
position:absolute;
width:100%;
top:50%;
height:50%;
background:#8F8F8F;
}
 
Hallo,

vielen Dank für das Feedback. Leider komme ich erst heute dazu reinzusehen und zu antworten. Ich habe jetzt erst bemerkt, dass ich wohl einen grundsätzlichen Denkfehler habe, denn selbst mit der Farbe nach unten, habe ich keinen "schönen Übergang".

Ich hänge mal eine Datei an, die verdeutlichen soll, wie ich mir die eigentliche Seite im Browser vorstelle. Der Übergang von weiss bis dunkelbraun soll in der gesamten Breite sichtbar sein. Der grüne Rahmen sollte das "CenterDiv" darstellen, den Rahmen des Inhalts. Und in rosa gekennzeichnet ist der Bereich, den ich für Menü und Text nutzen möchte.

Somit bin ich wohl grundsätzlich auf dem falschen Dampfer ... :-(

Eine Idee wie ich der Lösung näher komme?

Vielen lieben Dank vorab,
Nadine
 

Anhänge

  • scree.jpg
    scree.jpg
    66,8 KB · Aufrufe: 17
Hi,

das Problem hierbei ist, wie willst du das Höhenmaß für den unteren (dunkelgrauen) Bereich festlegen, wenn sich das #centerDIV in der vertikalen Fenstermitte ausrichtet, und somit das Restmaß zum unteren Fensterrand variiert, sobald das Browserfenster skaliert wird. Von den unterschiedlichen Bildschirmauflösungen wollen wir hier erst garnicht reden.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück