Indexhibit Support

Hi all.

I am working on a website at the moment and have managed to successfully install the collapsing menu thanks to the very nice people on this forum. Although, i have now hit a wall, i am trying to have a horizontal menu with the collapsing headers, but i cant seem to get it working.

You can see the site here - Site.

My javascript is here - Java

And my CSS is here - CSS

Any help with sorting out what i am doing wrong would be much appreciated.

Thank you.
James.

P.S, when i say horizontal menu im think of something like on this site - Webpage - but would like the menus to be collapsable.

I looked at your CSS and I'm not sure how you would achieve an horizontal menu without even forcng your list items to be inline... or floating them.

Personally, I would try floating all the list item and add padding around those to keep them spaced out like you want (display inline is also good, but you can't use vertical padding on the elements when doing so...). if needed, adding a div at the bottom with a clear: both to make sure that the menu wraps around the floated list items.

Floats can bring a few problem when used (especialy with IE), so be sure to be aware of the issues concerning its usage. How To Clear Floats Without Structural Markup from Position is everything is a good reference on the problem/solutions to using floats. But there are many many ways to achieve a good result.

Hope that helps.

Antoine,

Thank you very much for your help and the link, its very helpful.
I will look into it further tonight. Again, really appreciate the help.

Antoine.

Thank you for your help previously.
I have two questions to ask, and if you have any answers i would be over the moon.

1. I am using the crabs exhibit format (now named letterpress, so that the people who have access to the back-end know what exhibit format to use - hope this is ok) and was wondering how i make the text as featured on this Webpage into columns? is this possible? ideally i would like the text overflowing onto as many columns as it needs set at 400px high. Have had a play around but no success.

2. My menu is now evenly spaced as i wanted it to be, but when the titles are clicked on, as you can see, there is a huge gap to the right and the menu option to the right of the one you have clicked moves over. Is there any way to stop this happening? again i have tried, but no success.

Any help would be much appreciated, i know your probably busy with your own stuff, so sorry to bug you.

James

James,

1. I'm not 100% sure of what you are trying to achieve... Do you mean that each question/answer pair will sit in its own column and each column will be side by side in and horizontal fashion (a la crabs, but with only text?)

PS: Of course, you can rename crabs to your liking. But be aware that there a "long-sandy-beach" div in the template ;) maybe you should transform it into a "long-typesetting-table" or something to keep the template in the "mood".

2. Your #menu ul li.section-title (style.css line 70) has an auto width set to it. so it will resize based on what's in it... when the content shows up, it is set to 150px. (#menu ul li (style.css line 82) ) so the menu resizes to the content (which is larger now...) You can either set the auto style to a fixed width or remove the fixed width from list items (line 82)... You might also need to trim your titles to avoid the content to overflow and push the menu on its right. I would also suggest using right side margin/paddings instead of using it to the left (this might not change anything, but I have a feeling this would be better, somehow...). Trying a mixture of these will hopefully give the desired result.

Keep us updated on your progress. Good luck!

Antoine,

Thank you for such a speedy reply, again!

With regards to question 2 i understand fully now, but have decided i rather like the way the menu is working now i have sorted the styling out, but your answer was extremely helpful for me to realise where i am going wrong. I will also add the margin/padding to the right and not the left.

Number 1, is exactly how you described; "each question/answer pair will sit in its own column and each column will be side by side in and horizontal fashion (a la crabs, but with only text?)".

The site will use images and text, but some pages only text, such as the FAQ page, i love the way the images sit on the page, side by side, i am trying to make the text do the same, but in a set 'box' dimension, for example 400x300px. Is this possible and easily done? im ok with CSS, but have no idea about php and js.

Again, thank you for so much help.

James

James,

This is a bit of a "manual" solution, but I think this would be enough for your needs and would not require any PHP ;)

I would wrap (in the textarea in indexhibit's editor) each "block" of text inside a span or div with a custom class:

1. < span class="read-me-like-a-book">
2. My question:  The Answer to Life, the Universe, and Everything
3. The answer: 42 
4. < /span>
5. < span class="read-me-like-a-book">
6. My question:  How can you be so clever all the time.
7. Answer: --
8. < /span>

Then you just add a nifty read-me-like-a-book class to your style:

1. .read-me-like-a-book{ float: left; display: block; width: 400px; padding-right: 10px; }

This is all untested code, but I think that you can grasp the basic concept.
Let me know when you get it working, I'd like to have a peek.

PS: Do not forget to put a proper link to indexhibit even if it's a test site...

Hi Antoine.

Again thank you for the reply, and great help. Really appreciate it all.

I didnt realise my link to indexhibit wasnt working. It is now, on the about this site page.

I have used the code you mentioned above, but not with a span, but with a div class. All works well and the type moves into columns. (i did have to change it from display: block; - to - display: inline; for it to work)

Only problem i am now having is all the type is falling below one another (thats harder to explain than i thought - see here)

I am using the crabs exhibition style throughout the site, and would like all the images and blocks of text arranged side by side, left to right across the page. This works fine for the images, but now we have managed to seperate the text like so it is not working for the text.

Is there a way to fix this?
Again, any help would be greatly appreciated.

Just incase you need to see these...
CSS
Specific webpage in question

James

My first guess is that the page doesn't provide a large enough "container" to let all of your content float properly so it just falls down bellow when all the space is used.

I didn't look at the code yet, but if you want to tackle it a bit, you probably have to write a modified version of crabs and make it "count" how many divs you have and make the plugin adjust the width of the container using a fixed width for one column times the number of columns... That's the logic behind crabs with picture, should work for text columns.

Let me know how it goes, I'll try to help you get it right, but have no time to work this for now.

I love this horizontal menu system but I would not know where to start with something like that! is there any tutorials or guidance around for using something like this?

I'm back looking to use this for a site of mine and really want to get to grips with it, is there any pointers of guidance for building this??