FGallery thumbnails zentrieren

bilo

Hi! Schaut euch mal folgende Fotoseite in meinem Blog an:

http://www.bilozone.de/blog/wp-conten….php?album=test

Im Internetexplorer sind die Thumbnails durch den Wechsel von Hochformat und Querformat, teilweise durcheinander. Wie kann ich das vermeiden? Würde es reichen, wenn ich dafür sorge, dass jedes Thumb für sich zentriert dargestellt wird? Oder wie kann ich die für alle Thumbs, egal ob hoch oder quer, die gleiche höhe und Breite einstellen?

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

mfitzen

Hi!

Kann Dir bei Deinem Problem leider nicht so auf Anhieb helfen. Hätte da aber mal ne Gegenfrage :mrgreen:

Sehe ich das richtig, dass man für jedes einzelne Album der fGallery eine neue statische Seite anlegen muss?

bilo

Richtig, das ist so! Schau dir einfach den Link an, der zu dem jeweiligen Album führt. Nach dem = kommt einfach der Albumname und voilá

So, und nun zurück zu meinem Problem :-)

bilo

Hmm... weis hier wirklich keiner Rat? Das ist ja kein fgallery speziefisches Problem sondern mit css zu lösen oder?

Mir würds auch reichen, wenn die Rahmen der Thumbnails alle die gleiche höhe und breite haben also quadratisch sind! Hier mal ein Auszug aus der css. Vielleicht bringt euch das weiter

Code

.fim {
 padding: 0px;
 margin: 0px;
 clear: both;
 width: 99%;
 min-width: none;
}
h3.fim-nav {
 padding:0px;
 margin:0px;
  border-bottom: 1px dashed #CCC;
}
.fim-album {
 clear: both;
 margin-top:20px;
}
.fim-title {
 color: #260;
 border-bottom: 1px dashed #CCC;
 margin: 0px 0px 0px 0px;
 padding: 0px 0px 0px 0px;
}
.fim-meta {
 margin: 0px 0px 5px 0px;
}
.fim-album-description {
 font-size: 11px;
 margin-top: 10px;
 margin-bottom: 10px;
}
.fim-tn-border-album {
 float: left;
 margin-top: 0px;
 margin-right: 4px;
 margin-bottom: 8px;
 margin-left: 4px;
 width:1200px;
 height:1200px;
}
.fim-tn-border-sidebar{
 float: left;
 margin-top: 0px;
 margin-right: 4px;
 margin-bottom: 8px;
 margin-left: 4px;
}
/*.fim-thumbnail {
 float: right;
 background: url(images/shadow.gif) no-repeat bottom right;
 float: left;
 margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}*/
.fim-thumbnail img {
   background-color: #fff;
  border: 10px solid #a9a9a9;
  display: block;
  margin: -5px 5px 5px -5px;
  padding: 4px;
  position: relative;
}
.fim-thumbnail img:hover {
 background-color: #ccd;
}
/*********************************************/
/* Image */
/*********************************************/
.fim-photo-block {
 float: left;
 margin: 10px 5px 10px 5px;
}
.fim-photo {
 background: url(images/shadow.gif) no-repeat bottom right;
 float: left;
}
.fim-photo img {
  background-color: #fff;
  border: 1px solid #a9a9a9;
  display: block;
  margin: -5px 5px 5px -5px;
  padding: 4px;
  position: relative;
}
.fim-photo-date{
 margin:0px;
 padding:0px;
}
/*********************************************/
/* Navigation */
/*********************************************/
.fim-photo-nav{
 width:99%;
 padding-top:15px;
 padding-bottom:15px;
}
.fim-nav-buttons{
 height:20px;
 float:left;
 text-align:center;
 border:1px solid #ccc;
 background:#F4F4F4;
 margin-top: 5px;
 margin-right: 10px;
 margin-bottom: 5px;
 margin-left: 10px;
 padding-top: 5px;
 padding-right: 10px;
 padding-bottom: 5px;
 padding-left: 10px;
}
/*********************************************/
/* Comments */
/*********************************************/
.fim-comment{
 margin-bottom:1.6em;
 overflow:hidden;
}
#fim-commentblock h2{
 font-size:130%;
 margin-bottom:1em;
}
.fim-commentname{
 float:right;
 width:375px;
 color:#4675bc;
 padding-top:10px;
 padding-right:10px;
 
}
.fim-commentname a{
 color:#000;
 font-weight:bold;
 
}
#fim-commentblock p{
 padding-bottom:.7em;
}
.fim-commenttext{
 float:right;
 width:375px;
 min-height:40px;
 padding-right:10px;
 clear:both;
}
.fim-dec{
 height:10px;
 clear:both;
}
* html .fim-commenttext{
 height: 40px;
 overflow: visible;
}
.fim-gravatar{
 float:left;
 width:50px;
 height:50px;
 padding:6px;
}
#fim-commentsform{
 padding:10px;
 margin-bottom:2em;
 
}
/*********************************************/
/* Misc */
/*********************************************/
.fim_clear{
 clear:both;
}
.fim-caption{
 font-weight:bold;
 border:1px solid #000; 
 
}

Alles anzeigen

Willkommen! Melden Sie sich an oder registrieren Sie sich.

FGallery thumbnails zentrieren

Jetzt mitmachen!