PDA

View Full Version : CSS and Different Resolutions

digitaltune
05-11-2003, 08:26 PM
It's gone plain out of my head, but could someone please remind me how to make say a logo display in the top right corner of a page (as a div) on both 800 x 600 and 1024 x 768 and the rest?

In CSS if you can, thanks very much in advance! :thumbsup:
Vladdy
05-11-2003, 08:41 PM
<style>
#banner
{ background: url("logo.gif") no-repeat 50% 100%;
left: 0px;
top: 0px;
width: 100%;
height: 50px; /*height equals image height*/
line-height: 100%;
padding: 100px 0px 0px 0px; /*make top padding greater than height */
font-size: 1px;
overflow: hidden;
}
</style>
....
<div id="banner">My Company</div>
digitaltune
05-11-2003, 08:44 PM
your a star :D :thumbsup:
digitaltune
05-11-2003, 08:49 PM
How do I make everything on the page cross-resolution compatible?
Vladdy
05-11-2003, 09:05 PM
Other than for graphical elements, do not use fixed element width. Allow elements to reflow (things that may go to the right of your content, drop below when page is too narrow).
If you want to be really fancy you can specify different style sheets for different browser sizes and link the desired one during page rendering (see example of this functionality here: (site is still under construction, but layout is pretty much done) www.klproductions.com/home.html
digitaltune
05-11-2003, 09:07 PM
I've decided to load a different style sheet for different resolutions through Javascript - thanks for your help!
zoobie
05-12-2003, 12:10 AM
<body style-"margin:0;padding:0">
<div><img src="logo.gif"></div>