Sphynx: 3-spaltiges Banner

SELF-Forum

3-spaltiges Banner

Sphynx
– Informationen zu den Bewertungsregeln

Hallo zusammen!

Ich habe folgendes Problem:
Ich würde gern eine Website mit flexibler Bannergröße aufbauen.
Soll so aussehen:

html:
--------------
<body>
<div id=overallcontent>
  <div id=banner>
     <div id=kastenlinks></div>
     <div id=kastenmitte></div>
     <div id=kastenrechts></div>
  </div>

<div id=content>...
  </div>
</div>
--------------

css:
--------------
#banner      {width:100%; height:120px;}

#kastenlinks {position:absolute; left:10px; top:10px; width:80px; height:120px;}

#kastenrechts {position:absolute; rechts:10px; top:10px; width:5px; height:120px;}

--------------

Wie bekomm ich es denn nun hin, dass kastenmitte den Bereich zwischen den beiden anderen Kästen auffüllt?
Danke für eure Hilfe!

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. 3-spaltiges Banner

    suit Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Wie bekomm ich es denn nun hin, dass kastenmitte den Bereich zwischen den beiden anderen Kästen auffüllt?

    garnicht, aber du könntest das bild, welches in "kastenmitte" rein soll als hintergrund von "banner" definieren

    übrigens, schleudere weniger mit absoluter positionierung herum und denke zuerst mal darüber nach, was du eigentlich willst, bzw beschreibe das genauer, ggf gibt es bessere lösungen

    Danke für eure Hilfe!

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. 3-spaltiges Banner

      Sphynx
      – Informationen zu den Bewertungsregeln

      Wie bekomm ich es denn nun hin, dass kastenmitte den Bereich zwischen den beiden anderen Kästen auffüllt?
      garnicht, aber du könntest das bild, welches in "kastenmitte" rein soll als hintergrund von "banner" definieren

      übrigens, schleudere weniger mit absoluter positionierung herum und denke zuerst mal darüber nach, was du eigentlich willst, bzw beschreibe das genauer, ggf gibt es bessere lösungen

      Danke für eure Hilfe!

      Also - kastenlinks bekommt eine Grafik, kastenmitte ebenfalls, und im kastenrechts soll dann des Ende des Banners hin - wie gesagt, in kastenmitte sollte eigentlich eine Backgroundgrafik mit repeat:x

      Sonst irgendeine Idee, wie ich das hinbekommen könnte?

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. 3-spaltiges Banner

        suit Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Sonst irgendeine Idee, wie ich das hinbekommen könnte?

        in diesem fall ist die absolute-variante wahrscheinlich in der tat eine der interessanteren - statt den farben einfach bilder rein und fertig

          
<div id="banner"> <-- ggf ersetzen gegen ein besser passendes element  
  <span class="l"></span>  
  <span class="r"></span>  
</div>  


          
#banner {  
  width: auto;  
  min-width: 200px;  
  height: 120px;  
  postion: relative;  
  background: red;  
}  
  
#banner .l,  
#banner .r {  
  position: absolute;  
  top: 0;  
  left: 0;  
  width: 100px;  
  height: 120px;  
  background: blue;  
}  
  
#banner .r {  
  right: 0;  
  background: green;  
}
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. 3-spaltiges Banner

    karl
    – Informationen zu den Bewertungsregeln

    Hallo Sphynx,

    du könntest zum Beispiel die Bereiche für deinen Banner so ineinander verschachteln, dass der gewünschte Effekt auftritt.

      
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
  <title>Demo</title>  
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">  
  <style type="text/css">  
[code lang=css]  
    #overallcontent  
    {  
      border:10px dotted #ff0;  
    }  
  
    #banner  
    {  
      background-color:#aaa;  
      padding:10px;  
    }  
  
    #content  
    {  
      border:1px solid #000;  
      padding:1ex;  
    }  
  
    .banner-links  
    {  
      padding-left:80px;  
      background:url(banner-links.gif) top left no-repeat #f00;  
    }  
  
    .banner-mitte  
    {  
      background:url(banner-mitte.gif) #0f0;  
      height:120px;  
    }  
  
    .banner-rechts  
    {  
      background:url(banner-rechts.gif) top right no-repeat #00f;  
      padding-right:5px;  
    }

    </style>
    </head>
    <body>

    <div id="overallcontent">
      <div id="banner">
        <div class="banner-links">
          <div class="banner-rechts">
            <div class="banner-mitte">
              Der Mittelteil
            </div>
          </div>
        </div>
      </div>

    <div id="content">
        <h1>Demo</h1>

    <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
          tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
          vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
          no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
      </div>
    </div>

    </body>
    </html>
    [/code]

    Gruß karl

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln