Hello. Hope someone can help me.
I am starting work on overhauling a current site to make it conform to W3C guidelines and WAI. I have a horizontal menu bar that runs across the top of the screen and is contained within a table that spans 100% of the screen size. This keeps the menu neatly ordered and fills the screen quite nicely.
I am aware of the drawbacks of tables for layout so I am trying to do this as a list. I can sort of do it - but can I have a list fill 100% of the available horizontal space?
Does this make sense?Do you actually want the menu items to span the screen (stretching accordingly), or just the background (bar) of the menu?Hi, WoD - thanks for the quick reply. Currently the table spans the screen so I guess I would like the horizontal list to do the same.Does that mean you want the width of each menu item to be a function of the screen width and the number of menu items?
IE: If you had 3 menu items, would you want each one to be a third of the screen width?
Unfortunately, setting the width of a list will not stretch the individual list items like it would with cells in a table. However you can make the list as wide as the page and incorporate some fancy graphics as a bar ala: <!-- m --><a class="postlink" href="http://www.gamingheadlines.co.uk">http://www.gamingheadlines.co.uk</a><!-- m --> which uses a list, fixes the width of items, and centers the whole lot.
Otherwise, you would simply have to set each menu item to the correct width as a percentage, 10% with 10 menu items, 20% with 5, 33.3r% with 3, and so on.This works for a four item menu, no ul style required.
li {
width: 24%;
float: left;
border: 1px solid #ddd;
text-align: center;
}Thanks Ray - this works fine, except when the browser is made smaller the list elements can overlap each other - how do I keep them separate?they should never overlap- if the browser got too small, the last one should wrap to the next line.You can give the containing ul a width.
ul#menu {
width: 700px;
}
ul#menu li {
width: 24%;
float: left;
border: 1px solid #ddd;
text-align: center;
}
Then code it with <ul id="menu">...
I am starting work on overhauling a current site to make it conform to W3C guidelines and WAI. I have a horizontal menu bar that runs across the top of the screen and is contained within a table that spans 100% of the screen size. This keeps the menu neatly ordered and fills the screen quite nicely.
I am aware of the drawbacks of tables for layout so I am trying to do this as a list. I can sort of do it - but can I have a list fill 100% of the available horizontal space?
Does this make sense?Do you actually want the menu items to span the screen (stretching accordingly), or just the background (bar) of the menu?Hi, WoD - thanks for the quick reply. Currently the table spans the screen so I guess I would like the horizontal list to do the same.Does that mean you want the width of each menu item to be a function of the screen width and the number of menu items?
IE: If you had 3 menu items, would you want each one to be a third of the screen width?
Unfortunately, setting the width of a list will not stretch the individual list items like it would with cells in a table. However you can make the list as wide as the page and incorporate some fancy graphics as a bar ala: <!-- m --><a class="postlink" href="http://www.gamingheadlines.co.uk">http://www.gamingheadlines.co.uk</a><!-- m --> which uses a list, fixes the width of items, and centers the whole lot.
Otherwise, you would simply have to set each menu item to the correct width as a percentage, 10% with 10 menu items, 20% with 5, 33.3r% with 3, and so on.This works for a four item menu, no ul style required.
li {
width: 24%;
float: left;
border: 1px solid #ddd;
text-align: center;
}Thanks Ray - this works fine, except when the browser is made smaller the list elements can overlap each other - how do I keep them separate?they should never overlap- if the browser got too small, the last one should wrap to the next line.You can give the containing ul a width.
ul#menu {
width: 700px;
}
ul#menu li {
width: 24%;
float: left;
border: 1px solid #ddd;
text-align: center;
}
Then code it with <ul id="menu">...