jeffrey morin wrote:
> On 4/3/07, jeffrey morin <[EMAIL PROTECTED]> wrote:
>
>> hi everyone,
>>
>> i am trying the sliding door method for the the first time and i am
>> hitting a snag. the right image keeps going over the left one causing it to
>> not be rounded like i want. you can actually see the left rounded image over
>> the right image but the right one extends past it causing it to look wrong.
>> does anyone know what is wrong here. i have tried changing padding and it
>> still isn't working.
>>
>> any help would be great! i have a lot of basics down but i am still
>> getting used to the css tricks
>> thanks so much!
>>
>> Jeff
>>
>
>
> sorry. here is the link
>
> http://votekenmann.com/test/index.htm
>
>
Jeff,
You are really close. You have your backgrounds reversed and you need
to make some adjustments to the padding.
Change to this:
Remove padding from ul. Use margins to position the ul.
#sitemast li {
background: transparent url(backgrounds/left.gif) no-repeat left top;
float: left;
margin: 0pt;
padding: 0 0 0 16px; /* the left padding should equal the width of your
left background image */
}
/* Set right padding to centre text. Now the left padding = (17px -
16px = 1px). The 16px is the left padding on the li */
#sitemast a {
background: transparent url(backgrounds/right.gif) no-repeat right top;
color: #000000;
display: block;
padding: 5px 17px 5px 1px;
text-decoration: none;
}
The other thing to remember is that the background will be displayed in
the padding but it is not extended into the margins, so you have to use
margins to position the ul, not padding.
...Lori
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
