I've created a website (<!-- m --><a class="postlink" href="http://home.hetnet.nl/~j.e.dijkstra/index.html">http://home.hetnet.nl/~j.e.dijkstra/index.html</a><!-- m -->) that has a link to an external style sheet. The website is best-viewed at a resolution of 800*600.
Now I want to create a second external style sheet, that will make my website also look good at a resolution of 1024*768.
And also link it to my website. I know that it is possible to link more than one stylesheet to a website.
What I need is some code that will check what the reolution of the browser is and then automatically link the right style sheet to it.
Does anyone knows how to do that or it that is possible.
Thanks,
Dimpie.It can be done using JS, but you shouldn't do it. Redesign your stylesheet so it works on all browsers - simply use relative sizes for your main dimensions and you should be fine. A JS/resolution-dependent script would be difficult to modify and inaccessible.
AdamThanks for your help Adam,
I'm going to try that.
But I guess I need a little more help with it.
What should I use for my font-size instead of pixels (px)? Can I use (pt) or should I use something else? I think that shouldn't be too difficult for me to change.
But I have no idea what I must do to make the position/width/length of a box (div) relative to the screen resolution. What can I use instead of px here?
Part of my CSS file:
.nav {
background-color: #ffffdd;
width: 143px;
border-color: ;
border-style: outset;
border-width: 2px;
position: absolute;
left: 10px;
top: 15px;
visibility: visible;
}
DimpieThe main unit I use to set lengths is percent (%) - see <!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/syndata.html#percentage-units">http://www.w3.org/TR/REC-CSS2/syndata.h ... tage-units</a><!-- m -->.
I find it easiest to use the CSS font size keywords (see <!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/fonts.html#font-size-props">http://www.w3.org/TR/REC-CSS2/fonts.htm ... size-props</a><!-- m -->) - points (pt) are a fixed size measurement. You can also use percent, if you wish.
Some useful links:
<!-- m --><a class="postlink" href="http://webdesign.about.com/cs/typemeasurements/a/aa042803a.htm">http://webdesign.about.com/cs/typemeasu ... 42803a.htm</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.smartwebby.com/web_site_design/designing_websites_for_all_resolutions.asp">http://www.smartwebby.com/web_site_desi ... utions.asp</a><!-- m --> (refers to tables, but applies to CSS widths as well)I had a quick glance at the links in your reply.
This will help me to get the job done I think.
Great,
Thanks Adam.
Now I want to create a second external style sheet, that will make my website also look good at a resolution of 1024*768.
And also link it to my website. I know that it is possible to link more than one stylesheet to a website.
What I need is some code that will check what the reolution of the browser is and then automatically link the right style sheet to it.
Does anyone knows how to do that or it that is possible.
Thanks,
Dimpie.It can be done using JS, but you shouldn't do it. Redesign your stylesheet so it works on all browsers - simply use relative sizes for your main dimensions and you should be fine. A JS/resolution-dependent script would be difficult to modify and inaccessible.
AdamThanks for your help Adam,
I'm going to try that.
But I guess I need a little more help with it.
What should I use for my font-size instead of pixels (px)? Can I use (pt) or should I use something else? I think that shouldn't be too difficult for me to change.
But I have no idea what I must do to make the position/width/length of a box (div) relative to the screen resolution. What can I use instead of px here?
Part of my CSS file:
.nav {
background-color: #ffffdd;
width: 143px;
border-color: ;
border-style: outset;
border-width: 2px;
position: absolute;
left: 10px;
top: 15px;
visibility: visible;
}
DimpieThe main unit I use to set lengths is percent (%) - see <!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/syndata.html#percentage-units">http://www.w3.org/TR/REC-CSS2/syndata.h ... tage-units</a><!-- m -->.I find it easiest to use the CSS font size keywords (see <!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/fonts.html#font-size-props">http://www.w3.org/TR/REC-CSS2/fonts.htm ... size-props</a><!-- m -->) - points (pt) are a fixed size measurement. You can also use percent, if you wish.
Some useful links:
<!-- m --><a class="postlink" href="http://webdesign.about.com/cs/typemeasurements/a/aa042803a.htm">http://webdesign.about.com/cs/typemeasu ... 42803a.htm</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.smartwebby.com/web_site_design/designing_websites_for_all_resolutions.asp">http://www.smartwebby.com/web_site_desi ... utions.asp</a><!-- m --> (refers to tables, but applies to CSS widths as well)I had a quick glance at the links in your reply.
This will help me to get the job done I think.
Great,
Thanks Adam.