homepage Welcome to WebmasterWorld Guest from 54.196.18.51
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
change css depending on screen resolution
is it possible?
dillonstars




msg:3459297
 3:56 pm on Sep 24, 2007 (gmt 0)

Is it possible to show/hide divs with CSS depending on what screen resolution you are using?

For example, I would like to show a thinner sidebar div when the resolution is 800x600 or below, than the regular one I use which is suitable for 1024x768 or higher.

 

Robin_reala




msg:3459309
 4:06 pm on Sep 24, 2007 (gmt 0)

CSS3 Media Queries [w3.org]:

@import 'main_styles.css';
@media screen and (min-width: 800px) {
@import 'thicker_sidebar.css';
}

Of course as with anything CSS3 support is spotty. I believe Opera's pretty good, and new versions of Safari (3+?) I think also support it. Otherwise, you're back to using Javascript to test the width of the screen (window.innerwidth) and load the stylesheet as and when.

[edited by: Robin_reala at 4:06 pm (utc) on Sep. 24, 2007]

dillonstars




msg:3459313
 4:08 pm on Sep 24, 2007 (gmt 0)

Thanks. I don't want to start using css3 until it is more widely supported so I guess I'll try a javascript solution.

I'm not very adept at writing javascript though. Can you give me any tips or snippets on how to do this? Maybe I should ask in the Javascript forum...

encyclo




msg:3459733
 12:47 am on Sep 25, 2007 (gmt 0)

Continued here: [webmasterworld.com...]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved