iPowerWeb Hosting
 
Home Register FAQ Members List Calendar Search Today's Posts Mark Forums Read Web Directory

Go Back   Webmaster Forum > Designing and Developing Websites > Web Design

Web Design Discussions and help on Website Design, HTML, CSS, xHTML, DHTML, etc...

Reply
 
Thread Tools Display Modes
  #1 (permalink)  
Old 05-14-2008, 12:45 PM
getlucky getlucky is offline
WMG Newcomer
 
Join Date: May 2008
Posts: 1
iTrader: (0)
getlucky is on a distinguished road
Default Selecting a style sheet based on screen width

The following code when placed in the head section of a page will always load the 800.css style sheet, however if JavaScript is enabled on the browser and the screen width is 1280 pixels or more then the style sheet 1280.css is also loaded allowing elements from the 800.css sheet to be overridden and adjusted for the larger display area.

Adjustments may include the loading of larger background images for the higher resolution screens.
Code:

<link href="800.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//<![CDATA[
if(screen.width >= 1280) document.write("<link href='1280.css' rel='stylesheet' type='text/css' />");
//]]>
</script>

The if statement can be repeated to add more levels if required e.g.
Code:

if(screen.width >= 1280) document.write("<link href='1280.css' rel='stylesheet' type='text/css' />");
if(screen.width >= 1920) document.write("<link href='1920.css' rel='styles
Reply With Quote
Sponsored Links
Register and sign in to hide this ad block

  #2 (permalink)  
Old 05-14-2008, 11:32 PM
Crafterz's Avatar
Crafterz Crafterz is offline
WMG Deputy Sheriff
 
Join Date: Apr 2008
Posts: 121
iTrader: (0)
Crafterz is on a distinguished road
Default

Thanks dude, that was a major problem for my last template. The boxes in the middle were too small for a large screen. Now I can have them adjust.

Thanks!
Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off

All times are GMT. The time now is 06:53 PM.



Freelance Web Designers
Work At Home Forum
Ad Marketplace
Online Deals and Bargains
iPower Hosting Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
LinkBacks Enabled by vBSEO 3.0.0