Hallo zusammen

Habe mal eine sehr einfache Frage glaube ich zumindest.

Ich möchte mehrere Div-Tags die nebeneinander setzten und falls der Browser kleiner ist als alle nebeneinander gesetzten Div-Tags sollen sie hinter den anderen Div-Tags reinrutschen.

Leider rutscht es aber nicht hinter den ersten div sondern immer unter den vorigen div.

Habe es schon mit diversen Positionen und z-index , overflow und top left versucht klappt aber nicht wirklich.

Jemand eine Idee?

Mein letzter Versuch sieht so aus:

Code :

1 2 3 4 5 6 7 8 9

…   .frame10 { display:block; position:relative; width:300px; height:100px; top:0px; left: z-index:10; float:left; background-color:#CCCCCC; } .frame9 { display:block; position:relative; width:300px; height:100px; top:0px; z-index:9; float:left; background-color:#666666; } .frame1 {  display:block; position:relative; width:300px; height:100px; top:0px; z-index: 1; float:left; background-color:#999999; } …   <div class="frame10">A</div> <div class="frame9">B</div> <div class="frame1">J</div>

Zitat von shinbo

...
Leider rutscht es aber nicht hinter den ersten div sondern immer unter den vorigen div...

Hallo,
eine Möglichkeit wäre die DIV-Blöcke unterschiedlich breit zu machen und ineinander zu verschachteln. Etwa so:

HTML-Code:

<div class="wrapper1">
  <div class="frame1">C</div>

  <div class="wrapper2">
    <div class="frame2">B</div>

    <div class="wrapper3">
      <div class="frame3">A</div>
    </div>

  </div>

</div>

Code css:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

.wrapper1, .wrapper2, .wrapper3 {   position: relative;   min-width: 300px; /* kleiner 300px Breite: horiz.Scrollbalken */   margin: 0 auto 0 0;   border: 0;   padding: 0; } .wrapper1 { max-width: 900px; } .wrapper2 { max-width: 600px; } .wrapper3 { max-width: 300px; }   .frame1, .frame2, .frame3 {   position: absolute;   top: 0;   right: 0;   width: 300px; } .frame1 {   height: 140px;   background-color: #cff; } .frame2 {   height: 120px;   background-color: #fcf; } .frame3 {   height: 100px;   background-color: #ffc; }

Für den IE6 sind vermutlich noch Anpassungen hinsichtlich "max-width" notwendig.

Hallo hela

Die oben genannte Variante ist natürlich viel besser als das was ich gestern
danach in einen anderen Forum gefunden hatte und ausprobierte. Es sieht sehr ähnlich aus:

Code :

1 2 3 4 5

.frame10 { display:inline-block; position:relative; width:300px; height:100px; z-index:10; background-color:#CCCCCC; } .frame9 { display:inline-block; position:relative; width:300px; height:100px; z-index:9; background-color:#666666; } .frame1 {  display:inline-block; position:relative; width:300px; height:100px; z-index: 1; background-color:#999999; }   div#wrapper { position: relative; height:300px; width:100%; white-space:nowrap; }

HTML-Code:

<div id="wrapper">
<div class="frame10">A</div>
<div class="frame9">B</div>
<div class="frame1">J</div>
</div>

Ich weiß nicht mehr, da ich mein Verlauf gelöscht habe, wer oder wo das war aber dort wurde auch eine „wrapper“ klasse genutzt aber mit „display:block-inline“. Ich hatte mich beinahe damit abgefunden es sogar mit JavaScript zu versuchen aber das wollte ich vermeiden.

Der Effekt hier im meinen Beispiel ist wenigstens das alles nebeneinander bleiben, aber das positionieren der einzelner DIV-Tags in ihrer Höhe nur mit Tricks möglich ist. Dabei verschwindet nicht einfach der komplette DIV-Tag sondern wird abgeschnitten, was ich gut finde.

....auf jedenfall werde ich das mal ausprobieren. Danke!