probleme mit z-index

[moebelcom]

Hallo an Alle,
erst mal ein großes Dankeschön an eure tolle Arbeit 

ich habe folgendes Problem mit einem Z-Index.
ich möchte auf der Startseite die Artikelbilder mit der Größe von 400x400px anzeigen lassen. soweit auch kein Problem ich habe die new_products_default.htlm auch schon soweit geändert mit <div's>.
jetzt möchte ich aber das innerhalb des Artikelbildes am oberen Rand der Title mit eingeblendet wird, und zwar über dem Bild.
Habe schon alle möglichen Z-Index Variationen ausprobiert aber ich bekomme es einfach nicht hin.

hat hier vielleicht jemand einen Lösungsansatz?

beste Grüße Johnny

Linkback: https://www.modified-shop.org/forum/index.php?topic=20709.0

[Andre Kern]

Hast Du evtl. mal einen Link zur aktuellen Situation

Grüße

[moebelcom]

Hallo,

unter www.deals-world.de findest du die Situation.
hier der erste Entwurf der new_products_default.html als Script

Code: XML  [Auswählen]

{config_load file="$language/lang_$language.conf" section="new_products"}
<h1>{#heading_text#}</h1>
{foreach name=aussen item=module_data from=$module_content}
<div id="start_div">
<div class="artikel_start">

<span>{if $module_data.PRODUCTS_IMAGE!=''}
                        <a href="{$module_data.PRODUCTS_LINK}"><img src="{$module_data.PRODUCTS_IMAGE}" width="450px" height="450px"alt="{$module_data.PRODUCTS_NAME}" /></a>
                    {else}
                        <strong>Kein Bild vorhanden!</strong>
                    {/if}</span>
                   

</div><div class="ueberschrift"></div></div>

{/foreach}

und hier das CSS

Code: CSS  [Auswählen]

.artikel_start {
float:left;
width:450px;
height: 450px;
        z-index:2000;

background-color:#FFFFFF;
}

.ueberschrift {
        width: 450px;
        height: 30px;
        border: 1px solid #aa1822;
        background-color:#33FF33
        z-index:2001;
}
#start_div {
width:450px;
height:480px;
margin-left: 15px;
float: left;

}

[Andre Kern]

Hi,

sieht aus als würde in der Überschrift garkein Text vorhanden sein?
Ist das möglich?

Grüße

[hedon02]

Das sieht nicht so dolle aus. Gibt viele Moeglichkeiten, versuch mal diese:

Code: XML  [Auswählen]

{foreach name=aussen item=module_data from=$module_content}
<div class="start_div">
  <div class="artikel_start">
  {if $module_data.PRODUCTS_IMAGE!=''}
    <a href="{$module_data.PRODUCTS_LINK}"><img src="{$module_data.PRODUCTS_IMAGE}" width="450px" height="450px" alt="{$module_data.PRODUCTS_NAME}" /></a>
  {else}
    <span><strong>Kein Bild vorhanden!</strong></span>
  {/if}
    <p class="ueberschrift">{$module_data.PRODUCTS_NAME}</p>
  </div>
</div>
{/foreach}
 

Code: CSS  [Auswählen]

.start_div {
  float: left;
  width:450px;
  height:480px;
  margin-left: 15px;
}
.artikel_start {
  position:relative;
}
p.ueberschrift {
  position:absolute; /* Element wird relativ absolut zu .artikel_start positioniert */
  top:0;
  width:448px; /* 2 Pixel fuer border weg */
  z-index:2; /*wahrscheinlich nicht notwendig */
  margin:0;
  padding:6px 0; /* line-height 18px + 2x6px = height 30px */
  border: 1px solid #aa1822;
  background-color:#33FF33
}
 

P.S.: z-index ohne "relativ" oder "absolute" funzt generell nicht

Gruss

[moebelcom]

Hallo,

erstmal Danke für die schnellen Antworten.
der Tipp mit der Position war Goldrichtig.

jetzt funktioniert es

vielen Dank
Johnny

[hedon02]

Das ist so nicht richtig wie Du es gemacht hast. Ersetze mal wenigstens Dein "position:absolute" durch "position:relative". Dann ist es zwar auch nicht "schoen" aber trotzdem irgendwie richtig  .

Gruesse