Large images displaying below mini-toc in top navigation

[rogersm]

Hi there,

This is probably a very basic question. We are using the top-navigation HTML5 output for our documentation. If I have a large image on certain topics, it gets pushed below the mini-toc (see attached), which creates a large space between the topic text and the image. Is there any way to avoid this occurring using css? I tried setting the max-width of images to 100% but that did not have an impact.

thanks for any help,
mark

[NorthEast]

What do you actually want to happen?

Setting max-width: 100% will mean the image can be no wider than 100% of the width of its parent tag.
So if you resize the browser window to make it smaller, the image width should also be scaled down too so that it's always visible.

As you're (presumably) floating the mini TOC, then the available space in that area is not 100%; it's 100% minus the width of the mini TOC.

So to get this working, you might:
* Limit the size of the image to less than 100%, so that it will always fit with a mini TOC (whether it's there or not).
* Put the image, and any other content that can be on the left of the mini TOC, into its own container tag (like a div); which will mean that the 100% image width is based on the size of that container.

[rogersm]

Hi Dave,

Thanks for that. I will try your Div container suggestion. What I wanted to happen was for the image to automatically resize to fit with a mini toc rather than being pushed below the mini toc.

thanks,
mark

[ChoccieMuffin]

OOO, interesting question, I had a similar problem where we were using a relationship table thingy there (which we resolved by doing away with the box completely!)

@Dave, not sure that approach would work as when you get to the end of the mini-toc, the text won't wrap around the mini-toc's box. I never did work out how to deal with it, and fudged the issue by making sure my blue box wasn't too long, and padding the page out with a bit of introductory text so the graphic wasn't right at the top of the topic. Very Heath Robinson and not always perfect, so I'm glad I don't have to do that any more!

[NorthEast]

OOO, interesting question, I had a similar problem where we were using a relationship table thingy there (which we resolved by doing away with the box completely!)

@Dave, not sure that approach would work as when you get to the end of the mini-toc, the text won't wrap around the mini-toc's box. I never did work out how to deal with it, and fudged the issue by making sure my blue box wasn't too long, and padding the page out with a bit of introductory text so the graphic wasn't right at the top of the topic. Very Heath Robinson and not always perfect, so I'm glad I don't have to do that any more!

You mean the second suggestion? It will work in the sense that you won't get a large gap, but the content in that container won't flow and wrap around the mini-TOC.
The first suggestion wouldn't affect the flow/wrap around the mini TOC.

Anyway, I'm not aware of a quick way around this, without dipping into more complex CSS (or possibly scripting).
In more recent projects (which are HTML5 only), I've stopped using floated elements, and instead use Foundation's grid (which is included if you use top nav).

[ChoccieMuffin]

You mean the second suggestion? It will work in the sense that you won't get a large gap, but the content in that container won't flow and wrap around the mini-TOC.
The first suggestion wouldn't affect the flow/wrap around the mini TOC.

Anyway, I'm not aware of a quick way around this, without dipping into more complex CSS (or possibly scripting).
In more recent projects (which are HTML5 only), I've stopped using floated elements, and instead use Foundation's grid (which is included if you use top nav).

Yes, I meant your second suggestion. I'm not yet using top nav, or even HTML5, so I'll just delight in the fact that I don't have to worry about this one any more. Was interested to see if you had an elegant solution, but I reckon any elegance was removed with the addition of a floating element.