Graphics Programs Reference
In-Depth Information
Figure 5-37: The two halves of the tab.
Whether you use GIF89a or alpha-channel PNG for this is up to you and your site's audience.
I used PNGs, since they create smoother transparency edges.
Now, if you just drop those into place with the same markup and CSS from the preceding
technique, you'd end up with the screen shown in Figure 5-38.
Figure 5-38: The result of dropping the images onto the preceding technique's markup.
Well, you're halfway there. h ings are i ne on the right side of each tab, but on the let , the
background image of the
li
element is visible through the transparent parts of the
a
ele-
ment's background, including the top-let corner!
186
Working around this requires a bit of trickery. First, pull the
a
element let ward out of the
li
,
which you can do a couple of ways. Perhaps the simplest is to relatively position them to the
let (see Figure 5-39), and make sure there's enough space for them to land.
ul.nav
,
ul.nav
li
{
float
:
left
;
margin
:
0
;
padding
:
0
;
list-style
:
none
;}
ul.nav
{
width
:
100%
;}
ul.nav
li
{
background
:
url(tab-clip-right.gif)
no-repeat
100%
0
;
margin-right
:
25px
;}
ul.nav
li
a
{
background
:
url(tab-clip-left.gif)
no-repeat
;
display
:
block
;
padding
:
10px
0
5px
25px
;
position
:
relative
;
left
:
-25px
;}
Figure 5-39: Making the clipped tabs line up.
See what I did there? Each
a
element is moved let ward by 15 pixels. h at alone isn't enough,
because it would mean that the second through last links would overlap the list item that
came before them. Giving those list items
15px
of right margin opens up just enough space
for the
a
elements to land with no overlap or gaps.
Search WWH ::
Custom Search