Themeover

Hi Pik,

I did actually responded to your message posted on the RSS feed-reader thread, but it doesn’t seem to be there now, how strange.

I was saying that I have updated Microloader now to version 1.1.3 (which should fix your problem). I’ve just this minute updated Microloader on wordpress.org (I forgot to update the version number on the plugin before) so there may be a slight delay before v1.1.3 is available to download.

I wasn’t actually able to replicate your issue so please write back here to confirm that the problem has been resolved.

Many Thanks,

Sebastian

Hi,

I was remembering the markup wrong. You target the divups on your specific page using:

#divup-post-2193 .divup { width:179px; }
#divup-post-2193 .div-1 { width:400px; }

Cheers,

Sebastian

Glad to hear it!

Seb

No, the original code should just work.

I’m sorry to say I’m stumped as to what’s lifting that first image!

OK, we’ve wondered a bit far off topic now so this is the last time I’m going to help you with this! But this final amended script should do everything you’re after:

$(window).load(function(){
	$("img").each(function(i,item){
		var vertMargin = ( $(".TINYMCE_gallery_wrapper").height()-$(item).height() )/2;
		var imgAlt = $(item).attr('alt');
		$(item)
		.css( "margin-top", vertMargin)
		.css( "margin-bottom", vertMargin)
		.after('<span class="img-alt-text">'+imgAlt+'</span>');
	});
});

It’s worth mentioning that you probably could’ve achieved all of this with CSS alone.

Over and out!

Hi Christian,

Sorry for late reply, I was on holiday.

If you can post a link to the web page you are working on I will just post the CSS code you need in this forum. If that’s not possible, try the following:

– don’t use relative or absolute positioning on anything
– If you want the wrapping divs to be the same width as the images, give them a “width:150px” (or what ever). If you also want them to stack along in a line, give the divs a “float:left” (or right). If you float the divs, you may want to give the divup-wrap div “overflow:hidden” – which has a similar effect of adding a <div style=”clear:left”></div> after all the divs inside divup-wrap (but is a bit cleaner as it doesn’t require extra html or inline CSS).

Hope that helps!

Seb

OK, here is some example CSS for you. But first, copy the dummy content from the plugin’s “Installation” tab (http://wordpress.org/extend/plugins/divup-content/installation/) into your static page, and save the page.

Second, paste this CSS at the bottom of your theme’s style.css file:

.divup-wrap { overflow:hidden; background: url(path-to/your-bg-image.jpg) no-repeat; }
.divup { float:left;width:45%;margin-right:10%;margin-bottom:10%; background:yellow; }
.div-even { margin-right:0; }

– You don’t need to edit any template files such as page.php

Now view the page (where you added the dummy content) and you should see that the content in between [divup] shortcodes has been split into squares with yellow backgrounds that occupy half the available space, with a small margin separating them – ie a two-column layout.

Note, I’ve used percentage units in the CSS above. If the yellow squares don’t stack horizontally, try to work out the pixel width of the .divup-wrap <div> (by inspecting with firebug perhaps) and then change all the percentage units to fixed width units (e.g. 320px).

Also, if you’re still having trouble, please post a link to the page where you pasted the dummy content – I won’t be able to help you any further unless you do that.

Best of luck,

Seb