screen resolution specific css style

Diff Styles For Diff Resolutions.

[jamie2993]

hi,

I Am Making A New Site (not said because of rules),
And Need Help Because Displays Different In Other Resolutions.

And Was Wondering If There Was Some Kind Of Script For It.

E.G:

If win.width=1024< then
@import url(ghgkjdfhgjk);
}

Something Like That, All Help Needed And Thanks In Advance.

Jamie2993

[Marshall]

Hi jamie2993, welcome to WebmasterWorld.

Yes, there are methods to select style sheets depending on screen resolution. Most involve javascript. The only problem, and someone will correct me if I am wrong, is if the window is resized. Unless you include some script stating to the effect - window.resize reload (not proper js semantics) your font size may be inappropriate.

The other option is to have a font size option built right into the page via links. One link would read "smaller text" and the other "larger text". This allows the visitor to control the font size manually. IMHO, I think this is the preferred option.

Marshall

[DrDoc]

Welcome to WebmasterWorld!

First of all -- sites that display different in different resolutions should be addressed by changing the layout. Either 1) make sure it displays well at different resolutions by creating a fluid layout that resizes well, or 2) restrict the rendering by changing your CSS to ensure it doesn't break.

You cannot rely on JavaScript to "fix" a rendering problem. A site should at least degrade well. In other words -- what do you plan to do for users with JavaScript disabled (for whatever reason) in order to "fix" the rendering? Or, what about people who like to resize their browser window to highly unconventional sizes? Not everyone keeps the window maximized. Or, what about mobile devices? And what about the potential flickering rendering that comes from a layout that resizes itself?

There are lots of issues to consider.

[jamie2993]

Hi, Thanks For The Reply.

All Im Having Trouble With Is A Little Positioning Problem.

My Css Code Is Big But...

body {
margin: 0 auto;
overflow: hidden;
background: silver;
}
.halfmoon ul{
position: absolute;
right: 84.9%;
top: 1%;
font: 13px;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
width: 15%;
}
.halfmoon li{
display: inline;
margin: 0 auto;
}
.halfmoon li a{
text-decoration: none;
margin: 0 auto;
margin-right: 0 auto; /*distance between each tab*/
color: black;
font: 13px;
background: DarkRed;
}
.halfmoon li a:visited{
color: black;
}
.halfmoon li a:hover, .halfmoon li a.current{
background-color: Black;
color: white;
}
#tabcontentcontainer{
position: absolute;
top: 4.4%;
left: 0.5%;
#top: 3%;
#left: 0.1%;
width: 9.7%;
height: 94%;
#height: 96.7%;
background: black;
color: white;
}
a {
color: #90c040;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.tabcontent{
display:none;
}
#main {
position: relative;
top: 1%;
left: 9.9%;
width: 88.5%;
#width: 89%;
height: 95%;
#height: 98.7%;
}
iframe {
width: 100%;
height: 100%;
}
ul {
text-align: center;
margin: 0;
padding: 0 0 0 0;
}
li {
list-style: none;
}

I Just Need That To Display Properly In 1024, And 1280.

Help Thanked For.

[DrDoc]

Ah, yes. Marshal brings up an important point -- what happens when the window is resized? This just further complicates things and strongly favors a CSS based way of addressing the problem.

In either case, here's how you can detect the window dimensions using JavaScript:

<script type="text/javascript"> 
  winWidth = document.all ? document.body.clientWidth : window.innerWidth; 
  winHeight = document.all ? document.body.clientHeight : window.innerHeight; 
  if(winWidth > 1000) { 
    document.write('<link rel="stylesheet" type="text/css" href="wide.css">'); 
  } 
</script>

That script, if used, has to be included inside the

body

of the document.

But, again, please consider the points brought forth before resorting to JavaScript. It should really be your last resort.

[jamie2993]

Hi, tryed your code and it doesnt work for me.

Any more help with the javascript?

[jamie2993]

My Mistake,

I Have Resorted My Things Out And Has Worked Great.

Thank You Very Much All That Helped.

Jamie2993

[DrDoc]

... and, I assume it works at both window widths of 1024, 1400, 1600, 2000, and ... say, 1834?

[poppyrich]

You got no mercy, Doc!

[mapleleaf]

Greetings!

My first post here.

I liked what DrDoc stated but I went a step further.

I am currently designing a web site for both 1024 x 768 and 1280 x 1024.

I am using what can best be described as resolution dependent CSS layout.

I created two layouts namely, layout1024.css and layout1280.css.

The following is added as part of an external *.js. Both work and both work with IE7 or Firefox3.01. Thus in doing so will comply with xhtml1.0 validation

<script type="text/javascript">

var winwidth=(screen.width¦¦document.client.width);
var css = (winwidth==1024) ? "layout1024.css" : "layout1280.css" ;
document.write('<link rel="stylesheet" type="text/css" href="./css/'+css+' " />');

</script>

The beauty about this is that you have the same html shell BUT depending on the resolution of the user/visitor to the web site.

Simply put

1. test the screen resolution
2. evaluate the variable winwidth as true or false
if true then the default(layout1024.css) will be used in the
variable css
3. use document.write to write the stylesheet with the variable css

Any comments?

mapleleaf

[swa66]

Take care: some use small screen sizes. Just think of the thousands of iPhones, iPod touch, PDAs, smartphones, ...
Now some might want a separate stylesheet, but some use regular browsers too.

People on machines with high resolution do not always maximize their screen (actually on a screen of 1900x100 it's not even handy to do so). The reason you get high res screens is to be able to put things next to one another ... (in my case anyway).

Serving up different CSS depending on detected resolution is trickier than shown above.

First there's delay: the CSS will not be known to the browser that it will be needed till the rest of the page loaded and the javascript ran, and hence it'll get loaded late ...

Secondly ==1024, let's replace that with <=

Thirdly changing layout based on resolution might be counterproductive to those who use high res screen s fr their own reasons (be it running things side-by-side, needing huge fonts that will overrule your settings, ...)
Don't consider all your visitors clueless.