Indexhibit Support

Hi,

I have used this thread before to try and alter how the text and images are placed when using the visual index format. What I want is the text on the left, with the images sitting to their right, which I have achieved.

indexhibit.org/forum/thread/18995/

The problem I am having is that once the text has finished the next line of photos from the visual index then sits below where the text is. My aim is to have the entire area below text free and clear. Is there some simple coding I can use to stop the images going into that area? I have tried messing around with the div wrap and visual index format with no joy so far. Any help appreciated.

An example page to show my problem is here

petehewitt.com/furniture/

I assume you are adding the 'wrap' div in the text space? That's the right way to do things...

There are a few ways to do this - the best thing to do is just jump in and try something. Add a height to wrap...

1. <div id='wrap' style='height: 700px;'>

And see how this goes...

Ah...so simple!

The wrap was in the text space as suggested but I had been trying to add the rule to the format file instead of in the wrap itself. Works perfectly!

Should have asked about 6 hours ago to save me a lot of grief!

Thank you so much again!

Have just noticed that it behaves differently on a mobile device but I will try playing around now within the wrap itself to see if I can resolve that.

Could I use rules like - margin-bottom: 100%; - there as well?

Margin bottom like that would not work. Yes, this would definitely affect things on mobile...

Honestly, what you are really wanting here would need some more renovation of the format. I think it would be best to place your text absolutely (in #img-container), put a left padding on #img-container (slightly more than the width of your 'wrap' div) and then your images should rest properly. You should be able to do this completely via CSS.

I will give it a shot but am not amazing at editing html/css so any pointers would be appreciated. Should I be editing the function defaultCSS part of the visual index format?

I tried to change the format already by following the advice from arsondpi in this thread indexhibit.org/forum/thread/18150/ but couldn't seem to get it to work.

If you have time I could really do with some advice of what code I should be putting where. Sorry for not being great at this coding malarky - giving it my best shot!!

Remove the height style from your text input...

Add the following to your stylesheet.

1. #img-container
2. {
3. position: relative;
4. padding-left: 26%;
5. }
6. #wrap
7. {
8. position: absolute;
9. z-index: 1;
10. top: 0;
11. left: 0;
12. width: 25%;
13. }

See how it goes...

Hey,

That works a treat but the side effect is that it shifts all the images 26% right when I don't have any text as well like on my homepage.

Is there a way around that?

petehewitt.com/

Ah...you can deal with that but you need to be a bit more custom. On every exhibit where you use text like that you can target it directly...like this...

By utilizing the 'hook' in the body tag for the exhibit...you will need to look this up for each one...

1. #exhibit-6 #img-container { ... }
2. #exhibit-6 #wrap { ... }

And to do a group of them simply like this...

1. #exhibit-6 #img-container,
2. #exhibit-23 #img-container
3. {
4. position: relative;
5. padding-left: 26%;
6. }

Brilliant,

That is exactly what I was after! Thank you so much for your help. I don't know if this is an 'untidy' way to do it but as long as it works I am not bothered.

Much appreciated Vaska,

Pete

It's a perfectly good way to do this without making a fully customized format. We added that 'hook' to the body tag so you can do things like this...