Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Junior Member
    Join Date
    Aug 2011
    Posts
    2
    Member #
    28767
    Hi all,

    I'm new to the board, really hope you can help me out

    I have a couple of issues but they're both related to ensuring that my site is viewable in all resolutions.

    I changed all my widths to percentages but I'm stuck on a couple of things.

    Firstly, I've embedded a font which won't scale with the browser window size/screen resolution.

    I set the font to size 35% which displays at 35% but won't scale.

    In fact to get the font to the size I want it (at least at 1920x1080 res), I have to set it to 725% or 7em or 86px.


    Code:
    @font-face { 
     font-family: cv_cretino; 
     src: url(cv_cretino.eot); /* IE */
     src: local(cv_cretino), url(cv_cretino.ttf) format("truetype"); /* non-IE */
     }
    ...
    #title { 
     font-family: cv_cretino, Arial; 
     font-size: 35%;
    }
    The second problem:

    I don't want the main page to scroll at all, but the contents of my four layers make this happen.


    So I set the height of the layers in pixels, and then used overflow: auto which caused the layers to be scrollable.


    A height of 225px is good for resolutions 1280x720 down to 1024x768. On higher resolutions, there's more space for the text to wrap, but because I've set the height @ 225px; it'll always look that way on higher resolutions.

    So my question is... is there a way to have the layers dynamically induce vertical scrolling when the bottom of the page is detected, so that the main page doesn't scroll?

    I've tried 'min-height' but it has no effect. Even then I'd have to set that to pixels because percentages seem to be ignored for this.

    Or perhaps I need to use a javascript to call on multiple CSS files dependent on browser window size/screen resolution?

    I just don't know... also I'm thinking maybe I should be catering for all resolutions so my site would look good on an iPhone - worthwhile?

    *fuzzled*

  2.  

  3. #2
    WDF Staff m3n0tu18's Avatar
    Join Date
    Jul 2011
    Location
    Devon, UK
    Posts
    1,467
    Member #
    28473
    Liked
    265 times
    Could you send us a link to the current project so we can take a look.

    I think i see what you mean about the footer and ive seen it before but never been able to find the answer myself...

    When the user scrolls down the page(in this case it was a landscaping site) they started in the sky scrolled down to the grass and when the bottom of the container hit the footer (the earth under the ground)scrolled as well, i thought it was a very cleaver piece of css'ing because only the container scrolled to a certain point, then the footer came in. Ive spent months looking for the site but to no avail.

    When I do find i shall post for everyone to see.
    If you like my comments to your thread please click the LIKE button

    Check out my portfolio: Here!
    View my company Facebook Page
    View my company Website

    <<Plrease ignoer my typo's I have isdexlyia>>

  4. #3
    Junior Member
    Join Date
    Aug 2011
    Posts
    2
    Member #
    28767
    http://adkm.x10.mx/

    thanks

    I actually wouldn't mind the main page scrolling, since I think it'd have to because I want my site viewable on all devices (iPhones and upwards). The only problem with this is that the gradient background image and the leaves stop before the text does - even when I set the #background2 and #leaves layers to height: 100%. Hence my layer scrolling work-around... which is seeming to be a more trouble than it's worth!


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:14 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com