Runde Ecken bei den verschienden Boxen

[marces]

Hallo, kann mir jemand vieleicht helfen wie ich die einzelenen Boxen wie Kategorien, Informationen rund bekomme ohne in css und html rumzubasteln. Ich hatte mir ein jquery addon für sowas gezogen, aber irgendwie gibt es da einen Fehler mit der Smarty Box, vieleicht weiß ja jemand worans liegt ?

Vielen Dank



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

[DokuMan]

Im Stylesheet reicht es aus, wenn du unter

Code: CSS  [Auswählen]

h2.categoryheader

Code: CSS  [Auswählen]

background: #868686 url(img/bg_boxheader.gif);
 

Ein Bild mit abgerundeten Ecken angibst!

[jahde]

dann hat er aber unten noch keine abrundungen.

[Tomcraft]

Forensuche?

-> Einige Fragen zu den Boxen

Grüße

Torsten

[Kwonga]

Hi Marces,
ich habe auch lange danach gesucht und keine andere Lösung gefunden als es in der stylesheet.css und in den jeweiligen box_xxxx.html anzupassen.
Ich aber gar nicht so schwer.

In der stylesheet.css überhall wo boxheader drin steht einfach

Code: PHP  [Auswählen]

background:transparent url(img/bg_boxheader.gif);

Direkt unterhalb von der css classen definition, z.B.

Code: CSS  [Auswählen]

h2.boxheader {
        background:transparent url(img/bg_boxheader.gif);

und dann überall wo boxfooter drin steht einfach:

Code: CSS  [Auswählen]

background:transparent url(img/bg_boxfooter.gif);

Auch dirket unterhalb

Code: CSS  [Auswählen]

.boxfooter {
        background:transparent url(img/bg_boxfooter.gif);

Die Grafiken darfst Du natürlich nicht vergessen zu hinterlegen.

Der Warenkorb und das Kategorien Menu haben eigene Einträge.

Jetzt noch die HTML Dateien um

Code: PHP  [Auswählen]

<div class="boxfooter"> </div>

Ergänzen und das wars...
Ich hab noch ein

Code: PHP  [Auswählen]

background:transparent url(img/bg_body.gif) repeat scroll 0 0;

eingefügt damit die Grafik rundherum geht.
Kannst ja mal bei mir reinschauen.

Grüße
Dirk

[billybob]

Hallo marces,

Mit etwas weniger Aufwand geht es auch indem Du in in der CSS für die unteren Rundungen die CSS 3.0 Direktiven

Code: CSS  [Auswählen]

        border-bottom-right-radius:10px;
        border-bottom-left-radius:10px;
        -moz-border-radius-bottomright:10px;
        -moz-border-radius-bottomleft:10px;
        -webkit-border-bottom-right-radius:10px;
        -webkit-border-bottom-left-radius:10px;
 

verwendest. Du sparst Dir damit das rumeditieren der HTML-Dateien
ABER:
Funktioniert nur mit Browsern, die auf Mozilla oder dem Webkit aufbauen (Safari, Firefox, Konqueror...) also nicht mit Microsoft und Opera.

Gruß
Rolf

[Matt]

Firefox baut nicht auf Webkit auf, sondern hat mit Gecko seine eigene Renderingengine. Opera konnte es mal, kann es aber jetzt warum auch mal wieder nicht mehr. Naja, who cares?