Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts

    How do you code for different resolutions?

    After i coded my sites they usually break apart when there are not maximized or in a different resolution I'd would really want to code



    and i don't want tot break apart in different resolutions or when not maximized.
    So whats the solution i hard fluid layout, is this a fluid layout?

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    If you code for a width of ~780 pixels, you're generally going to get it to fit the browser window at most resolutions.

    Liquid layouts use percentages, which is a certain fraction of avalible space in the viewport.

    PS: Liking the design!

  • #3
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    a fluid layout normally consists of em's or %'s! That way it can and will adjust to the users screen resolution. Also it wont work well if you use position:absolute or relative with it. Thats because of top, left, right, bottom will all be different. Use paddings and margins and floats also. here is a good site with examples.

    http://blog.html.it/layoutgala/

    also we cant tell if your site is fluid without code or a link.

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Generally speaking, put sizes in ems or %ages. Use as little Position:absolute; as possible.

    Look at these sites. 1.

    and here - 2.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by CyanLight View Post
    If you code for a width of ~780 pixels, you're generally going to get it to fit the browser window at most resolutions.

    Liquid layouts use percentages, which is a certain fraction of avalible space in the viewport.

    PS: Liking the design!
    Thanks, I'm so should I adjust the design to 780 px width. or code it straight to 780 px.

  • #6
    Regular Coder
    Join Date
    Jul 2008
    Posts
    195
    Thanks
    3
    Thanked 11 Times in 11 Posts
    Quote Originally Posted by l Squid l View Post
    Thanks, I'm so should I adjust the design to 780 px width. or code it straight to 780 px.
    Can we have a URL please?

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Your site can easily be made into a fluid one. Check out this layout.

    http://bonrouge.com/2c-hf-fluid.php

    Your sidebar can stay at the width its currently set at. Use pixels for its width. Your content area will need to have a repeating image going in the x direction so it expands with the users screen resolution.

    You could always keep your header graphic centered or start it on the left and have some type of repeating background. A shiny gradient would look okay.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    l Squid l (07-21-2008)

  • #8
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts
    Let me this straight. I'm going with coding it as a fluid layout. A fluid layout uses percentages. It grows and shrinks. Well my first step is slicing the design in Photoshop any specifics I need to know when slicing it to make it optimal for fluid layout coding? And regrading the Content area I do not understand fully what you said Aerospace Eng

  • #9
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts
    Just a bump..

  • #10
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    what he means is that your content area needs to have a reapeating image so that it can expand with content or the size of the users screen. you would take a small slice of your content image, lets say a height of 5px and the width of how large you want it. It all depends on how it looks.

    Then you would repeat the content

    Code:
    #content {
    background-image:url(contentIMG.gif);
    background-repeat:repeat;
    }/*just an example*/
    check out slicing web based images on google and you might get a few examples of how to do this. Let us know if you have anymore questions.

  • Users who have thanked jcdevelopment for this post:

    l Squid l (07-21-2008)

  • #11
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts
    Alright I get that. Thanks

  • #12
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts
    Based on my layout should I code for two column fluid?

    and ok so I coded the banner to be centered. now everything else except the side bar should coded fluid?
    Last edited by l Squid l; 07-22-2008 at 05:02 AM.

  • #13
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Yes. Take a look at the link to the layout I posted. You won't necessarily need to use percentages you could use a left margin on the content and float the sidebar to the left. The content will expand to fit the screen.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #14
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts
    I just tried. I'm not able to grasp this. Maybe if someone could code just a column I can get a better hang of it. Don't worry I wont bug you to code more. This is just to help me.

  • #15
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts
    Ok I have split my layout like this.


    I have made 3 columns to be fluid. and one sidebar to be fixed with. The header, nav and footer I am lost on what to do.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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