Yasir Assam wrote:
> Hello,
>
> I'm trying to create a horizontal menu where each menu item is an image
> with a centred caption below it. I'd like the whole menu to be centred
> within its containing element (which itself is an absolutely position
> element).
>
> Here's the test page:
> http://endlessvoid.com/test_css/test2.html
>
> I can't seem to centre the menu without explicitly setting a width
> (which I'd rather not do).
>
> Here's what it looks like when it's centred:
> http://endlessvoid.com/test_css/test1.html
>
> I've drawn borders around some of the divs to help me see what I'm doing.
>
> If anyone can help me do this without explicitly setting the menu width
> I'd be very grateful. I have total control over the generated HTML so I
> can change it if needs be.
>
> This needs to work across all the major browsers.
>
Without a width, display:block will take all the space available.
You'll need a shrink-to-fit/shrink-wrap behavior for the wrapper.
This can be achieved by display:table and display:inline-block (float
would shrink, but not center).
Unfortunately, the 'major browsers' do not support them adequately, so a
bit of hacking is needed: the IE-family needs inline-block, others need
a css table.
#menu_container {display:table;}
#menu_row{display:table-row;}
Note this new element #menu_row, Gecko needs it because of timing issues
(a child coming too late would be placed in a new anonymous row), so we
explicitely declare a table-row.
<div id="menu_container">
<div id="menu_row">
<div class="menupic">
...
Hacking is done via a conditional comment for IE/Win in the end of the
head section.
<!--[if IE]>
<style>
#bottom{
/* centers the inline-block #menu_container */
text-align: center;
/* must not 'inherit' the width in IE6, overwrites your code */
width: 100%;
}
#menu_container {
/* applies haslayout to an inline level element: results in inline-block
behavior */
display:inline;
zoom: 1;
}
</style>
<![endif]-->
IE-Mac may have its own solution, but my ambitions are low these days,
see [1] and following for ideas.
Ingo
[1] http://www.brunildo.org/test/shrink_img2.html
--
http://www.satzansatz.de/css.html
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
