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]
style type='text/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;
}
/style
!--[if lt IE 7]style type='text/css'
ul.tabs li {display: inline;}
/style![endif]--
~~~ [/CSS]
~~~ [HTML]
ul class='tabs'
lia href='/'Home/a/li
lia href='/'About Us/a/li
lia href='/'Contact Us is a really long link/a/li
/ul
~~~ [/HTML]
Hope it helps.
--Bill
--
!--
! Bill Brown macnim...@gmail.com
! Web Developologist, WebDevelopedia.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
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 geo...@globalmediaminds.com wrote: From: Geoffrey Hoffman geo...@globalmediaminds.com 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
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 {
}
div id=container
ul id=nav
lia href=#link 1/a/li
lia href=#link 2/a/li
lia href=#link 3/a/li
lia href=#link 4/a/li
lia href=#link 5/a/li
lia href=#link 6/a/li
/ul
/div
--- On Thu, 4/2/09, Bill Brown macnim...@gmail.com wrote:
From: Bill Brown macnim...@gmail.com
Subject: Re: [css-d] center float:left
Something like this?
~~~ [CSS]
style type='text/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;
}
/style
!--[if lt IE 7]style type='text/css'
ul.tabs li {display: inline;}
/style![endif]--
~~~ [/CSS]
~~~ [HTML]
ul class='tabs'
lia href='/'Home/a/li
lia href='/'About Us/a/li
lia href='/'Contact Us is a really long link/a/li
/ul
~~~ [/HTML]
Hope it helps.
--Bill
--
!--
! Bill Brown macnim...@gmail.com
! Web Developologist, WebDevelopedia.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
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
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?
style type='text/css'
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;
}
/style
!--[if lt IE 7]style type='text/css'
ul.tabs li {display: inline;}
/style![endif]--
ul class='tabs'
lia href='/'Link 1/a/li
lia href='/'Link 2/a/li
lia href='/'Link 3/a/li
lia href='/'Link 4/a/li
lia href='/'Link 5/a/li
lia href='/'Link 6/a/li
/ul
--
!--
! Bill Brown macnim...@gmail.com
! Web Developologist, WebDevelopedia.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
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 a tags inside a div, text-align center and style the a 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 virgilio.quila...@gmail.com wrote: From: Virgilio Quilario virgilio.quila...@gmail.com 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
Now this solution, still stacks-up links one under another in IE6.
--- On Thu, 4/2/09, Bill Brown macnim...@gmail.com wrote:
From: Bill Brown macnim...@gmail.com
Subject: Re: [css-d] center float:left
To: AG rovis...@yahoo.com
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?
style type='text/css'
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;
}
/style
!--[if lt IE 7]style type='text/css'
ul.tabs li {display: inline;}
/style![endif]--
ul class='tabs'
lia href='/'Link 1/a/li
lia href='/'Link 2/a/li
lia href='/'Link 3/a/li
lia href='/'Link 4/a/li
lia href='/'Link 5/a/li
lia href='/'Link 6/a/li
/ul
-- !--
! Bill Brown macnim...@gmail.com
! Web Developologist, WebDevelopedia.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
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 jon.wickst...@arrak.fi wrote: From: Jon Wickström jon.wickst...@arrak.fi 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
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/
[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 ul 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/
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 ul 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/
