CSS - Fixed Position Independent Of Screen Resolution

Hey there! New to code, sort of flying blind but learning a lot as I go along.

I'm also kind of shooting for the stars with my design decisions. I was wondering if anyone here has any idea how to mimic the rotating image on Blizzard's website.

(As I cannot post the URL, I assume everyone can figure out how to get to Blizzard Entertainment's website easy enough).

If you zoom in and out on it, it remains static even as the pieces around it resize over it (this also happens at smaller resolutions). I would desperately like to know how to get it to lock flush against the side of the window like that. Additionally, you'll notice that it doesn't pop a scrollbar onto the window until you shrink the window smaller than the central content.

I guess a bigger question is, is this even something achievable in CSS? Do I have to delve into Flash or Javascript to do it, and if so, does anyone know how?

Thank you so much in advance!

Hi There.. I am still learning CSS/Xhtml so please be patient and understanding, . Anyway, I am making a site for my business and wanted to try some new idea. Everything looks good except for my navigation bar in IE. Whenever I change resolution the navigation bar moves out of position and I have to refresh to get it to snap into place. In Firefox and Chrome I do not have this issue.

I have been googling trying to find the solution but have come up empty. Could someone look at my code and tell me when I did wrong so I don't make the same mistake again? Thanks for your help.


Here is the CSS:

<style type="text/css">
<!--
#html, body {
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width:920px;
height: 100%;
background: url(desk.jpg) white center no-repeat;
background-repeat:no-repeat;
margin: 0 auto;
text-align: center;
font-family: Verdana, Helvetica, sans-serif;
}
#container {
width: 900px; height:840px;
background-image: url(bg1.png);
margin: 0 auto;
text-align: left;
}
#mainContent {
padding: 3px 60px;
margin-top: 0px ;
}

#text {
padding: 0;
margin-left: 35px;
text-align: center;
}

#navigation {
float:right;
display:block;
width: 400px;
margin-top: 15px ;
font-family:Trebuchet MS, Helvetica, sans-serif;
overflow:hidden;
}
#navigation ul {
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#navigation ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}

#navigation ul li a {
display:block;
margin:0;
padding:.4em .8em;
color:#000;
text-decoration:none;
line-height:1.3em;
}
#navigation ul li a span {
display:block;
}
#navigation ul li.active a {
color: #fff;
font-weight:bold;
}
#navigation ul li a:hover {
color: #fff;
font-weight: bold;
}

.guy {
float: right;
margin-top: -70px;
}

.yell {
float: left;
margin-top: 20px;
padding-bottom: 0px;
margin-right: 30px;
margin-left: 20px;
}

.second {
margin-top:45px;
}

#footer {
font-size: 11px;
margin-bottom: 10px;
}
-->

This one has probably been beaten to death by now, but I can't seem to find a specific answer.

I develop on a monitor 1024x768, and use a standard font size (for general text) of 11px. When using a 800x600 resolution monitor, the text seems oversized - which is what one would expect with a px setting.

Or looking at it from the other side of the fence, if I develop on the 800x600 and get a decent text size, it looks too small on the higher resolution.

I can use 2 .css files with different font size settings and javascript to direct to the relevant css file. As far as I can tell, that is the only way I can get a 'similar' look on both screen resolutions. Is there another way where I can get away with using only 1 css file? What do others do to get around this problem?

Hi everyone,

In high resolution settings (like 1600x900) this layout looks great. But, on 1280 x 720 the layout gets all screwed up.

Can someone look at the CSS below and let me know where I'm screwing up? Thanks!

The site is romanceplaybook dot com and here is the CSS:

body {
background: #ffffff url(images/bkgd.jpg) top repeat-y;
color: #333333;
font-size: 11px;
font-family: Verdana, Helvetica, Sans-Serif;
margin: 0px auto 0px;
padding: 0px;
}

#wrap {
background: #ffffff url(images/bg.jpg) top center repeat-y;
color: #333333;
font-size: 11px;
font-family: Verdana, Helvetica, Sans-Serif;
margin: 0px 300px 0px;
padding: 0px;
}

/************************************************
* Hyperlinks *
************************************************/

a, a:visited{
color: #507AA5;
text-decoration: none;
}

a:hover{
text-decoration: underline;
}

/************************************************
* Header *
************************************************/

#header {
background: #FFFFFF;
width: 1000px;
margin: 0px auto 0px;
padding: 0px 0px 0px 0px;
text-align: center;
text-transform: uppercase;
}

#header a {
font-family: Times New Roman, Helvetica, Sans-Serif;
font-size: 48px;
color: #333333;
text-decoration: none;
padding: 0px 10px 0px 10px;
margin: 0px;
text-transform: uppercase;
}

#header a:hover{
color: #333333;
}

/************************************************
* Navbar *
************************************************/

/************************************************
* Left Sidebar *
************************************************/

#l_sidebar {
float: left;
width: 160px;
margin: 0px 20px 0px 0px;
padding: 20px 0px 20px 0px;
}

#l_sidebar ul {
list-style: none;
margin: 0px;
padding: 0px 0px 20px 0px;
}

#l_sidebar li {
list-style: none;
margin: 0px;
padding: 0px;
}

#l_sidebar ul li {
margin: 0px;
padding: 5px 0px 0px 0px;
}

#l_sidebar ul li a {
color: #507AA5;
text-decoration: none;
}

#l_sidebar ul li a:hover {
color: #507AA5;
text-decoration: underline;
}

/************************************************
* Right Sidebar *
************************************************/

#r_sidebar {
float: right;
width: 160px;
margin: 0px 0px 0px 0px;
padding: 20px 0px 0px 0px;
}

#r_sidebar p{
padding: 2px 0px 16px 0px;
margin: 0px;
line-height: 20px;
}

#r_sidebar ul {
list-style: none;
margin: 0px;
padding: 0px 0px 20px 0px;
}

#r_sidebar ul li {
margin: 0px;
padding: 5px 0px 0px 0px;
}

#r_sidebar ul li a {
color: #507AA5;
text-decoration: none;
}

#r_sidebar ul li a:hover {
color: #507AA5;
text-decoration: underline;
}

/************************************************
* Content *
************************************************/

#content {
width: 950px;
margin: 0px auto 0px;
padding: 0px;
}

#content p{
padding: 0px 0px 15px 0px;
margin: 0px;
line-height: 20px;
}

#content p img{
float: left;
border: none;
margin-right: 15px;
margin-bottom: 10px;
}

#content h1 {
color: #333333;
font-size: 22px;
font-family: Times New Roman, Verdana, Arial, Sans-Serif;
font-weight: normal;
padding: 0px 0px 0px 0px;
margin: 0px;
}

#content h1 a {
color: #333333;
text-decoration: none;
}

#content h1 a:hover {
color: #658DB5;
text-decoration: none;
}

#content h2 {
color: #333333;
font-size: 14px;
font-family: Times New Roman, Verdana, Arial, Sans-Serif;
font-weight: bold;
padding: 5px 0px 5px 0px;
margin: 0px;
border-top: 1px dotted #C0C0C0;
border-bottom: 1px dotted #C0C0C0;
}

#content p ol{
margin: 0px;
padding: 0px 0px 0px 20px;
}

#content p ul{
margin: 0px;
padding: 0px 0px 0px 20px;
}

blockquote{
margin: 0px 0px 0px 25px;
padding: 0px 25px 0px 10px;
font-style: italic;
color: #666666;
border-left: 3px solid #B3C8DB;
}

#content blockquote p{
margin: 0px 0px 20px 0px;
padding: 0px;
}

#contentmiddle {
float: left;
width: 550px;
margin: 0px 0px 0px 0px;
padding: 20px 5px 10px 20px;
text-align: left;
}

#contentmiddle p img{
float: left;
border: none;
margin-right: 15px;
margin-bottom: 10px;
}

.contentdate {
background: #FFFFFF url(images/date.gif);
float: left;
width: 45px;
height: 50px;
margin: 0px;
padding: 0px;
}

.contentdate h3 {
color: #FFFFFF;
font-size: 10px;
font-weight: normal;
padding: 1px 0px 0px 10px;
margin: 0px;
text-transform: uppercase;
}

.contentdate h4 {
font-family: Times New Roman, Helvetica, Sans-Serif;
color: #999999;
font-size: 21px;
font-weight: bold;
padding: 5px 4px 0px 0px;
margin: 0px;
text-align: center;
}

.contenttitle {
float: left;
width: 480px;
margin: 0px;
padding: 0px 0px 0px 10px;
}

#contentmiddle ul {
list-style: none;
margin: 0px;
padding: 0px 0px 20px 0px;
}

#contentmiddle ul li {
margin: 0px;
padding: 5px 0px 0px 0px;
}

#contentmiddle ul li a {
color: #507AA5;
text-decoration: none;
}

#contentmiddle ul li a:hover {
color: #507AA5;
text-decoration: underline;
}

#content img.wp-smiley {
float: none;
border: none;
padding: 0px;
margin: 0px;
}

#content img.wp-wink {
float: none;
border: none;
padding: 0px;
margin: 0px;
}

.postspace {
background: #EFEFEF url(images/spacer.gif);
width: 440px;
height: 32px;
margin: 0px;
padding: 0px;
}

/************************************************
* Footer *
************************************************/

#footer {
background: #FFFFFF;
width: 952px;
margin: 0px auto 0px;
padding: 10px 0px 10px 0px;
text-align: center;
border-top: 1px solid #C0C0C0;
}

/************************************************
* Search Form *
************************************************/

#searchdiv {
margin: 0px;
padding 0px;
}

#searchform {
margin: 0px;
padding: 0px;
overflow: hidden;
}

#s {
width: 190px;
background: #EFEFEF url(images/search.gif);
color: #333333;
font-size: 11px;
font-family: Verdana, Helvetica, Sans-Serif;
padding: 3px;
margin: 8px 0px 0px 0px;
border: 1px solid #C0C0C0;
}

/************************************************
* Comments *
************************************************/

#commentblock {
width: 395px;
background: #EFEFEF;
color: #333333;
float: left;
padding: 10px 20px 0px 20px;
margin: 10px 0px 10px 0px;
border: 1px solid #C0C0C0;
}

ol#commentlist {
padding: 5px 0px 5px 0px;
margin: 0px;
list-style-type: none;
}

.commentdate {
font-size: 12px;
padding-left: 0px;
}

#commentlist li p{
margin-bottom: 8px;
line-height: 20px;
padding: 0px;
}

.commentname {
color: #333333;
margin: 0px;
padding: 5px 5px 5px 0px;
}

.commentinfo{
clear: both;
}

.commenttext {
clear: both;
margin: 5px 0px 20px 0px;
padding: 20px 10px 5px 10px;
width: 365px;
background: #FFFFFF url(images/comment.gif) no-repeat top;
}

.commenttext-admin {
clear: both;
margin: 5px 0px 20px 0px;
padding: 20px 10px 5px 10px;
width: 365px;
background: #FFFFFF url(images/comment.gif) no-repeat top;
}

#commentsformheader{
padding-left: 0px;
}

#commentsform{
text-align: left;
margin: 0px;
padding: 0px;
}

#commentsform form{
text-align: left;
margin: 0px;
}

#commentsform p{
margin: 0px;
}

#commentsform form textarea{
width: 99%;
}

p.comments_link img{
margin: 0px;
padding: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

Hi I am designing a page in which I want to include a background image that is anchored to the bottom right of the screen. I have managed to do this, the only problem I am having is that due to the image being a big one (dimensions) when the user's screen is of a lower resolution such as 800 x 600, the image takes over most of the page's background which is distracting from the main content. My idea is to have the image resize based on the user's screen resolution. Is this a feasible solution and if yes, how can it be achieved? Thanks

Hi

When you resize the window to a smaller window the css formatted page contracts and it looks bad. How can you make it add scrollbars so the content doesn't squish as it stays where it is but scrollbars are added to view the whole page.

Can it be done as this has a bad effect on my webpage with a few containers when resized to a smaller size.


<style type="text/css">

body{margin:0%;padding:0%;min-width:700px;overflow:auto;}

I use %positioning for the containers so I guess that also resizes in smaller window mode.
If I was to use pixel length and SR is 800X600 is that the actual size i use or would it be smaller?

i am trying to do this example here

w3schools.c0m/css/tryit.asp?filename=trycss_position_fixed

the o, in .com has been changed to 0 so i could post. sorry

the text " Some more text "

I wish to had dead center on the right side of the page, not near the top like that,

mainly, i wish to put two more lines of text just under it as well, all being dead center of the page, on the right, i cannot figure it out, any help please?

ok my site works perfect in ffox but when i load it in ie the fixed position dose not work :'( why not?, if i go back in firefox it will

Since position:fixed does not work in IE, are there any other ways to achieve the fixed effect, without using javascript?

The layout in question:

Page: http://www.westeros.org/ASoWS/index-Frames.html
CSS (general): http://www.westeros.org/ASoWS/ASoWS-All-Frames.css
CSS (IE): http://www.westeros.org/ASoWS/ASoWS-IE.css

In Mozilla the above CSS 'frames' layout is mostly working, save that I can't figure out a way to hide the text above the header and below the footer. Is that at all doable with this layout?

In IE, however, the header, footer and sidecolumns are all over the place. I have another CSS 'frames' layout (see the links below), which does work in IE, and part of the problem with the new layout seems to be that IE really doesn't like having left and right values specified for the header and footer.

However, without those, I don't know how to make sure that they start and stop 10px away from the edge. Any workarounds for that that anyone can think of?

Old CSS 'frames' layout (does work in IE):

Page: http://www.westeros.org/BoD/
CSS (general): http://www.westeros.org/BoD/BoD-All.css
CSS (IE): http://www.westeros.org/BoD/BoD-IE.css

Hi all,

I've got a site which you have to scroll horizontally to view the content (different eh?), but I want the menu to stay in a fixed position on the left side of the screen.

Can anyone tell me if/how I can do this?

Cheers!

I have a scrolling div on a page. Within the div is a tabular form. I want to place a button that is has a fixed position within the div. So if the HTML code is like this:
Code:

<div id="div1">
<div id="buttonID"></div>
<form>
<table>
<tr>
<td>
</td>
</tr>
</table>
<form>
</div>

The css I thought would achieve what I wanted is
Code:

#div1{
div1 CSS goes here.
}
#div1 #buttonID{
position: fixed;
top: 300px;
left: 20px;
}

However, while the button is fixed, its position is fixed in relation to the page, not within the div which is annoying. Can anyone point out what I'm doing wrong here? Can a sumbit button for a form be located outside the form or does it matter?

I'll start with my code.



code:--------------------------------------------------------------------------------<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0px;
padding: 0px;
}
#menu {
position: absolute;
display:block;
bottom:0px;
left:0px;
width:100%;
border:1px solid #002E80;
background-color: #E5EFFF;
}
#content{
padding: 5px;
width: 100%;
height: 100%;
overflow: auto;
z-index: 100;
}
</style>
</head>
<body>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>
<div id="menu">
<table width="100%" border="0">
<tr>
<td><div align="left">
<input type="button" name="prevBut" value="<< Prev" />
</div></td>
<td><div align="right">
<input type="button" name="nextBut" value="Next >>" />
</div></td>
</tr>
</table>
</div>
</body>
</html>
--------------------------------------------------------------------------------


The problem falls on the positioning of the scrollbar. I need it to be over my bottom menu. Right now it falls below the menu. Why is this?

Please look at this URL

http://www.finance.samif.com/Koelkast

When I select any check box on left column then one pop up is display on screen.
This image shows properly in Fire fox. When I scroll up down then image is fixed in fire fox.
Vertically and Horizontal

But when I used IE and select check box on bottom left menu then I can't see pop up image.
Because this is not display vertically middle or it is not fixed.

Please give me idea or suggestion how I can fix it.

Thanks

Hi All,

I have been working on this validated site -

http://www.edgeandbarrett.com/zub/test2/logo.htm

and it works on all browsers, mac and pc, all apart from IE7 (and 6 of course with fixed).

When viewing it, on ie7, it seems the padding is not being read, so the fixed navigation, is overlapping my content.

This is the css -
Code:

* {
margin : 0;
padding : 0;
}
img {
display : block;
border : 0;
}
body {
background-color : #eeeeee;
font-family : helvetica, arial, sans-serif;
line-height : 18px;
}
hr, .hide {
position : absolute;
top : 0;
left : 30px;
}
#site {
width : 870px;
margin : auto;
}
#header {
position : fixed;
display : inline;
height : 100%;
width : 200px;
top : 30px;
background : #eeeeee;
z-index : 4;
}
#logo {
position : relative;
top : 10px;
z-index : 5;
}
.picbar {
position : relative;
padding-top : 5px;
padding-bottom : 5px;
margin-top : 22px;
margin-bottom : 12px;
border-top : 1px solid #9f9f9f;
border-bottom : 1px solid #9f9f9f;
z-index : 6;
}
.menu {
position : relative;
width : 190px;
z-index : 7;
}
.menu .title {
font : bold 13px Georgia, "Times New Roman", Times, serif;
color : #333333;
padding : 5px 0 5px 0;
}
.menu .title a {
text-decoration : none;
color : #333333;
}
.menu .title a:hover {
text-decoration : none;
color : #940f04;
}
.menu .title a:visited {
text-decoration : none;
color : #940f04;
}
.menu ul {
list-style-type : none;
}
.menu ul li {
padding-bottom : 2px;
}
.menu ul li a {
font : normal 12px Arial;
color : #333333;
padding : 7px 0 7px 0;
line-height : 17px;
text-decoration : none;
}
.menu ul li a:visited {
color : #940f04;
}
.menu ul li a:hover {
color : #940f04;
}
.menu h1 {
padding : 5px 0 5px 0;
font-family : Georgia, "Times New Roman", Times, serif;
font-size : 13px;
color : #333333;
}
.menu a {
color : #333333;
text-decoration : none;
}
.menu a:hover {
color : #940f04;
}
#container {
position : relative;
background-color : #fff;
width : 650px;
margin-left : 220px;
padding-top : 90px;
z-index : 3;
}
#container h1 {
padding-bottom : 10px;
padding-bottom : 10px;
font-family : Georgia, "Times New Roman", Times, serif;
font-size : 13px;
color : #333333;
}
#container h2 {
padding-bottom : 10px;
padding-bottom : 10px;
font-size : 13px;
color : #333333;
}
#container p {
padding-bottom : 10px;
font-size : 13px;
color : #333333;
border-bottom : 1px solid #9f9f9f;
}
#container a {
color : #000;
text-decoration : none;
}
#container a:hover {
color : #940f04;
}
.pic {
padding-top : 5px;
padding-bottom : 5px;
margin-bottom : 18px;
border-top : 1px solid #9f9f9f;
border-bottom : 1px solid #9f9f9f;
}
.text {
background-color : #fff;
width : 420px;
padding-bottom : 30px;
font-size : 13px;
color : #333333;
}
.about {
background-color : #fff;
width : 420px;
padding-bottom : 30px;
margin-bottom : 20px;
font-size : 13px;
color : #333333;
border-bottom : 1px solid #9f9f9f;
}
.ser {
background-color : #fff;
float : left;
width : 210px;
padding-bottom : 15px;
font-size : 13px;
color : #333333;
}
.ser2 {
background-color : #fff;
float : left;
width : 210px;
padding-left : 8px;
padding-top : 47px;
padding-bottom : 15px;
font-size : 13px;
color : #333333;
}
.test {
background-color : #fff;
width : 420px;
padding-bottom : 30px;
font-size : 13px;
color : #333333;
}
.line {
background-color : #fff;
float : left;
width : 420px;
padding-bottom : 15px;
margin-bottom : 20px;
border-bottom : 1px solid #9f9f9f;
}
#footer {
position : relative;
background-color : #fff;
width : 650px;
margin-left : 220px;
padding-top : 20px;
padding-bottom : 20px;
border-top : 1px solid #9f9f9f;
z-index : 1;
}
#footer p {
font-family : Georgia, "Times New Roman", Times, serif;
font-size : 12px;
color : #505050;
text-align : left;
}
#footer a {
color : #505050;
text-decoration : none;
}
#footer a:hover {
color : #940f04;
}

I have no idea the fix, have tried display:inline; and had a look around, but am not sure what the exact problem is, and am quite new so all a bit confusing.

Any help would be really useful!!!
i have also uploaded 2 screenshots. one how it looks on all other browsers . . . and one on IE7!!!

http://www.edgeandbarrett.com/zub/test2/how%20it%20should%20look.png

http://www.edgeandbarrett.com/zub/test2/ie7.png

Its the only issue i have before i can complete site . . . . . . and really want to crack on!!!!!!

Thanks,

Orwel