Re: [css-d] Centering the nav: EASY one.
On Thursday, July 14, 2011, 11:20:18 PM, Ghodmode wrote: Since its (default) display is block, it takes up the full width of the containing element. margin: 0 auto would center it, if it was smaller than the nav that contains it. To make it the same size as its contents, either add up the widths of the elements it contains (560px) and set a fixed width, or set its display value to inline-block. --- A quick point here is that IE doesn't respect display:inline-block for elements that are display:block by default. You may remember I had a similar issue with divs last week and ended up having to use spans instead. HTH, -- Geoff __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering the nav: EASY one.
On 7/17/2011 12:22 PM, Geoff Lane wrote: On Thursday, July 14, 2011, 11:20:18 PM, Ghodmode wrote: Since its (default) display is block, it takes up the full width of the containing element. This might be helpful: http://www.projectseven.com/csslab/lists/inline-block/horizontal/ -- Al Sparber - PVII http://www.projectseven.com The Finest Dreamweaver Menus | Galleries | Widgets Since 1998 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering the nav: EASY one.
On 7/17/11 9:52 AM, Al Sparber wrote: On 7/17/2011 12:22 PM, Geoff Lane wrote: On Thursday, July 14, 2011, 11:20:18 PM, Ghodmode wrote: Since its (default) display is block, it takes up the full width of the containing element. This might be helpful: http://www.projectseven.com/csslab/lists/inline-block/horizontal/ Interesting, Al. I make the list items inline, and put inline-block on the links. No IE hack needed, and IE 7- behave similarly to other browsers (including the word-spacing between links). FWIW. :) -- Cordially, David __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering the nav: EASY one.
On 7/17/2011 11:35 PM, David Hucklesby wrote: On 7/17/11 9:52 AM, Al Sparber wrote: On 7/17/2011 12:22 PM, Geoff Lane wrote: On Thursday, July 14, 2011, 11:20:18 PM, Ghodmode wrote: Since its (default) display is block, it takes up the full width of the containing element. This might be helpful: http://www.projectseven.com/csslab/lists/inline-block/horizontal/ Interesting, Al. I make the list items inline, and put inline-block on the links. No IE hack needed, and IE 7- behave similarly to other browsers (including the word-spacing between links). FWIW. :) Hi David, Most appreciated, but I test in a native version of IE7 and it most certainly does not handle inline-block. Of course, I could be wrong, but it's also one of those CSS issues that's been embedded in my brain - which has been known to have a bad day :-) Peter Paul seems to come to same conclusion as me. http://www.quirksmode.org/css/display.html In any event, targeting IE7 and under for the hack should not be a problem. -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/hgm The Ultimate Web 2.0 Carousel __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering the nav: EASY one.
On 7/18/2011 12:11 AM, Al Sparber wrote: On 7/17/2011 11:35 PM, David Hucklesby wrote: On 7/17/11 9:52 AM, Al Sparber wrote: On 7/17/2011 12:22 PM, Geoff Lane wrote: On Thursday, July 14, 2011, 11:20:18 PM, Ghodmode wrote: Since its (default) display is block, it takes up the full width of the containing element. This might be helpful: http://www.projectseven.com/csslab/lists/inline-block/horizontal/ Interesting, Al. I make the list items inline, and put inline-block on the links. No IE hack needed, and IE 7- behave similarly to other browsers (including the word-spacing between links). FWIW. :) Hi David, Most appreciated, but I test in a native version of IE7 and it most certainly does not handle inline-block. Of course, I could be wrong, but it's also one of those CSS issues that's been embedded in my brain - which has been known to have a bad day :-) ... like today :-) Of course your method works in IE7 without hack, though I'd have to check to see how older versions do. Sorry for confusing your statement. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering the nav: EASY one.
On Jul 18, 2011, at 1:16 PM, Al Sparber wrote: I make the list items inline, and put inline-block on the links. No IE hack needed, and IE 7- behave similarly to other browsers (including the word-spacing between links). FWIW. :) Hi David, Most appreciated, but I test in a native version of IE7 and it most certainly does not handle inline-block. Of course, I could be wrong, but it's also one of those CSS issues that's been embedded in my brain - which has been known to have a bad day :-) ... like today :-) Of course your method works in IE7 without hack, though I'd have to check to see how older versions do. Sorry for confusing your statement. IE 7 and 6 support display:inline-block for those elements whose initial display value is inline - like a (the MS doc used to say something along the lines of 'natural display' whatever that would mean). On other elements display:inline-block triggers 'hasLayout' but nothing else, and certainly not what display:inline-block should do per the spec. Fwiw, last time I did something along he lines of your sample, I had to trigger 'hasLayout' on the parent li else IE 7 6 wouldn't play nice. Philippe -- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering the nav: EASY one.
On 7/18/2011 12:34 AM, Philippe Wittenbergh wrote: IE 7 and 6 support display:inline-block for those elements whose initial display value is inline - likea (the MS doc used to say something along the lines of 'natural display' whatever that would mean). On other elements display:inline-block triggers 'hasLayout' but nothing else, and certainly not what display:inline-block should do per the spec. Fwiw, last time I did something along he lines of your sample, I had to trigger 'hasLayout' on the parentli else IE 7 6 wouldn't play nice. Hi Philippe, I tested my example down to IE5. Seems to work fine as is. David's method would likely have whitespace issues in all browsers. The combo of inline-block and 0 font-size on the same element, solves that. -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/hgm The Ultimate Web 2.0 Carousel __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering the nav: EASY one. ?
It looks centered in Mozilla Firefox version 5 and IE8. See this picture: http://content.screencast.com/users/JT19560819/folders/Jing/media/65697f4c-dd5d-4fef-b81b-9edfe84681f4/2011-07-17_0137.png I also tested in compatibility mode and it looks the same as in previous two browsers. hth --- On Sat, 16/7/11, Steve Caramia st...@caramiadesign.com wrote: This one's reeeally easy, but ALWAYS hangs me up. This time I'll tape the answer to my forehead so I don't forget! Why doesn't margin: 0 auto center the nav bar here? text align: center doesn't work either. http://www.theeyecam.com/eyecam2/index.htm the css: http://theeyecam.com/eyecam2/SpryAssets/SpryMenuBarHorizontal.css __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering the nav: EASY one.
Hi, On Thu, Jul 14, 2011 at 2:34 PM, Steve Caramia st...@caramiadesign.com wrote: This one's reeeally easy, but ALWAYS hangs me up. This time I'll tape the answer to my forehead so I don't forget! I think it is because your ul.MenuBarHorizontal is set to 960px wide... If you add up your list items (140x4=560) and set your ul width to 560px, it should work. :) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering the nav: EASY one.
On 7/14/11 5:34 PM, Steve Caramia wrote:
Why doesn't margin: 0 auto center the nav bar here?
http://www.theeyecam.com/eyecam2/index.htm
Steve
Try...
ul.MenuBarHorizontal li {
float: left; delete;/*- delete--*/
display: inline-block;/*--- add--*/
}
--
http://chelseacreekstudio.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering the nav: EASY one.
On Fri, Jul 15, 2011 at 5:34 AM, Steve Caramia st...@caramiadesign.com wrote: This one's reeeally easy, but ALWAYS hangs me up. This time I'll tape the answer to my forehead so I don't forget! Why doesn't margin: 0 auto center the nav bar here? text align: center doesn't work either. http://www.theeyecam.com/eyecam2/index.htm the css: http://theeyecam.com/eyecam2/SpryAssets/SpryMenuBarHorizontal.css Since its (default) display is block, it takes up the full width of the containing element. margin: 0 auto would center it, if it was smaller than the nav that contains it. To make it the same size as its contents, either add up the widths of the elements it contains (560px) and set a fixed width, or set its display value to inline-block. In other words, both Micky Hulse and David Laakso were right, but they told you how to fix it. I wanted to answer you question about why it wasn't centered. -- Ghodmode http://www.ghodmode.com/blog __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
