p;li:hover div {
background-position:-156px 100%;
}
The x coordinate is set to -156px. This way the pink orange part of the background image will be shown. The first style represents the top part of the tabbed box and the 2nd one the bottom part. Remember I had to add an extra div to make sure the box can grow (till a certain enlargement).
The page uses a dynamic resolution dependent layout
Not sure if you’ve noticed or not, but if you resize your browser window to less then 750 pixels wide, the page will adjust its layout. This is done using a javascript created by Kevin Hale of Particle Tree in combination with CSS. I’m using an extra CSS stylesheet that is applied if the browser window is resized to less then 750 pixels. By default the page/site uses the wider version, which is aimed to a screen resolution of 1024 x 768. About 90% of the visitors of the Prudential Kansas City visitors are using a screen resolution of at least 1024 x 768 pixels.
Hopefully some of you have learned from this article and are inspired to use CSS&
|
