[kochi19]

Hallo,
ich habe gerade ein kleines Problem mit meiner .css Datei, vielleicht kann mir jemand helfen. Ich benutze folgenden Code um eine art kleine produktansicht zu generieren.

PHP-Code:

.gallery {    width:744px; text-align:center;margin:auto; margin-bottom:40px;}
.gallery #mainPic {    text-align:center; }
.gallery #mainPic img {    max-height: 500px;max-width: 744px;height: 500px; }
.gallery #galleryContent {width: 742px; margin-top:40px;}
.gallery #galleryContent ul li {display: inline;}
.gallery ul { height:130px; }
.gallery li.first { margin-left:0px !important; }
.gallery li {text-align:center;float: left;    width:130px;max-width:130px; min-width:130px;height:130px;display:block;padding: 0px; margin-left:20px !Important;-moz-box-shadow: 0 0 10px 1px #EEEEEE;
-webkit-box-shadow: 0 0 10px 1px#EEEEEE;
box-shadow: 0 0 10px 1px #EEEEEE;}
.gallery #galleryContent ul li a img {    max-height: 130px;max-width: 130px;} 


nun werden die vorschaubilder aber immer linksbündig angezeigt.
Setze ich im code von "float: left" auf float: center", schiebt es mir die Bilde zwar in die Mitte aber der Schatten um das vorschaubild wird nicht korrekt dargestellt. Hier der geänderte code:

PHP-Code:

.gallery {    width:744px; text-align:center;margin:auto; margin-bottom:40px;}
.gallery #mainPic {    text-align:center; }
.gallery #mainPic img {    max-height: 500px;max-width: 744px;height: 500px; }
.gallery #galleryContent {width: 742px; margin-top:40px;}
.gallery #galleryContent ul li {display: inline;}
.gallery ul { height:130px; }
.gallery li.first { margin-left:0px !important; }
.gallery li {text-align:center;float: center;    width:130px;max-width:130px; min-width:130px;height:130px;display:block;padding: 0px; margin-left:20px !Important;-moz-box-shadow: 0 0 10px 1px #EEEEEE;
-webkit-box-shadow: 0 0 10px 1px#EEEEEE;
box-shadow: 0 0 10px 1px #EEEEEE;}
.gallery #galleryContent ul li a img {    max-height: 130px;max-width: 130px;} 


Und hier mal wie es angezeigt wird:


Der Schatten geht wie Ihr sehen könnt nicht um das Bild.
Viele Dank schon mal für euere Tipps.

PS: Bevor wieder welche meckern: eine andere Überschrift ist mir nicht eingefallen.

[Zeeru]

Hast du es schonmal mit "display:inline-block;"(+ "text-align:center" aber das ist ja schon vorhanden) an Stelle der float Eigenschaft versucht?

[NetGhost03]

Poste mal dein HTML snippet mit.
Oder mach am besten mal einen Codepen.

Sieht für mich eher aus, als ob du einen Fehler im Markup hast.

Weil wenn ich das in nen Codepen reinpaste, funktioniert es auch mit dem float:left:

[ Link nur für registrierte Mitglieder sichtbar. Bitte einloggen oder neu registrieren ]

[Dönertellertier]

Lass das float: left; so wie es ist, gib dem ul ein text-align: center; und dem li das schon angesprochene display: inline-block;