Re: [WSG] Fluid Horizontal Lists
If that's what you want then can't you just move the padding to the a rather
than the li, it won't actiually make the nav bar go all the way across (you can
make it look like it does though), but it will make it get change width when the
windows does.
Jake
Quoting Todd Baker [EMAIL PROTECTED]:
Interesting approach...
I was trying to use padding/margins as I wanted to ensure that XXX
menu itme wasnt as wide as XX if ya know what I mean.
Your solution does work but ive lost the variable widths. Ill have a
play with it.
Yeah the IE min-width thing is a b***ch. Im using the Project 7 script
solution at the moment... Seems to work ok.
Thanks Hugh
On Tue, 5 Oct 2004 15:06:59 +1000, Hugh Todd [EMAIL PROTECTED] wrote:
Todd,
If you turn the 'a's into block elements and float them left, adding no
padding or border, you can give them widths of 20% and have them span
the page.
#nav ul li a
{
padding: .2em 0;
display: block;
float: left;
width: 20%;
}
Of course, this means you lose your dividers. If you add them, you will
have to reduce your width amount to something less than 20%. And,
because min-width doesn't work in IE, your navigation bar will wrap
when window size is reduced too far.
-Hugh Todd
Ive gotta find some solution or ill have to revert back to table cells
:(
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
[WSG] Fluid Horizontal Lists
Hi Guys, I have just joined the list after attending WE04. My name is Todd Baker and I work as a XSLT/XHTML/CSS developer in Sydney. I am doing a big CSS based rebuild for one of our clients and am having some troubles with our fluid layout. I want to use horizontal lists for our primary navigation but the designs requires that the nav items are fluid, i.e. the gap between them grows and contracts with the browser width. I have based the nav on this -- http://css.maxdesign.com.au/listamatic/horizontal16.htm but after playing with % width's and margin's Im still not there. Has anyone solved the same problem else where and has some tips to help me? Thanks in advance. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Fluid Horizontal Lists
just a quick thought that may be completely wrong, but have you tried % based padding for li ? Neerav Bhatt http://www.bhatt.id.au Web Development IT consultancy Mobile: +61 (0)403 8000 27 http://www.bhatt.id.au/blog/ - Ramblings Thoughts http://www.bookcrossing.com/mybookshelf/neerav Todd Baker wrote: Hi Guys, I have just joined the list after attending WE04. My name is Todd Baker and I work as a XSLT/XHTML/CSS developer in Sydney. I am doing a big CSS based rebuild for one of our clients and am having some troubles with our fluid layout. I want to use horizontal lists for our primary navigation but the designs requires that the nav items are fluid, i.e. the gap between them grows and contracts with the browser width. I have based the nav on this -- http://css.maxdesign.com.au/listamatic/horizontal16.htm but after playing with % width's and margin's Im still not there. Has anyone solved the same problem else where and has some tips to help me? Thanks in advance. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Fluid Horizontal Lists
Nup - collapses in IE :o( Richard - Original Message - From: Neerav [EMAIL PROTECTED] To: [EMAIL PROTECTED] Sent: Tuesday, October 05, 2004 2:20 PM Subject: Re: [WSG] Fluid Horizontal Lists just a quick thought that may be completely wrong, but have you tried % based padding for li ? Neerav Bhatt http://www.bhatt.id.au Web Development IT consultancy Mobile: +61 (0)403 8000 27 http://www.bhatt.id.au/blog/ - Ramblings Thoughts http://www.bookcrossing.com/mybookshelf/neerav Todd Baker wrote: Hi Guys, I have just joined the list after attending WE04. My name is Todd Baker and I work as a XSLT/XHTML/CSS developer in Sydney. I am doing a big CSS based rebuild for one of our clients and am having some troubles with our fluid layout. I want to use horizontal lists for our primary navigation but the designs requires that the nav items are fluid, i.e. the gap between them grows and contracts with the browser width. I have based the nav on this -- http://css.maxdesign.com.au/listamatic/horizontal16.htm but after playing with % width's and margin's Im still not there. Has anyone solved the same problem else where and has some tips to help me? Thanks in advance. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Fluid Horizontal Lists
On Tue, 05 Oct 2004 14:20:24 +1000, Neerav [EMAIL PROTECTED] wrote: just a quick thought that may be completely wrong, but have you tried % based padding for li ? Thanks Neerav, Same thing.. I have to use VERY small % (like 1%) or it spreads out HUGE and then it hardly expands at all as the browser grows. Ive gotta find some solution or ill have to revert back to table cells :( ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Fluid Horizontal Lists
Todd,
If you turn the 'a's into block elements and float them left, adding no
padding or border, you can give them widths of 20% and have them span
the page.
#nav ul li a
{
padding: .2em 0;
display: block;
float: left;
width: 20%;
}
Of course, this means you lose your dividers. If you add them, you will
have to reduce your width amount to something less than 20%. And,
because min-width doesn't work in IE, your navigation bar will wrap
when window size is reduced too far.
-Hugh Todd
Ive gotta find some solution or ill have to revert back to table cells
:(
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Fluid Horizontal Lists
I did something like that for a project. From memory I ended up using something
like this (it had three items):
ul {
padding:0;
margin:0;
}
li {
display: inline;
list-style:none;
padding:0;
margin:0;
}
a {
width:33%;
float:left;
display:block;
text-align:center;
}
Jake
Quoting Richard Czeiger [EMAIL PROTECTED]:
Nup - collapses in IE :o(
Richard
- Original Message -
From: Neerav [EMAIL PROTECTED]
To: [EMAIL PROTECTED]
Sent: Tuesday, October 05, 2004 2:20 PM
Subject: Re: [WSG] Fluid Horizontal Lists
just a quick thought that may be completely wrong, but have you tried %
based padding for li ?
Neerav Bhatt
http://www.bhatt.id.au
Web Development IT consultancy
Mobile: +61 (0)403 8000 27
http://www.bhatt.id.au/blog/ - Ramblings Thoughts
http://www.bookcrossing.com/mybookshelf/neerav
Todd Baker wrote:
Hi Guys,
I have just joined the list after attending WE04.
My name is Todd Baker and I work as a XSLT/XHTML/CSS developer in Sydney.
I am doing a big CSS based rebuild for one of our clients and am
having some troubles with our fluid layout.
I want to use horizontal lists for our primary navigation but the
designs requires that the nav items are fluid, i.e. the gap between
them grows and contracts with the browser width.
I have based the nav on this --
http://css.maxdesign.com.au/listamatic/horizontal16.htm but after
playing with % width's and margin's Im still not there.
Has anyone solved the same problem else where and has some tips to help
me?
Thanks in advance.
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Fluid Horizontal Lists
I've found adding dividers in the form of borders are more trouble than they are
worth in liquid horizontal lists. One solution is to put the dividers in as 1px
wide background images rather than left or right borders.
Jake
Quoting Hugh Todd [EMAIL PROTECTED]:
Todd,
If you turn the 'a's into block elements and float them left, adding no
padding or border, you can give them widths of 20% and have them span
the page.
#nav ul li a
{
padding: .2em 0;
display: block;
float: left;
width: 20%;
}
Of course, this means you lose your dividers. If you add them, you will
have to reduce your width amount to something less than 20%. And,
because min-width doesn't work in IE, your navigation bar will wrap
when window size is reduced too far.
-Hugh Todd
Ive gotta find some solution or ill have to revert back to table cells
:(
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Fluid Horizontal Lists
Interesting approach...
I was trying to use padding/margins as I wanted to ensure that XXX
menu itme wasnt as wide as XX if ya know what I mean.
Your solution does work but ive lost the variable widths. Ill have a
play with it.
Yeah the IE min-width thing is a b***ch. Im using the Project 7 script
solution at the moment... Seems to work ok.
Thanks Hugh
On Tue, 5 Oct 2004 15:06:59 +1000, Hugh Todd [EMAIL PROTECTED] wrote:
Todd,
If you turn the 'a's into block elements and float them left, adding no
padding or border, you can give them widths of 20% and have them span
the page.
#nav ul li a
{
padding: .2em 0;
display: block;
float: left;
width: 20%;
}
Of course, this means you lose your dividers. If you add them, you will
have to reduce your width amount to something less than 20%. And,
because min-width doesn't work in IE, your navigation bar will wrap
when window size is reduced too far.
-Hugh Todd
Ive gotta find some solution or ill have to revert back to table cells
:(
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
