Div in Reihe bei fester Größe des outerContainer

[ne0hype]

Hallo Leute,
ich stehe gerade vor einem Problem und weiss nicht so genau wie ich es lösen kann.

Zur veranschaulichung liegt anbei ein Bild.

Erklärung: Es soll ein DIV Container als eine art "Fesnter" fungieren. Dazu habe ich mir folgenden Code ausgedacht

<style type="text/css">
<!--
#container {
	height: 200px;
	width: 200px;
	overflow: hidden;
}
#innerContainer1, innerContainer2 {
	height: 200px;
	width: 200px;
}
-->
</style>

<div id="container">
	<div id="innerContainer1"></div>
    <div id="innerContainer2"></div>
</div>

Wie bekomm ich nun mittls CSS die DIVs in die Reinenfolge wie auf dem Bild

Ziel: Ziel ist es mittels Javascript einen Slider zu machen der zwischen den "innerContainer" hin und her wechselt und durch den "container" kann man dann jeweils den Inhalt der "innerContainer" sehen

Danke für die Hilfe

 

[D34DL1NES]

Ich nehme manl an der Blaue Rahmen soll den Sichtbaren bereich markieren und du willst nur ein Div sehen. Spanne um die beiden inneren Divs(im alle inneren die du haben willst) ein weiteres <div id="MoveContainer"> und animiere dieses. Ich persönlich empfehle ja jQuery, vorallem für Anfänger, aber das mus jeder für sich entscheidenin reinem JS geht es auch, aber ein Library wäre der vereinfachung halber zu empfehlen. Du musst dich also erstmal entscheiden wie du vorgehen willst: Library ja/nein wenn ja welche Library?

 

[hela]

Hallo,
gleiches Problem wurde erst neulich in diesem Thread besprochen.

<div id="scrollFenster">
  <div id="container">
    <div id="innerContainer1">Container1</div>
    <div id="innerContainer2">Container2</div>
  </div>
</div>

CSS:

 #scrollFenster {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: auto; /* mit JS auf Wert "hidden" setzen */
  padding-bottom: 17px; /* Platz für Scrollbalken, mit JS auf Null setzen */
}
#container {
  position: absolute;
  top: 0;
  left: 0;  /* Wert von "-200px" würde den innerContainer2 zeigen  */
  width: 400px; /* = Breite für 2 innerContainer */
}
#innerContainer1, #innerContainer2 {
  float: left;
  width: 200px;
  height: 200px;
}

 

[Maik]

Moin.

Du musst dich also erstmal entscheiden wie du vorgehen willst: Library ja/nein wenn ja welche Library?

Ist das für die CSS-Umsetzung wirklich von zentraler entscheidender Frage?

Dieser JS-Slider, wie von ne0hype umschrieben und im Anhang skizziert, bleibt "CSS-technisch" derselbe JS-Slider, ob nun mit oder ohne Hilfe eines JS-Frameworks (jQuery, mootools, prototype, scriptaculous) realisiert.

mfg Maik

 

[Hektik]

Den DIV-Tag mit z.B. style="float:left;" bereichern, wobei bei "left" der DIV links vom Rest positioniert wird. Mit "right" wird der DIV rechts von dem Rest positioniert.

<div style="float:left;">aaa</div><div>bbb</b>

Nur noch mal, weil es sich in den vorherigen Posts nicht so deutlich herausliest