SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Faux Column - Just Checking My Understanding

    Buon giorno from 11 degrees C no Sun Wetherby UK...

    Working on this tutorial http://www.maxdesign.com.au/articles...uts/two-fixed/ I'm wanting to make sure i understand what this bit of code does:

    #layout-two-fixed #content-container{

    background: url("layout-two-fixed-background.gif") repeat-y scroll 100% 0 #FFFFFF;
    float: left;
    width: 900px;
    }

    I get this is the bit of code that adds the grey repearting gif befind the right hand side column but what i dont get is this bit 100% O - is this like x y co-ordinates or something.

    Thanks in advance,
    David
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2012
    Location
    Scarborough, North Yorkshire, United Kingdom
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi David

    I believe so, the 100% is the x co-ordinate. If you have Firefox install Firebug and you can play in browser.
    Richard
    Resell SSL Certificates - API / WHMCS / HostBill / ClientExec
    ServerTastic - RapidSSL, Geotrust, Thawte, Symantec, SmarterTools and more

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    It'd probably be easier to understand if the image was an irregular shape.
    As previously mention the first # refers to the X coordinate. Admittedly it's a little baffling, but when you use a bg position of 100% Y(Y can be any #, since we are repeating the bg vertically), the bg image's RIGHT edge is aligned to the right edge of the element. Conversely a position of 0 Y will align the LEFT edge of the image with the left edge of the element, and 50% Y aligns the CENTER of the image to the CENTER of the element.

    Demystifying practice, what is happening here is that you are placing a vertically repeating bg image at the right most edge of your container and as such creating the visual the illusion of a 'column' on the right side.

  4. #4
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Brill tanks, another 24 caret gold answer from sitepoint :-)
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  5. #5
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Have you tried deleting the 100% 0 to see what happens?

    I strongly suspect the code is actually giving the standard default values which you normally don't need to state.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •