Hintergrundkacheln für 3 Bereiche unterschiedlich gestalten

**_sj_** · 22.12.2012, 19:45

Hallo und vielen Dank für Dein Interesse an diesem Thema.

In Contao habe ich ein statisches Layout, 980px breit.

Header
-Navigation (Höhe 60px)

Main
- Slider (Höhe 450x)
- Content (variabel)

Footer
- Fußzeilenmodul

Der Hintergrund außerhalb der 980px soll mit Tiles gekachelt werden. Dabei sollen links und rechts neben der Navigation Kachel1.jpg erscheinen, neben dem Slider Kachel2.jpg und dann für den Rest unterhalb wieder Kachel1.jpg.

Leider fehlt mir hierzu eine Idee bzw. Anlaufpunkt, wie dies umzusetzen wäre.

Habt ihr einen Vorschlag?

Danke,
_sj_

**kos** · 23.12.2012, 09:50

Hallo _sj_,

Du gibst dem #wrapper eine Breite von 100%, weist den Inhaltsementen/Modulen die gewünschte Kachelfarbe zu.
Die Inhalte bekommen ihrerseit eine Hintergrundfarbe und werden zentriert.

Zur Verschaulichung folgender Code:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <style type="text/css">
    #wrapper{width:100%;}
    #header{background-color:#009900}
    #footer{background-color:#FF99FF}
    #topnav{height:100px;width:480px;margin:0 auto;background-color:#0099CC}
    .slider{background-color:#0066CC}
    .imgslider{width:480px;height:150px;margin:0 auto;background-color:#00FF66}
    .article{background-color:#66CC99}
    .text{width:480px;height:200px;margin:0 auto;background-color:#00CCCC}
    .footerelement{width:480px;height:50px;margin:0 auto;background-color:#FFCC00}
  </style>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title></title>
  </head>
  <body>
    <div id="wrapper">
      <div id="header">
        <div class="inside">
          <div id="topnav">NAVIGATION </div>
        </div>
      </div>
      <div id="container">
        <div id="main">
          <div class="inside">
            <div class="slider">
              <div class="imgslider">SLIDER</div>
            </div>
            <div class="article">
              <div class="text">CONTENT</div>
            </div>
          </div>
        </div>
      </div>
      <div id="footer">
        <div class="inside">
          <div class="footerelement">FOOTERELEMENT</div>
        </div>
      </div>
    </div>
  </body>
</html>