Help with "fixed" positioning

Get Started
1

Hello Fellas,

I have a question. I am trying to make a page, where if I shrink it, everything will stay where it is. As in, if I have XXYYZZ, and I shrink it, I will just have XXY. My page trys to bring all of the “rest of it” with it when I try and shrink the page.

This is probably sounding confusing. Basically, I want my web design to act like a sheet of paper, where If I cut off some of the paper, the “minimized” peice I have left, is exactly the same as it would have been without.

Basically, just having the page fixed.

What would be the best method for this? Currently, I want a Layout like… VALUE XXXXXX VALUE.

Thank you guys/gals!

/* CSS for mainpage.html() */

body {
  /* */
  font-family: Verdana, Helvetica, Arial, sans-serif;
  background-color: gray;
  margin: 0; }
#headeri {
  overflow: hidden;
  background-color: #F5F5DC;
  height: 6.5em;
  border-bottom: 1px dotted gray;}

#titlei {
  padding-left: 13px;
  float: left;
  line-height: 65% }

#slogani {
  padding-left: 16; }




#followi {
  float: right;
  border-left: 1px dotted gray;
  padding-left: 8px;
  padding-right: 13px;
  line-height: 50%;
   }
2

Are you sure you want to do this? It’s a terrible thing for accessibility and it won’t display properly. Keep in mind that most people don’t browse full screen (and therefore monitor resolution is slightly inaccurate - only an indicator._

~TehYoyo

3

Well, I would like to know how to do it, for a few reasons.
Mostly for practice. The thing is, like this website, everything stays the same when you resize.

4

Checke this out :slight_smile:

<!--romo(kurt, barber, smith), phin(wck, blue, rageirish), prism(ap, lpu, muras), gg(reed, kobe, limit21), rarrar(lemnos, devin, tylaw)--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html,body{
    margin:0;
    padding:0;
}
h1,p{margin:0 0 1em}
#page {
    width:760px;
    margin: auto;
    text-align:left;
    background:red;
        position:relative;
        z-index:2;
}
#adholder {
    width: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}
#adinner {
    width:760px;
    margin:auto;
}
.adright{
    width:160px;
    position: relative;
    margin:0;
    float:left;
    height:600px;
    overflow: hidden;
    background:#52b502;/* for testing */
    z-index:99;
        display:inline;
}
.adright{float:right;left:170px;}


</style>
</head>
<body>
<div id="adholder">
<div id="adinner">
    <div class="adright">Advert goes here</div>
</div>
</div>
<div id="page">
<h1><a href="#">Centred page content goes here</a></h1>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
</div>
</body>
</html>
5

  1. CSS without the markup it’s applied to is gibberish.

  2. Ever notice you don’t see a lot of websites doing that… ask yourself the question “Is there a reason for that?”

TehYoyo hit it on the head, it’s not something you should be even trying to do in the first place, unless you really feel the need to drive visitors away from your website.

6

Paul O’B has actually had clients that has requested this, so it’s not completely nonexistant :).

7

… and probably six months later threw it away or asked to have it undone. I’ve seen that a good deal, where the client asks for something ‘nobody else seems to be doing’ without asking the question “Is there a reason for that”.

Though as I said, you “don’t see a lot” – leaving room for there to at least be some.

Said ‘some’ probably having lifespans measured in months in terms of active traffic.

8

But…it’s innovative! :smiley:

~TehYoyo