Positionierung absolut/relativ

[Sunny3380]

Hallo zusammen,
bin neu hier und bin am verzweifeln mit vorgegebenen Stylesheets.
Ich hoffe ihr könnt mir dabei helfen.

Es gibt eine header-zone, und darin zwei weitere Zonen (Zone1,Zone2)

div#header-zone
{
position: relativ;
overflow: hidden;
max-width:1000;
min-width: 650px;
}

div#Zone1
{
position: absolute;
top:0;
left:0;
width: 600px;
}

div#Zone2
{
position: relativ;
float: right;
width: 300;
}

Der Html Code sieht dann so aus

<div id="header-zone">
          <div id="Zone1" style="background-image: url(./image/Bild.jpg);"   </div>
          <div id="Zone2">
              code dazu...          
           </div>
</div>

Mit dem Code bekomme ich eine Zone die 2 weitere Zonen beinhaltet.
Jetzt bräuchte ich allerdings eine dritte Zone direkt neben Zone2. Also die soll dann direkt am Rand von Zone2 andocken.

Wie mache ich das? Ich hab schon recht viel rum getestet, aber mein Bereich ist ständig wo anders.

Wie bekomme ich das gewünschte Ergebnis?

Vielen Dank im voraus.

Viele Grüsse
Sunny

 

[XraYSoLo]

elemente kannst du per float nebeneinander setzen.

Nils aka XraYSoLo

 

[prm]

Lass ferner alle relativen und absoluten Positionierungen weg, da die hier vollkommen unnötig sind.

Im CSS-Teil fehlen teilweise noch die Einheiten, z.B. "1000px" statt nur "1000"

 

[Sunny3380]

Guten Morgen zusammen,

erstmal vielen Dank für eure schnellen Antworten.
Das mit den px hatte ich vergessen.

Ich habe das mal versucht alle Positionierungen weg zulassen und die Ausrichtung mit float grmacht. Das Ergebnis war ziemlich merkwürdig. Da war dann Zone2 irgendwie schräg unterhalb Zon1. Ganz komisch.

Habe die Positionierungen wieder reingemacht.

Und Zone3 hat folgenden Code:

div#Zone3
{
    position: relativ;
    float: right;
    width: 50px;
    border:5px solid #FFCC99
}

Aber ich verstehe das Ergebnis nicht :(

Jetzt setzt er aber Zone3 vor Zone 2 obwohl der Div Bereich von Zone 3 direkt nach Div Bereich von Zone2 folgt.

Das Ergebnis ist dann so, dass im Header Bereich erst wie gewünscht Zone1 mit Bildchen kommt. Dann aber sehr, sehr viel freier Platz. Oben rechts dann Zone 3. Und dann direkt nach Zone3 Zone2 folgt. Wieso ist das so?
Hat das was mit z-Index zu tun? Sehe gerade, dass Header-Zone keinen z-index hat, Zone1 z-index=10, Zone2 z-index=11 und für Zone 3 habe ich nichts angegeben.

Danke!

Viele Grüsse
Sunny

 

[Sunny3380]

Jetzt habe ich gedacht ich hätte es verstanden, dann erhalte ich wieder ein unerwartetes Ergebnis :(

Habe einen neuen Header erstellt.
in diesem Header habe ich jetzt die Header-zone die aus Zone1 und Zone2 besteht.

Zone3 möchte ich jetzt an dem rechten Rand des neuen Headers platzieren.
Also oben rechts von Header.

Habe gedacht mit float: right würde das so einfach gehen.
Aber wo hat der mein Kästchen hinzugefügt? Nicht etwa oben rechts sondern hat es an dem unteren Rand angedockt und die angegebene Höhe geht nach unten. Wieso ist das so? Ich blicks nicht :(

Auch wenn ich die Positionierungen von Header und Zone3 weg lasse erhalte ich mein Kästchen immer vom unteren Rand nach unten gezogen :(

Viele Grüsse
Sunny