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.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Full sized website

    Hello!

    First of all, i'm sorry for my english, it's not my native language.
    I am new on this forum, I hope I didn't miss any presentation thread :S

    I'd use the ScrollTo in jQuery, but i've got some problems with the HTML/CSS (even if I thought that I knew those languages pretty well before starting learning jQuery :S).

    Well, I'd make the same kind of website than this:
    http://digitaldrop.net/

    I do know the guy used a div with a very large width (like 30.000 pixels for this website) and an height of... 100% I guess?

    I have some problems for the 100% things and I couldn't find any tutorial explaining it. How the webdesigner of this website placed his content exactly in the middle of every pages, on every screens? When i'm coding, I generally use a wrapper of 1024 width, as most of people are running with 17"+ screens.

    How do I have to organize my css to obtain a kind of same result? Any of you got a tutorial which could help me?

    PS: I'm not asking the way to use the jQuery system (scrollTo), just how to code a website on a big width AND make it fits for every screens.

    Thank you in advance,

    Sylvain, computer graphics student.

  • #2
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Up :<

  • #3
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    628
    Thanks
    51
    Thanked 67 Times in 67 Posts
    margin: auto; or margin: 0 auto; will generate equal left/right margins that should center your content.
    "Yeah science!"

  • #4
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ya I know this one... but on a 30 000 pixel width, how do I place my elements correctly. To have... One page on 1200px, another on 1200,etc... everything placed correctly.

  • #5
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    628
    Thanks
    51
    Thanked 67 Times in 67 Posts
    Code:
    * {
    margin: 0; padding: 0;
    }
    html {
    width: 200%; /* 100 * number of pages %) */
    height: 100%;
    }
    body {
    width: 100%;
    height: 100%;
    }
    div.page {
    width: 50%; /* 100 / number of pages % */
    height: 100%;
    float: left;
    }
    The only problem with this is that you cannot get a precise decimal from some numbers (e.g. if you have 3 pages, each one would need be 33.3333....% wide). One way this could be fixed would be by having your pages scroll vertically as opposed to horizontally, thus they could all have a comfortable width/height of 100%.

    The site you mentioned is actually not optimized very well for different page sizes. What it does is oversize the pages and center the content (for a certain page width) so that you can resize your browser and you will still be able to at least see the content. However, the layout breaks in an 800x600 layout or larger than 1280x1024.
    "Yeah science!"

  • #6
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Alright, it's working! Thank you very much
    Last edited by Sylsky; 07-20-2011 at 04:12 PM.


  •  

    Posting Permissions

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