Re: [css-d] center float:left
AG wrote: > Bill, thanks for your reply. In your suggestion, it appears to me > that if you don't float the li, all links will stack up in the center > of the container. Not so. Inline-block lines up inline - in line, and the whole menu can then be centered within body or whatever element you want it centered in. No need to adjust/modify source-code - it's all CSS. I have used a solution similar to what BB suggests, for years, and apart from that Gecko only recently implemented proper 'inline-block' support - older versions needed a 'display: -moz-inline-box;' workaround, and that old IE/win needed a 'hasLayout' trigger to simulate 'inline-block', the centered line-up is working perfectly across browser-land. See link below. regards Georg -- http://www.gunlaug.no __ css-discuss [cs...@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] center float:left
Now this is interesting! Not only addresses all my conditions, but is a new approach to the list menu construct. Kudos to Matthew James Taylor for coming up with a novel solution, and thank you Jon for bringing this link up. AG. --- On Thu, 4/2/09, Jon Wickström wrote: From: Jon Wickström Subject: Re: [css-d] center float:left To: css-d@lists.css-discuss.org Date: Thursday, April 2, 2009, 7:23 AM > Here's the problem: > - building a horizontal tabbed navigation bar with these conditions: > > 1. equal width of tabs > 2. centered to the width of the body > 3. preserve centering when adding/subtracting tabs > [dynamically generated links/tabs] Sorry to drop in in the middle, but I'm too new on the list to have seen the start of the thread. To me this sounds like a "centered horizontal menu"-problem. See: http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support I use a variation of it in my layout. Regards, Jon Wickström __ css-discuss [cs...@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/ __ css-discuss [cs...@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] center float:left
Now this solution, still stacks-up links one under another in IE6.
--- On Thu, 4/2/09, Bill Brown wrote:
From: Bill Brown
Subject: Re: [css-d] center float:left
To: "AG"
Cc: css-d@lists.css-discuss.org
Date: Thursday, April 2, 2009, 9:37 AM
AG wrote:
> Bill, thanks for your reply. In your suggestion, it appears to me
> that if you don't float the li, all links will stack up in the center
> of the container.
My apologies, I thought that was what you were looking for . ;-)
Maybe something like this is better?
ul,li{list-style:none;margin:0;padding:0;}
ul.tabs {
background:#707070;
margin: 0 auto;
text-align: left;
width: 35em;
}
ul.tabs li {
background:#808080;
display: inline-block;
vertical-align: bottom;
width: 7em;
}
ul.tabs a {
background:#909090;
color: #fff;
display: block;
overflow: hidden;
padding: 2px 5px;
text-align: center;
text-decoration: none;
white-space: nowrap;
}
ul.tabs a:hover {
background:#c0c0c0;
color: #000;
}
Link 1Link 2Link 3Link 4Link 5Link 6
--
__
css-discuss [cs...@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] center float:left
The links are dynamically generated, and probably a scripted solution would be possible. However, I'm trying to find a CSS solution first. Another solution would be to simply enclose the tags inside a div, text-align center and style the to look like tabs. Since these tabs will also have drop down menus [with Suckerfish], I've not experimented with this approach yet. Thanks for your reply Virgil. --- On Thu, 4/2/09, Virgilio Quilario wrote: From: Virgilio Quilario Subject: Re: [css-d] center float:left dynamically generated you mean using javascript? if so, use javascript to center it everytime a tab is added or deleted. specifically, use it to set css left to 50% and margin to negative half of width. Virgil http://www.jampmark.com __ css-discuss [cs...@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] center float:left
AG wrote:
> Bill, thanks for your reply. In your suggestion, it appears to me
> that if you don't float the li, all links will stack up in the center
> of the container.
My apologies, I thought that was what you were looking for . ;-)
Maybe something like this is better?
ul,li{list-style:none;margin:0;padding:0;}
ul.tabs {
background:#707070;
margin: 0 auto;
text-align: left;
width: 35em;
}
ul.tabs li {
background:#808080;
display: inline-block;
vertical-align: bottom;
width: 7em;
}
ul.tabs a {
background:#909090;
color: #fff;
display: block;
overflow: hidden;
padding: 2px 5px;
text-align: center;
text-decoration: none;
white-space: nowrap;
}
ul.tabs a:hover {
background:#c0c0c0;
color: #000;
}
Link 1Link 2Link 3Link 4Link 5Link 6
--
__
css-discuss [cs...@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] center float:left
> Here's the problem: > - building a horizontal tabbed navigation bar with these conditions: > > 1. equal width of tabs > 2. centered to the width of the body > 3. preserve centering when adding/subtracting tabs > [dynamically generated links/tabs] Sorry to drop in in the middle, but I'm too new on the list to have seen the start of the thread. To me this sounds like a "centered horizontal menu"-problem. See: http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support I use a variation of it in my layout. Regards, Jon Wickström __ css-discuss [cs...@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] center float:left
Bill, thanks for your reply. In your suggestion, it appears to me that if you
don't float the li, all links will stack up in the center of the container.
Here's the css and html that I'm using:
#container {
text-align: center;
}
ul#nav {
list-style-type: none;
font-size: 1.2em;
}
ul#nav li {
display: inline;
margin-left: 5px;/* to space the tabs */
float: left;
width: 7em;
}
ul#nav li a:link, ul#nav li a:visited {
text-decoration: none;
display: block;
word-wrap: break-word;/* IE only for that long link name */
padding: 10px;
width: 7em;
}
ul#nav li a:hover {
}
link 1
link 2
link 3
link 4
link 5
link 6
--- On Thu, 4/2/09, Bill Brown wrote:
From: Bill Brown
Subject: Re: [css-d] center float:left
Something like this?
~~~ [CSS]
ul.tabs,ul.tabs li{list-style:none;margin:0;padding:0;}
ul.tabs {
text-align: center;
}
ul.tabs li {
display: inline-block;
vertical-align: bottom;
}
ul.tabs a {
display: block;
overflow: hidden;
padding: 2px 5px;
white-space: nowrap;
width: 100px;
}
~~~ [/CSS]
~~~ [HTML]
HomeAbout UsContact Us is a really long link
~~~ [/HTML]
Hope it helps.
--Bill
--
__
css-discuss [cs...@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] center float:left
Thanks Geoffrey for your reply. The solution you suggest will not work since the container div or ul are of auto widths. If they would be fixed... would be nice and no problem with centering. As I said, adding or eliminating links from the list condition needs a flexible container. --- On Wed, 4/1/09, Geoffrey Hoffman wrote: From: Geoffrey Hoffman Subject: Re: [css-d] center float:left Did you try something like: UL or enclosing DIV ~ display:inline; margin-left:auto; margin-right:auto; text-align:center; LI's ~ display:inline; white-space:no-wrap; A's ~ display:block; width:###px; __ css-discuss [cs...@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] center float:left
AG wrote:
> Here's the problem: - building a horizontal tabbed navigation bar
[snipped]
> Any ideas would be greatly appreciated. Needs to work in IE6 and all
> normal browsers.
Something like this?
~~~ [CSS]
ul.tabs,ul.tabs li{list-style:none;margin:0;padding:0;}
ul.tabs {
text-align: center;
}
ul.tabs li {
display: inline-block;
vertical-align: bottom;
}
ul.tabs a {
display: block;
overflow: hidden;
padding: 2px 5px;
white-space: nowrap;
width: 100px;
}
~~~ [/CSS]
~~~ [HTML]
HomeAbout UsContact Us is a really long link
~~~ [/HTML]
Hope it helps.
--Bill
--
__
css-discuss [cs...@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] center float:left
> Here's the problem: > - building a horizontal tabbed navigation bar with these conditions: > > 1. equal width of tabs > 2. centered to the width of the body > 3. preserve centering when adding/subtracting tabs [dynamically generated > links/tabs] > > All menus based upon the type of lists use a float:left or right > approach. You can center a list if it's enclosed in a div with a fixed width. > However, as mentioned above, this is not a solution to my problem since the > tabs are dynamically generated. > > The tabs can be centered eliminating the float, but, you loose the equal > width condition. > > Any ideas would be greatly appreciated. Needs to work in IE6 and all normal > browsers. dynamically generated you mean using javascript? if so, use javascript to center it everytime a tab is added or deleted. specifically, use it to set css left to 50% and margin to negative half of width. Virgil http://www.jampmark.com __ css-discuss [cs...@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] center float:left
> From: css-d-boun...@lists.css-discuss.org on behalf of AG > Sent: Wed 4/1/2009 4:26 PM > To: css-d@lists.css-discuss.org > Subject: [css-d] center float:left > > Here's the problem: > - building a horizontal tabbed navigation bar with these conditions: > > 1. equal width of tabs > 2. centered to the width of the body > 3. preserve centering when adding/subtracting tabs [dynamically generated > links/tabs] > > All menus based upon the type of lists use a float:left or right > approach. You can center a list if it's enclosed in a div with a fixed width. > However, as mentioned above, this is not a solution to my problem since the > tabs are dynamically generated. > > The tabs can be centered eliminating the float, but, you loose the equal > width condition. > > Any ideas would be greatly appreciated. Needs to work in IE6 and all normal > browsers. Did you try something like: UL or enclosing DIV ~ display:inline; margin-left:auto; margin-right:auto; text-align:center; LI's ~ display:inline; white-space:no-wrap; A's ~ display:block; width:###px; __ css-discuss [cs...@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/
[css-d] center float:left
Here's the problem: - building a horizontal tabbed navigation bar with these conditions: 1. equal width of tabs 2. centered to the width of the body 3. preserve centering when adding/subtracting tabs [dynamically generated links/tabs] All menus based upon the type of lists use a float:left or right approach. You can center a list if it's enclosed in a div with a fixed width. However, as mentioned above, this is not a solution to my problem since the tabs are dynamically generated. The tabs can be centered eliminating the float, but, you loose the equal width condition. Any ideas would be greatly appreciated. Needs to work in IE6 and all normal browsers. __ css-discuss [cs...@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/
