✔ repeat in verschachtelten div boxen

V

Valllanda

Grünschnabel
Grüße,

mein Problem ist folgendes:

Ich habe in einer div box drei weitere und möchte die nur dazu hernehmen um darin hintergrund bilder anzuzeigen(es soll eine Säule werden). Im ersten und dritten sind die beidenen abgeschnittenen Sockel, im mittleren ist der mittlere teil der per repeat an die einzelnen Bildschirmhöhen angepasst werden soll.
Bloß wenn ich jetzt keine höhe für den mittleren part angebe bringt es mir nur ein bild(ka ob das standart ist css ist nicht gerade mein fachgebiet :P), wenn ich für dem div objekt 100% angebe bricht es aus dem layout aus.

Gibt es eine möglichkeit das ganze prozentual einheitlich zu gestalten?

Gruß Valllanda

HTML: 
  <body>

    <div id="links">
      <div id="s-l-o"></div>
      <div id="s-l-m"></div>
      <div id="s-l-u"></div>
    </div>

    <div id="mitte">
      <div id="header"></div>
      <div id="nav"></div>
      <div id="inhalt"></div>
    </div>

    <div id="rechts">
      <div id="s-r-o"></div>
      <div id="s-r-m"></div>
      <div id="s-r-u"></div>
    </div>

  </body>

Code: 
#mitte {
  width: auto;
  height: 100%;
  background-color: #000000;
}
#links {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 179px;
  height: 100%;
  background-color: #FF0000;
}
#rechts {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 179px;
  height: 100%;
  background-color: #FF0000;
}

#header {
  top:0px;
  height:15%;
  background-color: #00FF00;
}

#nav {
  height:5%;
  background-color: #0000FF;
}

#s-l-o {
  background-image: url(s_l_oben.JPG);
  height:160px;
}

#s-l-m {
  background-image: url(s_l_mitte.JPG);
  background-repeat: reapet-y;
  height: 100%;
  overflow: hidden;
}

#s-l-u {
  background-image: url(s_l_unten.JPG);
  height: 160px;
}
 
Hi,

ich häng dir hier einen Lösungsansatz an, den ich diesen Sommer in einem anderen Zusammenhang entwickelt hatte, und in dem für den linken und rechten Spaltenblock ein Rahmen über die komplette Viewporthöhe erzeugt wird.

Übrigens ist dir hier bei der Wertzuweisung ein Schreibfehler unterlaufen:
CSS: 
#s-l-m {
  ...
  background-repeat: reapet-y;
  ...
}

mfg Maik
 

Anhänge

Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück