• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Slimbox 2: Gerundete Ecken

  • Ersteller Ersteller Sempervivum
  • Erstellt am Erstellt am
S

Sempervivum

Guest
Hallo,
ich wollte mal versuchen, die Bilder meiner Slimbox2 mit gerundeten Ecken auszustatten, wie man es von anderen Lightboxes kennt, aber ich bin nicht zum Ziel gekommen. Habe diesen Generator verwendet:
CSS3 Rounded Corner Generator - CSS Portal
und folgendes im CSS geändert:
HTML:
#lbImage {
	position: absolute;
	left: 0;
	top: 0;
    border-radius: 10px 10px 0px 0px;
    -moz-border-radius: 10px 10px 0px 0px;
    -webkit-border-radius: 10px 10px 0px 0px;
	border: 10px solid #fff;
	background-repeat: no-repeat;
}
HTML:
#lbBottom {
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-size: 10px;
	color: #666;
	line-height: 1.4em;
	text-align: left;
    border-radius: 0px 0px 10px 10px;
    -moz-border-radius: 0px 0px 10px 10px;
    -webkit-border-radius: 0px 0px 10px 10px;
    border: 10px solid #fff;
 }
aber es funktioniert nicht, die Ecken sind nach wie vor eckig.
Die Slimbox befindet sich auf dieser Seite:
Home
Bitte um Hilfe.
Viele Grüße - Ulrich
 
mir ist gerade nicht ganz klar, welche Ecken du abrunden willst.

Trotzdem:
#lbImage hat ein border-width von 10px, d.h. der Radius muss >10px sein, um einen Effekt zu bewirken.
Gleiches gilt für #lbBottom, das liegt jedoch noch in einem anderen div mit weißem Hintergrund, d.h. die Border sieht man eh nicht, egal wie rund oder eckig
 
das liegt jedoch noch in einem anderen div mit weißem Hintergrund, d.h. die Border sieht man eh nicht, egal wie rund oder eckig
Das ist des Rätsels Lösung, der Hintergrund dieser Divs überdeckt den Rand der anderen Elemente. Nachdem ich die Hintergrundfarbe gelöscht habe, funktioniert es. Firebug ist sehr nützlich, um über den Aufbau der Elemente Klarheit zu bekommen.
Vielen Dank für den Hinweis!
 
Zurück
Oben