Sent by Gunlaug_Sørtun on 21 February 2009 21:09
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 [EMAIL-REMOVED]]
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/
