Bilder (Art Boxen) verschachtelt anzeigen lassen ?

Japs

Angesehenes Mitglied
Hallo,
ich bastle gerade an einem kleinen Projekt und hab da das Problem, dass sich Bilder innerhalb eines Rahmens unterschiedliche Größen haben - der Rahmen drum herum passt sich an die Größe des Inhaltes an. Nun möchte ich, dass sich diese Boxen quasi verschachteln, so dass - egal welche Größen diese haben, nach unten zur nächsten Box mit dem gleichen Abstand dargestellt werden.

Derzeitig sieht es so aus:
http://handtasche24.net/handtasche/kategor...ssoires/page/13

Ich möchte aber, dass der Leerraum zwischen "Boxen" verschwindet bzw. die Boxen nachrutschen quasi.
Gibt es dafür eine Lösung oder Jemanden, der das umsetzen kann ?

Danke & Gruß Dirk O.
 
QUOTE (MyVengeance @ Do 7.02.2013, 14:14) enjoy
.article{

height: 200px;

}

.wp-post-image{
width: 100px;
height: 100px;
}

Hallo,
sorry, aber ich verstehe nicht Ganz ????

Ich hab das hier gefunden bzw. Tipp bekommen:
http://masonry.desandro.com/index.html

Nur kann ich das nicht alleine in WP einbauen/umsetzen, dafür bräuchte ich Hilfe
smile.gif
 
QUOTE (Japs @ Do 7.02.2013, 14:53)
QUOTE (MyVengeance @ Do 7.02.2013, 14:14) enjoy
.article{

height: 200px;

}

.wp-post-image{
width: 100px;
height: 100px;
}

Hallo,
sorry, aber ich verstehe nicht Ganz ????

Ich hab das hier gefunden bzw. Tipp bekommen:
http://masonry.desandro.com/index.html

Nur kann ich das nicht alleine in WP einbauen/umsetzen, dafür bräuchte ich Hilfe
smile.gif


Ich nehme mal an das du WooCommerce benutzt, damit alle deine Artikel gleichmässig aussehen musst du die von mir gegebene Attribute im woocommerce.css ergänzen oder ändern.

Was du oben hast ist ein jQuery Zusatz, welchen du einbauen musst, ich würde dir empfehlen, dass du dies offline testet.

Falls du sonst immernoch probleme hast, kann ich dir kurz helfen.
 
QUOTE Ich nehme mal an das du WooCommerce benutzt,


Nein verwende ich nicht !!!



QUOTE [/B]damit alle deine Artikel gleichmässig aussehen musst du die von mir gegebene Attribute im woocommerce.css ergänzen oder ändern.



Genau das will ich ja eben nicht.
Ich will nicht, dass es gleichmäßig aussieht, sondern verschachtelt, egal wie groß die Boxen nach unten sind.
 
Entspann dich.

downloade denn Javascript Zusatz, mache einen Ordner in deinem Design Ordner namens js und dann lege den Zusatz dort rein.


ergänze die functions.php von deinem Design um folgendes
CODE
function gridlayout(){
wp_enqueue_script( 'gridlayout',
'./js/jquery.masonry.min.js')};

add_action('wp_enqueue_script','gridlayout');



füge dies im Footer


CODE
<script type="text/javascript">
JQuery(function(){
 JQuery('#container').masonry({
   // options
   itemSelector : '.product',
   columnWidth : 185
 });
});
</style>



Bitte
 
Und nochmals vorsichtig zuerst testen, Fehler in der functions.php führen zu 500 Fehlern auf der ganzen Wordpress Seite!
 
style.css anpassen und folgendes hinzufügen
smile.gif


(Zeile 2019)

body.tax-product_category article .productcat-title {height: 60px;}

(Zeile 356)
.entry-content img, .comment-content img, .widget img, img.header-image, .author-avatar img, img.wp-post-image {height: 100px;}

müsste passen
smile.gif
 
QUOTE (Manuel Merz @ Do 7.02.2013, 20:13) style.css anpassen und folgendes hinzufügen
smile.gif


(Zeile 2019)

body.tax-product_category article .productcat-title {height: 60px;}

(Zeile 356)
.entry-content img, .comment-content img, .widget img, img.header-image, .author-avatar img, img.wp-post-image {height: 100px;}

müsste passen
smile.gif


Ich weiss zwar nicht wieso du ihm das selbe vorschlägst als ich, aber dafür musst du nicht alle gleiche klassen nehmen.
 
Zurück
Oben