myGully.com

myGully.com (https://mygully.com/index.php)
-   Entwicklung & Programmierung (https://mygully.com/forumdisplay.php?f=72)
-   -   .css problem "bild mit schatten" (https://mygully.com/showthread.php?t=3532588)

kochi19 06.12.14 09:23
.css problem "bild mit schatten"
 
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:
http://imagizer.imageshack.us/v2/640...909/QnsRKk.jpg

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 10.12.14 07:39
Hast du es schonmal mit "display:inline-block;"(+ "text-align:center" aber das ist ja schon vorhanden) an Stelle der float Eigenschaft versucht?

NetGhost03 21.12.14 14:15
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 und freigeschaltete Mitglieder sichtbar. Jetzt registrieren...]

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


Alle Zeitangaben in WEZ +1. Es ist jetzt 23:12 Uhr.

Powered by vBulletin® (Deutsch)
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.