Rahmen mit variablem zwischenteil

[gamefrog]

Hallo
Ich bastle gerade an einem Design, bei welchem der Inhalt in einem Rahmen steht: dieser Rahme ist allerdings in Farbverlauf von transparent nach blau und wieder nach transparent. der mittlere (also blaue) teil dieses Rahmens soll immer schön mit blau gefüllt werden, egal wie lange der Inhalt ist.

ich habe links und rechts bei diesem Rahmen 3 folgenden Aufbau:

+++++++++

• oben  +
• +++++++
• mitte +
  +++++++++
• unten +
  +++++++++

oben -> verlauf von transparent nach blau
mitte-> nur blau
unten-> verlauf von blau nach transparent.

wie kann ich nun machen, dass dieser (1px breite) rahmen in der mitte immer ein blaues verbindungsstück hat?

***************************************
<div class="links">
     <img src="img/oben.png" alt="borderlinksoben" />
     <div class="rahmenmitte"></div>
     <div class="rahmenunten"><img src="img/unten.png" alt="borderlinksoben" /></div>
</div>

.links{
 float:left;
 width:1px;
 display:block;}

.rahmenmitte{
 background:url(img/borderm.png) repeat-y;
 }

.rahmenunten{
 position:absolute;
 left:0;
 bottom:0;
 margin-bottom:20px;}

**********************

=> "rahmenmitte" soll also immer 1px breit mit diesem hintergrund gefüllt werden, je nachdem wie viel inhalt nebendran steht

das kann doch nicht so schwer sein, aber ich häng schon ne weile fest... unglaublich^^

[Detlef G.]

Hallo gamefrog

Ich bastle gerade an einem Design, bei welchem der Inhalt in einem Rahmen steht: dieser Rahme ist allerdings in Farbverlauf von transparent nach blau und wieder nach transparent. der mittlere (also blaue) teil dieses Rahmens soll immer schön mit blau gefüllt werden, egal wie lange der Inhalt ist.

Dazu solltest du nicht in Tabellen denken. Bei diesen würdest du die Rahmenteile in separate Spalten stecken.
Bei CSS weist du die notwendigen Grafiken als Hintergrundbild den Elementen zu, die den Inhalt enthalten.
Um zu sagen, wie das bei deiner Seite genau umgesetzt werden kann, wäre ein wenig mehr Information über die Struktur (HTML) und die Inhalte (Größenordnungen) der Seite notwendig.

Auf Wiederlesen
Detlef

[gmefrog]

Also viel Inhalt wird es wohl nicht sein. Der Inhalt könnte sich aber schnell  in die länge ziehen, da auf der seite t-shirts verkauft werden sollen.

Hier ein Link zum Aktuellen Status er seite:

(habe kurz wenig test eingefügt zum zeigen was passiert, wenn man lange inhalte hätte)

[gamefrog]

ups, link vergessen:

http://immort.tblog.ch/

[Detlef G.]

Hallo gamefrog

http://immort.tblog.ch/

Hast du dir das mal in einem 6er IE angesehen?

Das durchgehende Hintergrundbild und die teiltransparenten Rahmen machen die Sache etwas kompliziert.
Da habe ich auf die Schnelle auch keine Lösung, die auch IE6 versteht.
Für FF stellt das mit einer kleinen Div-Schlacht kein Problem dar:

  
    <div id="contentbox">  
      <div id="cb1">  
        <div id="cb2">  
          <div id="cb3">  
            Inhalt<br>  
            Inhalt<br>  
         </div>  
        </div>  
      </div>  
    </div>  

  
#contentbox {  
  background:url(rahmeno.png) no-repeat top;  
  padding:179px 0 0 0;  
  width:450px;  
}  
#cb1 {  
  background:url(rahmenu.png) no-repeat bottom;  
  padding:0 0 179px 0;  
}  
#cb2 {  
  background:url(rahmenm.png) repeat-y;  
  padding:1px;  
}  
#cb3 {  
  margin:-179px 0 -179px 0;  
  padding:5px;  
}  

Dabei ist rahmeno.png der obere Teil des Rahmens komplett (2x bordero.png und 1x contentborder_ou.png), rahmenu.png und rahmenm.png entsprechend.

Damit der 6er IE zwar nicht ganz das Gewünschte, aber etwas Ähnliches vernünftig anzeigt:

  
* html #contentbox{  
  background:none;  
  border:1px solid #2995C5;  
  padding:5px;  
}  
* html #cb1, * html #cb2, * html #cb3 {  
  background:none;  
  border:0 none;  
  margin:0;  
  padding:0;  
}  

Auf Wiederlesen
Detlef

[Detlef G.]

Hallo,

Hallo gamefrog

http://immort.tblog.ch/

Hast du dir das mal in einem 6er IE angesehen?

Das durchgehende Hintergrundbild und die teiltransparenten Rahmen machen die Sache etwas kompliziert.

Habe mir das noch einmal angesehen.
Wenn einfache GIFs, die statt Teiltransparenz einen Farbverlauf zu #191919 in der Ecke enthalten, ist der Unterschied nur bei genauem Hinsehen erkennbar.
Das würde die Sache stark vereinfachen und auch für IE6 tauglich sein.

  
    <div id="contentbox">  
      <div id="cb1">  
        <div id="cb2">  
          Inhalt<br>  
          Inhalt<br>  
        </div>  
      </div>  
    </div>  

  
#contentbox{  
  background:url(rahmenm.gif) repeat-y;;  
  width:450px;  
}  
#cb1 {  
  background:url(rahmenu.gif) no-repeat bottom;  
}  
#cb2 {  
  background:url(rahmeno.gif) no-repeat top;  
  padding:5px;  
  min-height:360px  
}  
* html #cb2 {  
  height:360px;  
}  

Auf Wiederlesen
Detlef

[gamefrog]

ach so geht das^^
vielen dank! werde es heute abend ausprobieren und mich wieder melden.

nein habe es noch nicht im IE ausprobiert, erst in safari und FF. IE kommt dann zum schluss... das wird ja immer deer höhepunkt :P

Vielen dank nochmals

[gamefrog]

herzlichen dank
klappt wunderbar

habe die seitenteile vom rahmen als gif mit grau-schwarzem hintergrund gespeichert, das sieht man echt kaum

dann kann ja jetzt die IE optimierung kommen :P

nochmals danke!