SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict peterb's Avatar
    Join Date
    Jun 2003
    Location
    Athens, Greece
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css and graphic standards

    Hello all,

    Well having to do some css and learning it on my own, I would like to ask some questions.

    With regards to the faux method of columns using %, does anyone have a mathematical formula?

    I have read Gillenwater - Creating Liquid Faux Columns on the net but I am still a bit unsure.


    I have the css anthology book but regarding these background properties, I can't find any info on how these work.

    Code:
    background:url(../images/box4_top.gif) no-repeat 0 0
    Are the zeroes x,y points or pixel measurements? What if any are defaults?

    Code:
    background: #C3E5FC url(../images/info32.png) no-repeat 0 50%
    In this case, what is the use of the zero and the 50% ?

    Code:
     background: #C3E5FC url(../images/info32.png) no-repeat top left
    Why does this example refer to top and left instead of px or % ?

    What is the best standard to use for these?

    Finally, with regards to graphics, I am experimenting with a small block the size of 10w x 28h, but have seen that others use different sized blocks for either rows or column coloring. Is there a standard size that is best to use?

    Peter

  2. #2
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I dont use percentages in background images. I do know the bottom code just tells the browser that the background image should align in the top left hand corner without repeating the image. it will set itself to 0px margin.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The ultimate reference section on the background-position contains most of the answers to your questions (I should know as I wrote this section ).

    Are the zeroes x,y points or pixel measurements? What if any are defaults?
    The zeros are the starting point for the background position and refers to the top left of the element. As the number is zero then it doesn't matter a jot what unit its is (e.g. px,% etc) as zero is always zero no matter what the unit.

    You can specify a dimension and the image will be placed along that axis with the dimension you specify.

    e.g. background-position:100px 100px;

    The background image will be placed at 100px form the top of the element and then 100px from the left of the element. What happens after that depends on what is specified for the background-repeat property. If background-repeat:no-repeat is specified then the image is simply placed at that position, but if a repeat is specified then the image is tiled from that position along the axis that has been requested but in both directions along that axis.

    In this case, what is the use of the zero and the 50% ?
    The first dimensions specified the horizontal position and the second supplies the vertical position.

    The zero places the image at the top left of the element and the 50% places the image at 50% from the top. In fact it actually places the point in the image that is 50% at the 50% vertical position in the element it is contained in resulting in the image being perfectly centred vertically.

    This is not the same as absolute positioning where the top of an element is placed at the 50% position. The percentage part of the image is placed at the corresponding percentage part of the element.

    Why does this example refer to top and left instead of px or % ?
    As usual with CSS there are number of more intuitive keywords that you can use and they equate to the positions in the following way.

    Quote Originally Posted by ultimate reference
    background-position: left top; /* same as 0% 0% */
    background-position: left center; /* same as 0% 50% */
    background-position: left bottom; /* same as 0% 100% */

    background-position: right top; /* same as 100% 0% */
    background-position: right center; /* same as 100% 50% */
    background-position: right bottom; /* same as 100% 100% */

    background-position: center top; /* same as 50% 0% */
    background-position: center center; /* same as 50% 50% */
    background-position: center bottom; /* same as 50% 100% *
    Finally, with regards to graphics, I am experimenting with a small block the size of 10w x 28h, but have seen that others use different sized blocks for either rows or column coloring. Is there a standard size that is best to use?
    If you are repeating graphics then you have to take a number of things into consideration so there is never a right answer. The first thing is how heavy the image size is as you don't want to make the image too big in terms of files size. However you have to weigh this up against the time taken to draw the page when small graphics are used.

    A number of designers use 1px x 1px graphics to tile their page in an effort to keep the fils size small and for the page to load quicker. However, unwittingly they have done just the opposite and the brwsers will struggle to redraw that 1px x 1px image millions of times and you will see the screen being drawn as you watch. Increasing the image size to something like 10px x x10px would result in the page being drawn a 100 times quicker with very little change to the file size at all.

    Therefore the size of image should not be too small and should not be too big either (unless it has to be of course - e.g. when using gradients). You say you are using 10 x 28 which shouldn't be too bad a size but if you notice the page drawing slowly try increasing the size a little.

    Read the link I gave you above as it covers these issues in details.

    Quote Originally Posted by BaconRibs
    I dont use percentages in background images

    Percentages are easy to use as long as you realise that its the percentage part of the image is placed at in the corrresponding part of the element so if you say 100% 100% then the bottom right corner of the image is place at the bottm right corner of the element.

  4. #4
    SitePoint Addict peterb's Avatar
    Join Date
    Jun 2003
    Location
    Athens, Greece
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello Paul,

    Thank you for your quick response. One item I forgot to include regarding background is the SCROLL that I have seen used, e.g.
    Code:
    background: url(../images/info32.png) no-repeat scroll 0 50%
    How does this play a role here?

    Yes I want to use the graphic block to tile an area with gradient.
    From what you have written, would you say that it would be best to stay under a 20 x 20 px then?

    I am using compression where possible to keep the graphics down in size.
    Does the format of the graphic play any difference, e.g. png, jpg, gif?

    Again thanks very much for the help.

    Peter

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    How does this play a role here?
    "scroll" is value for the background-attachment property and indicates that the image is to scroll along with the document rather than be "fixed" to the viewing area. The value "scroll" is the default anyway and need not be specified unless you were over-writing a previous "fixed" value. (Note that ie6 doesn't understand a "fixed" properly unless its applied to the body element).

    Yes I want to use the graphic block to tile an area with gradient.
    20x20 shouldn't be too bad.

    I am using compression where possible to keep the graphics down in size.
    Does the format of the graphic play any difference, e.g. png, jpg, gif?
    Well you should be able to find this out for yourself in your image package as it will tell you what size it has optimized down to. The format you use for your image depends on the image itself. If you have subtle gradients then jpgs or pngs are better than gifs. But if the color is more uniform then gifs are a smaller filesize. pngs can usually be optimised down quite well as long as you aren't using any transparency (which IE6 doesn't understand). However this is the sort of question you should ask in the graphics forum for more precise answers.


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
  •