2009/2/21 Gunlaug Sørtun <[email protected]>
- Hide quoted text -
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
Thanks so much it looks like that fixed it pretty well! The height
dimension to #area was just so I could visualize a content area coming
down before I coded it.
Also thanks Philippe I added those additional fixes you mentioned!
I think next I want to try and incorporate the background images as
part of the link, is there a way I could do that easily? I just
started playing around with it and will work on it some more tomorrow.
Thank you so much guys!
Eric
______________________________________________________________________
css-discuss [[email protected]]
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/
