SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    185
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Looking for a specific type of layout

    Hi , I wonder if anyone would be able to help me. Basically I am trying to create a page that would take up the full screen (no scrolling) on any device (responsive /grid system preferably) allowing the introduction of jquery. Is there any free template somewhere I could start with?
    Many thanks.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,623
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by moisea View Post
    I am trying to create a page that would take up the full screen (no scrolling) on any device
    You may need to give more details. You can of course do this essentially with width: 100%; but that's presumably not what you mean. There are simple modifications to make this work on mobile, too.

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    185
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here is the code
    body{
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    background:#f0f0f0
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;}

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,623
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    That's not really enough code. We'd need to see your HTML, too. See if you can post a full working example.

    I wouldn't be using position: absolute there, however. 100% width is easy enough, but it sounds like you want a sticky footer, or a page that is always at least 100% tall. (It's pretty dangerous not to allow overflow, though, as content on some very small devices is unlikely to fit on the screen all at once.)

    Here's an explanation of how to do 100% height:

    http://www.sitepoint.com/forums/show...41#post1243541

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,634
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    body{
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    background:#f0f0f0
    position: absolute;
    width: 100%;
    height: 100%;
    }

    And a few sentences no wider than what 380px and no higher than 400px prob if you want it contained in all medians. If you want it centered in all I can show how I did it.


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
  •