Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Content Moves Around.

    According to browser and page size my content moves around. How do I make it so it stays in one position. This is my coding:

    <style>

    body
    {background-image: url("http://i54.tinypic.com/309j1tw.png");
    background-position: 50% 50%;
    background-repeat: repeat-y ;

    }



    p, td
    {font-family: Century Gothic;
    font-size: 11px;
    font-weight: 500;
    color: #FFFFCC;
    text-decoration: none;}



    b
    {font-size: 12px;
    text-decoration: bold;
    margin: 0px;
    font-weight: 650;
    color: #999966;
    text-align: left;}

    i
    {color: #333333;
    font-style: italic;}

    u
    {text-decoration: underlined;
    color: #000000;
    font-size: 11px;
    }


    s
    {text-decoration: strikethrough;
    colour: #333333;
    font-size: 12px;
    }

    h1
    {
    font-size:19px;
    line-height:18px;
    text-align:right;
    background-color: 999966;
    border-bottom: 1px dotted #330000;
    color:#333333;
    font-family:Century Gothic;
    text-decoration: none;}

    h2
    {
    font-size:12px;
    line-height:13px;
    text-align:right;
    background-color: CCCC99;
    border-bottom: 1px dashed #333333;
    border-top: 1px dashed #333333;
    color:#000000;
    font-family:Century Gothic;
    text-decoration: none;}

    h3
    {
    font-size:10px;
    line-height:11px;
    text-align:left;
    background-color: ;
    border-bottom: 1px dashed #999966;
    color:#000000;
    font-family:Arial;
    text-decoration: none;}


    a:link,
    {font-family: Century Gothic;
    font-size: 10px;
    color:#000000;
    text-decoration:none;
    letter-spacing: 1px;}

    a:hover,
    {font-family: Century Gothic;
    font-size: 10px;
    color: #333333;
    letter-spacing: 1px;}




    </style>
    <br>


    <div style="position: absolute; top:100px; left:482px; width:464px; height:600px; overflow:auto;">

    <center>
    <img src=http://i56.tinypic.com/258wfic.png
    >
    </center>

    <h1> Home </h1>
    <b>Hello<br>
    </b>



    </div>

    <div style="position: absolute; top:100px; left:316px; width:145px; height:600px; overflow:auto;">
    <h2>Home</h2>
    <a href=""><h3>Home Page</h3></a>
    <br>
    <h2>Club Layouts</h2>
    <h3>Example 1</h3>
    <h3>Example 2</h3>
    <h3>Information</h3><br>
    <h2>Site Layouts</h2>
    <h3>Example 1</h3>
    <h3>Example 2</h3>
    <h3>Information</h3><br>
    <h2>Siggys</h2>
    <h3>Example 1</h3>
    <h3>Example 2</h3>
    <h3>Information</h3>


    </center>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    <div style="position: absolute; top:100px; left:482px; width:464px; height:600px; overflow:auto;">
    Absolute has some pitfalls and therefore it shouldn't be used everywhere to layout the page. Make use of floats instead, when you need to have multiple columns. Have a look at http://bonrouge.com/2c-hf-fixed.php to see some good CSS based layouts.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    You should look into some more modern html coding practices. <center> tag is obsolete and should instead be done with a page wrapper(div), a width, and auto left and right margins in your CSS.

    Also, you should try placing all those links in an unordered list instead on all thos heading tags. Not that it doesn't "work", its just not as well formed and semantic as a well formed list.
    Teed


  •  

    Tags for this Thread

    Posting Permissions

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