Making Web Template Fluid in all browsers !!!

Discussion in 'HTML & Website Design' started by naviarora2007, Dec 28, 2008.

0
  1. #1
    Hello friends,

    i am wondering from 2moro here and there on google on how to liquify any tenplate.

    I need my template on www.icbse.com to liquify (or with varibale width).

    Please help me....:(
     
    naviarora2007, Dec 28, 2008 IP
  2. Sensei.Design

    Sensei.Design Prominent Member

    Messages:
    3,847
    Likes Received:
    162
    Best Answers:
    0
    Trophy Points:
    310
    Digital Goods:
    1
    #2
    you are not useing images so it's no big deal. there are two possibilyties create a wrapper around the whole page and center it I would recoment you to use a width of 1000px then it will be fluid or use % instead of px in margin
     
    Sensei.Design, Dec 28, 2008 IP
  3. Alevoor

    Alevoor Active Member

    Messages:
    1,573
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    80
    #3
    It is a simple mistake but it pays to correct it.

    A large portion of your internal links on your home pag eis in white color against same background. You may want to correct this. :)
     
    Alevoor, Dec 28, 2008 IP
  4. LindseyInteractive

    LindseyInteractive Well-Known Member

    Messages:
    2,830
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    175
    #4
    As one was saying above, you need to use "%" instead of direct "PX" statements.

    Incase you are not 100% sure what we mean by this I will take the time to explain it here.

    The most view resolution is 1024x768. Which means, lets say for example, we have a page and we have its header width like below:

    {body
    background: 000000;}

    {header
    {font-type: arial;
    width: 1000px;
    background-image: url(image/xxxx.jp);
    }


    This is going to give us a header of 1000 pixels wide, which is going to leave 12px on each side (a total of 24), so this is going to have the background colors of black for 12 pixels on each side, and this is a fixed width not a fluid (fullscreen).

    In order to replace this with "FLUID" or expanding full screen you would change css to:

    {body
    background: 000000;}

    {header
    {font-type: arial;
    width: 100%;
    background-image: url(image/xxxx.jp);
    }


    And this would make your image that you specify become 100% width, would would make it expand complelty across your screen, so in the resolution of 1024x768 it would make the image 1024 pixels wide.

    In the case of 1600x1200 resolution the image would be 1600pixles wide.

    I hope this has helped you to understand fluid and fixed widths. Please let me know if you have any other questions.
     
    LindseyInteractive, Dec 28, 2008 IP
  5. naviarora2007

    naviarora2007 Active Member

    Messages:
    163
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    58
    #5
    Thanks....

    but now i am using fixed template on my site www,icbse.com

    coz its new one so i think i shud start with any normal template and if my site gets popular or more visitors then i will think of any premium template.

    thanx for replying !
     
    naviarora2007, Dec 29, 2008 IP