Preisschild Etikett hinterlegen

[frawo]

Ich hab's eigentlich schon in einem Thread angesprochen wo ich meinen Shop vorgestellt habe, aber da es da untergeht und auch eigentlich nicht da hin gehört habe ich hier 'nen neuen auf gemacht.

Ich wollte in der Produktübersicht der Kategorien hinter den Preis ein Preisschild legen.
Das hab ich auch soweit hin bekommen, allerdings bekommen ich nicht den Preis über das Preisschild zentriert und dann wollte ich den Preis noch ein wenig schräg stellen, da das Preisschild auch schräg ist und nicht waagerecht, also von links unten nach rechts oben um ca. 15-20 Grad. Ist das möglich?

Hab auch schon ein bisschen in der Stylesheet rum gespielt aber ohne den gewünschten Erfolg.

Code: CSS  [Auswählen]

.productPreviewContent .price {
        background:url(img/preisschild.gif) no-repeat center bottom;
        height:52px;
        font-size:22px;
        font-weight:bold;
        padding:0px 0px 0px 0px;
        margin:0;
        color: #FFFFFF;
}
 

zu sehen ist das ganze auch in live in meinem Testshop www.color4all.de.
Hoffe ihr könnte mit weiter helfen.

Gruß Frank

  [ Für Gäste sind keine Dateianhänge sichtbar ]



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

[h-h-h]

Guten Tag Frank,
nimm einen von diesen beiden:

Code: CSS  [Auswählen]

line-height:52px;

oder

Code: CSS  [Auswählen]

vertical-align:middle;

Gruß

h-h-h

[JPP]

Texte bzw. Elemente schräg darzustellen geht lediglich per CSS3, was nur leider der Internet Explorer nicht unterstützt, das kommt erst mit Version 9.

Es würde dann irgendwann per

Code: CSS  [Auswählen]

transform: rotate(-10deg)
 

funktionieren.
Wenn du das schon jetzt für Firefox-User machen willst, musst du

Code: CSS  [Auswählen]

-moz-transform: rotate(-10deg)
 

verwenden. Aber das ist wohl keine anständige Lösung, sieht es in anderen Browsern schon reichlich blöd aus.

Von daher würde mir nur einfallen, das über ein dynamisch erzeugtes Bild zu lösen.

[JPP]

[...]
oder

Code: CSS  [Auswählen]

vertical-align:middle;

[...]

Wir hoffen mal nicht, dass frawo für seine Preise Tabellen benutzt.
line-height ist hier die richtige Wahl, auch wenn der Text dann noch nicht schräg ist, er ist zumindest in der Mitte.

[h-h-h]

Internet Explorer Matrix Calculator

Gruß

h-h-h

[JPP]

Interessant, dass der IE das auch im "filter" hat, mal wieder was gelernt.
Was aber leider auch nichts daran ändert, dass die Lösung nicht valide ist.

[frawo]

Dank euch beiden mal für die Hilfe. Der Tip von h-h-h hat mal wieder super geklappt. Wenn ich das ganze über ein dynamisches Bild realisieren sollte, bekäme ich es eh nicht hin, also werd ich wohl das Etikett waagerecht stellen müssen. Aber hier schon gleich mein nächtste Problem:

Ich hatte nicht an Sonderpreise für Kundengruppen gedacht. Wenn sich ein Kunde einloggt der Spezialpreise bekommt, sieht das ganze besch.... aus. (siehe Bild). Frag mich wie ich das jetzt hinbekomme damits auch noch gut aussieht.

Gruß Frank

  [ Für Gäste sind keine Dateianhänge sichtbar ]

[franky_n]

Hallo frawo,

Firebug nutzen Stelle raussuchen und in CSS passend ändern mit einer Höhe einer margin whatever...

Viele Grüße

Franky

[h-h-h]

Code: PHP  [Auswählen]

{if strpos($module_data.PRODUCTS_PRICE,'Statt')!==FALSE}
<p class="sprice">{$module_data.PRODUCTS_PRICE}</p>
{else}
<p class="price">{$module_data.PRODUCTS_PRICE}</p>
{/if}
 

Dann brauchst Du nur noch in der Stylesheet extra Anpassungen für .sprice machen.

Eventuell werden hier strpos('$module_data.PRODUCTS_PRICE' , Backticks benötigt, welche hier im Forum nicht angezeigt werden.

Gruß

h-h-h

[frawo]

Dank Euch nochmal ganz Herzlich für die vielen Tips. Wahnsinn was man hier im Forum dazulernt.
Im Firefox sieht das ganze schon gut aus www.color4all.de (mein Testshop), leider weiß ich nicht wie ich das im IE hinbekomme. Auch dies Seite mit dem Calculator hat mich nicht viel weiter gebracht.

Gruß Frank

[Rancho]

Auch wenn es nicht zu deinem eigentlichen Problem passt, aber willst du nicht die Suche oben auch noch anpassen?  

Die ist bei mir nämlich sehr nach rechts geschoben.

[frawo]

Hallo Rancho,

Wie meinst du das? Nach rechts geschoben? bei mir seh ich da nix, kannste mal nen screen hier rein stellen?

Gruß Frank

[Rancho]

[ Für Gäste sind keine Dateianhänge sichtbar ]

Firefox 3.6.13, im Chrome wird das auch so angezeigt. IE weiß ich und will ich gar nicht wissen.

Wollte ich mal nur nebenbei anmerken. Ist ja nicht unbedingt wichtig, ist mir aber sofort aufgefallen.

MfG

[frawo]

Wünsch euch allen ein schönes und ruhiges  Weihnachtsfest,

Die Suche hab ich jetzt noch ein bischen verschoben. Im IE und im Firefox sieht es jetzt ganz gut aus, crome hab ich nicht.

Aber jetzt zu alten Thema:
Kann mir jemand sagen was ich genau einfügen muss damit die Etiketten auch im IE schräg gestellt werden?

Bisher sieht es bei mir in der Stysheet so aus:

Code: CSS  [Auswählen]

.productPreviewContent .sprice {
        background:url(img/preisschild.gif) no-repeat center bottom;
        line-height:17px;
        height:42px;
        font-size:20px;
        font-weight:bold;
        padding:0px 0px 0px 0px;
        margin:0;
        color: #FFFFFF;
        -moz-transform: rotate(-10deg);

}

Gruß Frank