[Plugin: DivUp Content] Differnt width of colums

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

Hey, hope the holiday was good.

I actually solved it yesterday with jquery.
$(window).load(function(){ $(“img”).each(function(i,item){ ?$(item).css(“margin-top”,$(“.TINYMCE_gallery_wrapper”).height()-$(item).height() ); }); });

but now im a bit shattered how to get each img. positioned in the middle, same spacing top and bottom.

/christian

Perhaps you could try this instead:

$(window).load(function(){
	$("img").each(function(i,item){
		$(item)
		.css( "margin-top", ($(".TINYMCE_gallery_wrapper").height()-$(item).height())/2 )
		.css( "margin-bottom", ($(".TINYMCE_gallery_wrapper").height()-$(item).height())/2 );
	});
});

[Please post code or markup snippets between backticks or use the code button.]

Ahh thanks!

I do have one last question, as you probably understand there’s a lot of trial & error, hehe.

Im trying to print the img alt. tags with out the hover, in other words id like them to be visible.
iv tried to change .hover but without success

All the best

[Code moderated as per the Forum Rules. Please use the pastebin]

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!