Imageslider - Ecken Abrunden

[Oktay]

Hallo, kann man die Ecken des Imagesliders abrunden?

Gruß,
Oktay



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

[h-h-h]

Bilder bearbeiten, Javascript oder mit CSS.

[Oktay]

Hallo h-h-h,
vielen Dank. Stimmt Bilder bearbeiten ist, denke ich, für mich am einfachsten. Nochmals Danke für die Antwort.
Hab da mal eine ganz andere Frage. Könntest du mir sagen wie lange du brauchen würdest, um einen Header auf die komplette Breite zu vergrößern?

[Oktay]

Ist das "stylesheet.css" richtig hierfür? Wenn ja was muss ich hier einfügen um abgerundete Ecken zu erhalten?

Code: CSS  [Auswählen]

ul#imageslider {
        margin:0 auto;
        padding-bottom:20px;
        list-style:none;
        list-style-position:outside;
        overflow:hidden; /* Falls die Inhalte zu gross sind, werden diese abgeschnitten */
        width: 980px; /* Breite des Slideshowcontainers */
}
ul#imageslider #slidercontent {
        display: none;  /* Textanzeige deaktiviert durch display:none; */
        z-index: 888;   /* Durch den z-index wird der Conatiner des Textes auf das Bild gelegt */
        position: relative;
        top: -195px;    /* Damit der Text auf dem Bild angezeigt werden kann müssen wir den Container nach oben ziehen */
        width: 980px; /* Breite des Slideshowcontainers */
        overflow: hidden; /* Falls die Inhalte zu gross sind, werden diese abgeschnitten */
        text-align: justify;
        font-size: 0.9em;
        background: #ccc;
        /* Regelt die Transparenz des Textes um das Bild darunter noch sehen zu können */
        -moz-opacity: 0.7;
        opacity: 0.70;
        filter:alpha(opacity=70);
 

[Oktay]

bzw. was muss ich im Javascript ändern oder einfügen?

Code: CSS  [Auswählen]

// Imageslider (c)2008 by Hetfield - www.MerZ-IT-SerVice.de - Begin
$(document).ready(
                                function(){
                                        $('ul#imageslider').innerfade({
                                                speed: 800,
                                                timeout: 4000,
                                                type: 'sequence',
                                                containerheight: '386px'
                                        });
                                });
// Imageslider (c)2008 by Hetfield - www.MerZ-IT-SerVice.de - End
 

[Matt]

http://border-radius.com/ ist dein Freund für runde Ecken.

[Oktay]

Danke Matt, jetzt sollte ich nur noch wissen, wo ich das einfüge.

[nicnero]

Hmmm
Das funktioniert aber nicht im Explorer. Der ist da ein wenig eigen.
 

[twe]

hier ein Javascript und Anleitung für den IE: Curved corner (border-radius) cross browser

[Matt]

[...]
Das funktioniert aber nicht im Explorer. Der ist da ein wenig eigen.

Das stimmt. Aber: Who cares? Und zur Not, wenn man gesteigerten Wert auf die IE-Klientel legt, muss man halt http://css3pie.com/ bemühen.

[Matt]

Danke Matt jetzt sollte ich nur noch wissen wo ich das einfüge.

Ich weiß nicht wie dein Slider im Detail aussieht, aber der gepostete CSS-Code war schon ein guter Anfang würde ich mal sagen. Wenn das nicht tut, poste mal einen Link zum Shop.

[Oktay]

http://www.saglam.www30.hostkraft.de/
Da ich Laie bin tue ich mir natürlich etwas schwerer als andere.  

Habe es in der "stylesheet.css" mal so eingefügt, es tut sich aber nichts.

Code: CSS  [Auswählen]

ul#imageslider {
        margin:0 auto;
        padding-bottom:20px;
        list-style:none;
        list-style-position:outside;
        overflow:hidden; /* Falls die Inhalte zu gross sind, werden diese abgeschnitten */
        width: 980px; /* Breite des Slideshowcontainers */
}
ul#imageslider #slidercontent {
        display: none;  /* Textanzeige deaktiviert durch display:none; */
        z-index: 888;   /* Durch den z-index wird der Conatiner des Textes auf das Bild gelegt */
        position: relative;
        top: -195px;    /* Damit der Text auf dem Bild angezeigt werden kann müssen wir den Container nach oben ziehen */
        width: 980px; /* Breite des Slideshowcontainers */
        overflow: hidden; /* Falls die Inhalte zu gross sind, werden diese abgeschnitten */
        text-align: justify;
        font-size: 0.9em;
        background: #ccc;
        /* Regelt die Transparenz des Textes um das Bild darunter noch sehen zu können */
        -moz-opacity: 0.7;
        opacity: 0.70;
        filter:alpha(opacity=70);
        -webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
 

[twe]

Das Bild überdeckt die Ecken. Ich denke aber, das beste, in deinem Fall, sind Bilder mit abgerundeten Ecken und passende Maße.

[Oktay]

Gut, dann werde ich das heute mal so versuchen. Ich hoffe das klappt auch bei den unteren acht Boxen.

[Oktay]

Danke vielmals, hat super funktioniert.