Hintergrund wird nicht angezeigt

[pewivo]

Hallo! Ich habe folgenden Code:

<img src="<?php echo $this->baseurl ?>/templates/transparent_bliss_1.5/images/kopf.png" border="0"/>  
 <div id="glaskasten">  
  <div id="inhalt">  
  <jdoc:include type="component" />  
  </div>  
 </div>  
 <img src="<?php echo $this->baseurl ?>/templates/transparent_bliss_1.5/images/fuss.png" border="0"/>

Das Ganze soll ein glasähnlicher Kasten sein, die beiden Bilder sind der obere und der untere Teil des Kastens. Das div "glaskasten" hat als Hintergrund den mittleren Teil des Glaskastens (mit repeat-y).
Da der obere und untere Teil des Glaskastens etwas größer sind, habe ich den "inhalt"- Teil nach oben und unten durch "margin=-200px" ausgedehnt.
Mein Problem ist nun, dass 1. der mittlere Teil des Glaskastens nur angezeigt wird, wenn ich ihm in der CSS- Datei eine feste Höhe gebe (es soll aber sich variabel an die Contenthöhe anpassen und
2. dass das obere und untere Bild über dem Text liegt.

Hoffe, dass mir jemand helfen kann (ich weiß, dass einiges sicherlich hier schlecht oder unpraktisch gelöst ist, ich weiß aber nicht, wie es besser gehen sollte, vielleicht gibt es hierzu auch noch Tipps!)

Danke schonmal

PW

[MudGuard]

Hi,

<jdoc:include type="component" />

serverseitiger Code ist für Darstellungsprobleme unbrauchbar.

Und ohne das verwendete CSS ist das ganze sowieso nur Rumraterei.

cu,
Andreas

[pewivo]

Das ist halt einfach die Variable bei Joomla wo dann der Content für eingefügt wird.
Der CSS- Code dafür lautet:

#glaskasten {  
        background-image: url(../images/midde.png);  
 background-repeat: repeat-y;  
 width: 100%;  
}  
  
#inhalt {  
        float: left;  
        margin-left: 210px;  
        margin-top: -210px;  
        margin-bottom: -210px;  
        width: 550px;

[Steel]

Hi!

#inhalt {
        float: left;
        margin-left: 210px;
        margin-top: -210px;
        margin-bottom: -210px;
        width: 550px;[/code]

Dein Div macht genau, was Du willst. Es ist so hoch, wie der Inhalt. Es hat keinen inhalt, also ist es auch nicht besonders hoch.

Nun also die Frage: Warum entfernst du per float den Inhalt aus dem Div? Gibt es dafuer irgendeinen Grund? Ich sehe naemlich keinen.

[pewivo]

Weil ich blöd bin!

Das float war noch drin, weil ich einfach den CSS-Code von einem anderen Div kopiert habe und vergessen habe, es rauszunehmen. Vollkommen übersehen.

Danke für den Tipp. Selbst hätte ich wahrscheinlich noch tausendmal drübergesehen ohne das float zu bemerken.

[PeWiVo]

Nachdem mein erstes Problem gelöst werden konnte eine weitere Frage. Zunächst der HTML- Code:

<div id="wrapper">  
 <img src="<?php echo $this->baseurl ?>/templates/transparent_bliss_1.5/images/kopf.png" border="0"/>  
 <div id="glaskasten">  
  <div id="inhalt">  
  <jdoc:include type="component" />  
  </div>  
 </div>  
 <img src="<?php echo $this->baseurl ?>/templates/transparent_bliss_1.5/images/fuss.png" border="0"/>  
</div>

Das Ganze soll ein glasähnlicher Kasten sein, die beiden Bilder sind der obere und der untere Teil des Kastens. Das div "glaskasten" hat als Hintergrund den mittleren Teil des Glaskastens (mit repeat-y).

Mein Problem ist nun folgendes: der obere und untere Teil des Glaskastens sind ziemlich hoch, deswegen habe ich probiert, den Div "inhalt" (mit dem Content der Seite) per margin höher zu ziehen. Das Problem dabei ist, dass natürlich auch der Hintergrund des Divs "glaskasten", also der Mittelteil dieses Glaskastens höher gezogen wird. Folglich überschneiden sich Mittelteil des Glaskastens und oberer Teil des Glaskastens.
Habt Ihr eine Idee, wie das Problem zu lösen ist?

[Typhox]

Habt Ihr eine Idee, wie das Problem zu lösen ist?

Vom Prinzip her so (IE7,FF2,O9):

<div style="background-color:blue;height:40px"></div>
<div style="background-color:yellow"><div style="position:relative;top:-20px;">Hier ist der Text</div></div>
<div style="background-color:blue;height:40px"></div>

Allerdings gibt es dabei dann das Problem, dass unten mehr Platz bis zum Ende des Kastens ist. Ich hoffe, es gibt noch eine bessere Lösung...

[PeWiVo]

Danke, das ist zumindest eine gute Übergangslösung, weiß vielleicht noch jemand, wie man es schafft, dass unten nun auch nicht mehr so viel Platz ist?

[PeWiVo]

Nachdem mein erstes Problem gelöst werden konnte eine weitere Frage. Zunächst der HTML- Code:

<div id="wrapper">  
 <img src="<?php echo $this->baseurl ?>/templates/transparent_bliss_1.5/images/kopf.png" border="0"/>  
 <div id="glaskasten">  
  <div id="inhalt">  
  <jdoc:include type="component" />  
  </div>  
 </div>  
 <img src="<?php echo $this->baseurl ?>/templates/transparent_bliss_1.5/images/fuss.png" border="0"/>  
</div>

Das Ganze soll ein glasähnlicher Kasten sein, die beiden Bilder sind der obere und der untere Teil des Kastens. Das div "glaskasten" hat als Hintergrund den mittleren Teil des Glaskastens (mit repeat-y).

Mein Problem ist nun folgendes: der obere und untere Teil des Glaskastens sind ziemlich hoch, deswegen habe ich probiert, den Div "inhalt" (mit dem Content der Seite) per margin höher zu ziehen. Das Problem dabei ist, dass natürlich auch der Hintergrund des Divs "glaskasten", also der Mittelteil dieses Glaskastens höher gezogen wird. Folglich überschneiden sich Mittelteil des Glaskastens und oberer Teil des Glaskastens.
Habt Ihr eine Idee, wie das Problem zu lösen ist?