SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Help with "fixed" positioning

    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!
    Code:
    /* 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. #2
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    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. #3
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,598
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Checke this out
    Code:
    <!--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>
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  5. #5
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,598
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    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.
    Paul O'B has actually had clients that has requested this, so it's not completely nonexistant .
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Paul O'B has actually had clients that has requested this, so it's not completely nonexistant .
    ... 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. #8
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    ... 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.
    But...it's innovative!

    ~TehYoyo


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •