Problem mit Positionierung eines "Streifens"

[clint]

Hallo,
eigentlich klingt es simpel, aber ich bekomme es einfach nicht hin. Ich möchte meine Seite mit einem einfarbigem Hintergrund unterlegen. Das schaff ich noch :)

Ok, in der Mitte des Bildschirms (und zwar unabh. von der Auflösung) soll dann  ein 200px hoher, 100% breiter weißer Streifen sein. Horizontal und vertikal zentriert in diesem Streifen, kommt dann ein Logo rein.

Mein style schaut so aus:
.middle {
 margin-left:0px;
 margin-top:50%;
 background-color:#ffffff;
 height:200px;
}

Und im HTML steht dann
<p class="middle"><center><img src="images/logo.jpg" alt="logo"></center></p>

1. Problem
Der Streifen ist nicht mittig und verschiebt sich auch nicht, wenn ich das Fenster in der Höhe veränder. Witzigerweise wandert er rum, wenn ich das Fenster breiter ziehe!?

2. Problem
Das Logo hängt unter dem Streifen und liegt nicht innen drin.

Ich bin echt zu blöd glaub ich. Hab natürlich schon die entspr. selfHTML-Seiten angesehen, aber ich komm nicht weiter.

JEmand nen Plan?

danke, clint

[LastBoyScout]

Hallo,

Probiere es mal hiermit, vielleicht klappt es ja so!

.middle {
position: relative;
width: 100%;
height: 200px;
margin: 0 auto;
background-color: #fff;
}

Gruß
LastBoyScout

[suit]

<p class="middle"><center><img src="images/logo.jpg" alt="logo"></center></p>

ein bild ist kein textabsatz
<center /> solltest du durch text-align: center; ersetzen
"middle" ist ein schlechter klassenname

[Steel]

Hi!

eigentlich klingt es simpel, aber ich bekomme es einfach nicht hin. Ich möchte meine Seite mit einem einfarbigem Hintergrund unterlegen. Das schaff ich noch :)

Immerhin.

Ok, in der Mitte des Bildschirms (und zwar unabh. von der Auflösung) soll dann  ein 200px hoher, 100% breiter weißer Streifen sein. Horizontal und vertikal zentriert in diesem Streifen, kommt dann ein Logo rein.

Also das wird schwierig. Ich versteh auch nicht wozu man ein Element in der Bildschirmmitte positionieren will. Was wenn das Browserfenster ober oder unterhalb der Mitte ist? ;)

Du meinst wohl Viewport. Der Viewport ist sowieso unabhaengig von der Bildschirmaufloesung.

Mein style schaut so aus:
.middle {
margin-left:0px;
margin-top:50%;
background-color:#ffffff;
height:200px;
}

Und im HTML steht dann
<p class="middle"><center><img src="images/logo.jpg" alt="logo"></center></p>

Bau dir erstmal nen vernuenftigen Conatiner fur Deine Grafik. Einen Absatz verstehe ich darunter nicht. Fuer deine Beduerfnisse sollte ein <div> die Wahl der Waffen sein.

1. Problem
   Der Streifen ist nicht mittig und verschiebt sich auch nicht, wenn ich das Fenster in der Höhe veränder. Witzigerweise wandert er rum, wenn ich das Fenster breiter ziehe!?

Du hast dem Streifen gesagt, er soll auf 50% Hoehe seines Elternelementes beginnen. Das ist schonmal etwas unter der Mitte. Dazu wird sich die Hoehe des Elternlementes natuerlich, abhaengig vom Inhalt und der Breite, veraendern und dein Streifen wandert. Das ist voellig normales Verhalten.

Sorge also dafuer, dass das Element in dem dein Streifen sich befindet immer 100% hoch ist und positioniere dann deinen Streifen mittig. Die Mitte ist in diesem Fall eher  50% Hoehe - halbe Streifenhoehe. Dazu benoetigst du wohl auch absolute Positionierung, wenn ueber und unter dem Streifen noch Inhalte stehen sollen.