css formatierung

[moebelcom]

Hallo an Alle,

für ein neues Projekt von uns sollen auf der Startseite die Artikel erscheinen, soweit so gut. Das war kein Problem, auch die Formatierung mit der Überschrift im Bild, z-index, aber jetzt habe ich eoine hover Funktion mit eingebaut, so das der Preis beim hover eingeblendet wird.
ich habe das ganze gelöst mittels CSS.

Nur jetzt mein Problem ich kann den Text nicht mehr formatieren mittels CSS. jedesmal wenn ich eine <div> oder <span> eingebe, dann erscheint es auch im hover.

Ihr erreicht die Seite unter www.deals-world.de

Die entsprechende new_products_default.html schaut so aus

Code: XML  [Auswählen]

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

<ul class="test">
<li>
{if $module_data.PRODUCTS_IMAGE!=''}
                        <a href="{$module_data.PRODUCTS_LINK}"  text="{$module_data.PRODUCTS_PRICE}             {$module_data.PRODUCTS_TAX_INFO}" ><img src="{$module_data.PRODUCTS_IMAGE}" width="450px" height="450px" alt="{$module_data.PRODUCTS_NAME}" /></a>
                    {else}
                        <strong>Kein Bild vorhanden!</strong>
                    {/if}
                    </li>
                    </ul>
                   

</div><div class="ueberschrift">{$module_data.PRODUCTS_NAME} <br /><div class="ueberschrift2">{if $module_data.PRODUCTS_SHORT_DESCRIPTION!=''}    {$module_data.PRODUCTS_SHORT_DESCRIPTION|truncate:30:"...":true} {else}   &nbsp;  {/if}</div></div></div>

{/foreach}

und die CSS so

Code: CSS  [Auswählen]

ul.test > li {
    position: relative;
    float: left;
    list-style: none;
margin-left: -14px;
margin-top:-10px;
    font-size: 10px;
}

ul.test a:hover:after,
ul.test a:focus:after
{
    background: rgb(255,255,255);
          background: rgba(255,255,255,0.7);
    bottom: 4px;
    content: attr(text);

    color: #000;
    display: block;
    font-weight: bold;
    height: 40px;
    line-height: 30px;
    position: absolute;
   
    width: 425px;
        font-family: Geneva, Arial, Helvetica, sans-serif;
        font-weight: bold;
        padding-left: 25px;
        font-size: 16px;
}

vielleicht hat hier jemand eine Lösung, damit ich den Preis Formatieren kann

LG Johnny

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

[Traumkunst]

Erstaunliche Konstruktion:

Code: PHP  [Auswählen]

<a href="{$module_data.PRODUCTS_LINK}"  text="{$module_data.PRODUCTS_PRICE}             {$module_data.PRODUCTS_TAX_INFO}" ><img src="{$module_data.PRODUCTS_IMAGE}" width="450px" height="450px" alt="{$module_data.PRODUCTS_NAME}" /></a>

Soweit ich weiß, ist "text" kein gültiges Attribut von "a". (In HTML5 mag sowas verrücktes möglich sein, aber dieses Dokument hier ist als XHTML1 deklariert). Das konkrete Problem hier tritt jedoch auf, wenn der PRODUCTS_PRICE z.B. ein Sonderangebot ist: Dann enthält der nämlich auch seinerseits HTML-Tags, die dann in das "a"-Tag reingeschrieben werden, was den HTML-Code kaputtmacht.

Heraus kommt dabei nämlich folgendes:

Code: PHP  [Auswählen]

text="<span class="productOldPrice"><small>Unser bisheriger Preis </small> 34,51 EUR</span><br /><br /> Jetzt nur  23,80 EUR<br /><br /><small>Sie sparen 31 % </small>         inkl. 19 % MwSt."

Ich würde zunächst versuchen, das anders zu lösen, und das was da derzeit über das invalide "text"-Attribut gemacht wird, einfach in ein "span"-Element auslagern, das sich an einer syntaktisch korrekten Stelle (z.B. zwischen <a> und </a> befindet. Das könnte evtl so aussehen:

Code: PHP  [Auswählen]

<a href="{$module_data.PRODUCTS_LINK}" > <span class="versteckteinfo">{$module_data.PRODUCTS_PRICE} {$module_data.PRODUCTS_TAX_INFO}</span><img src="{$module_data.PRODUCTS_IMAGE}" width="450px" height="450px" alt="{$module_data.PRODUCTS_NAME}" /></a>

Ein alternativer Workaround/"Bauerntrick" wäre, für diese Startseiten-Features keine Sonderangebote zu verwenden... dann würde das Problem der verschachtelten HTML-Tags nicht auftreten. (ps.: sauberes HTML wäre das dann aber trotzdem immer noch nicht )

[moebelcom]

HAllo,

Danke für die Antwort.
mir würde auch reihen wenn nur der Text erscheint "jetzt xx% sparen"

aber wie?

LG johnny

[noRiddle (revilonetz)]

Also meine Wenigkeit versteht überhaupt nicht was du machen willst.

Was immer bei hover (hover on what btw. ?) auftauchen soll, einfach syntaktisch korrekt ein Element in das zu hovernde Element einfügen im CSS auf display:none; setzen und bei hover auf display:block; .
Also, willst du daß etwas auf hover des "li" passiert z.B. so:

Code: XML  [Auswählen]

<ul class="test">
    <li>
    {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>Kein Bild vorhanden!</span>
    {/if}
        <span class="show-up-on-hover">
            {$module_data.PRODUCTS_PRICE}<br />
            {$module_data.PRODUCTS_TAX_INFO}
        </span>
    </li>
</ul>

Code: CSS  [Auswählen]

ul.test li {display:block; position:relative;}
ul.test li span.show-up-on-hover {display:none;}
ul.test li:hover span.show-up-on-hover {display:block;}

Die Positionierung des span.show-up-on-hover mußt du natrülich noch angeben.

Du kannst auch ein weiteres li benutzen nach jedem li und im CSS das dann eben so ansprechen.

Code: CSS  [Auswählen]

ul.test li + li.show-up-on-hover {....}

Gruß,
noRiddle