Need help to explain this CSS part

Discussion in 'CSS' started by askscript, Sep 1, 2008.

0
  1. #1
    Hi,

    I am a beginner learning css now. I am seeking help for anyone ( knows css or css expert) to explain this part to me.

    http://www.alistapart.com/articles/slidingdoors

    The part on "Finishing Touches". It says to make image transparent and change the image link with each other. :confused: My head is spinning now.
     
    askscript, Sep 1, 2008 IP
  2. krt

    krt Well-Known Member

    Messages:
    829
    Likes Received:
    38
    Best Answers:
    0
    Trophy Points:
    120
    #2
    I don't understand where your confusion is, perhaps you could point to the paragraph that is the problem. The only changing to image links is using the images with transparency added and use that as a "background" for the tabs.
     
    krt, Sep 1, 2008 IP
  3. askscript

    askscript Member

    Messages:
    59
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #3
    I do not understand why it has to be transparent. Does he mean that i need to change the original image to transparent, all the 4 images? I thought the image background is already transparent.

    And the link that is changed. All ( the 4 links), That is left, Norm and On, is change to right and right is change to left. i could not make any sense why it has to interchange the image links.

    The article:


    This part talks about the transparent of the image:
    << Finishing Touches

    Keen eyes may have noticed white tab corners showing up in the previous example. These opaque corners are currently preventing the image in the back from showing through the left corner of the image in front. In theory, we could attempt to match the corners of the tab images with a portion of the background behind them. But our tabs can grow in height, which pushes the background behind them lower, shifting the background color we tried to match. Instead, we change the images, making the corners of our tabs transparent. If the curves are anti-aliased, we matte the edges to an average of the background color behind them.>>


    This is the part where the right change to left and left change to right ( referring to the image):

    << However, we can’t leave it at that either, because our left-side image now gets pushed away from the left tab edge by the 9 pixels of padding we just added. Now that the inner edges of the left and right visible doorways butt up against each other, we no longer need to keep the left image in the front. So we can switch the order of the two background images, applying them to opposite elements. We also need to swap the images used for the current tab:

    #header li {
    float:left;
    background:url("left.gif")
    no-repeat left top;
    margin:0;
    padding:0 0 0 9px;
    }
    #header a, #header strong, #header span {
    display:block;
    background:url("right.gif")
    no-repeat right top;
    padding:5px 15px 4px 6px;
    }
    #header #current {
    background-image:url("left_on.gif");
    }
    #header #current a {
    background-image:url("right_on.gif");
    padding-bottom:5px;
    }
    >>
     
    askscript, Sep 2, 2008 IP