Eric Katz wrote: > http://www.team-identity.org/akathletics/newcode/
> This is a picture of what the list im trying to make is supposed to > look like: > http://www.akathletics.com/images/intialsetcopy/akathleticsNewSitev8.jpg > 1: keep all 8 list-items in one ul - <ul id="navbuttons"> - in the source-code. 2: apply 'display: inline-block' (and centering), followed by the necessary fixes for IE7 and older. This will do... #navbuttons { width:770px; margin:0 auto; list-style:none; text-align: center; } #navbuttons li { display:inline-block; width:220px; height:180px; padding:0; margin:0 10px; background : url(../images/contentnavbuttons.jpg) no-repeat; } /* IE6 fix */ * html #navbuttons li {display: inline;} /* IE7 fix */ *+html #navbuttons li {display: inline;} 3: sprinkle in background positions, using the class on the individual list-items - like you have started. However, strengthen selector-specificity like the following... #navbuttons li.gym-mats { background-position:0px -200px; } ...to override the general #navbuttons li position. You can then also fine-tune side-margins for the individual list-item to get it all lined up just as in your example-image. 4: delete 'height' on #area so that container can expand freely and push the footer down. 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/
