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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Apr 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    css for different screens

    Hi,

    i need help on a javascript, to load a different css for different screens,
    for screens below 1024 and above 1280.

    thank you for your help or comments.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,478
    Thanks
    6
    Thanked 981 Times in 954 Posts
    I have a comment for you: Create a default style that all users can see (i.e. 800x600) and then create alternate stylesheets for different sizes and let the user decide how to view the site by having a stylesheet switcher.

    A well thought out website structure and layout works (more or less) in any resolution regardless of the screen size. You can never know how small the browser window will be. Some people make it narrow to have more room on their screen, some people even have JavaScript disabled (hence, rendering any JS attempt useless).

    You should think out of the box.

  • #3
    New to the CF scene
    Join Date
    Apr 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    HI,

    thanks for the reply. but, here is the scene.
    can you please visit http://www.storagedrop.com/new/index.php
    and login as username: sonu, and password: laptop

    for screens greater than 1280, the right menu looks perfect, aligned with the the rest of the site.

    but if you look at the page in 1024, the menu comes to left, hence i wanted a css shifter depedning on the screen.

    any comments ?

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,478
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Well, your site is nice but it’s also an example of the statement I made earlier: You don’t need different stylesheets and/or a screen resolution detection script. You just need to apply the right styles to the right HTML.

    The first condition is that your HTML should be valid. Secondly: have you looked at that page in Firefox yet? It’s totally screwed up. Not even the best alternate stylesheet would help here. One rule of thumb: Don’t use IE as primary measure. Use real, good, standards compliant browsers like Opera, Firefox, Safari, Konqueror. Those browsers show you the actual results of your coding while IE is guessing what you could have meant.
    Chances are if you get it to look alright in those standards compliant browsers it will look alright in IE, too. And if not, then you should fix it there using conditional comments.

    Then it should be alright to either set a minimum width or a width in general and your problem will be gone.

    Edit: After looking at it more thoroughly it appears that you need to clear the float for #mainTable. And I’d recommend either not positioning the #buttoncontainter at all or setting the anchor at the right (right: 0; or something like that), not at the left so it will go with the right side. If you apply a (min-)width it will stay where it is as soon as the width is achieved when the window size is decreased.
    Last edited by VIPStephan; 12-20-2007 at 12:19 AM.


  •  

    Posting Permissions

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