CSS Resize problem

Discussion in 'HTML' started by Chris Leonard, Apr 16, 2004.

  1. Hi.

    I'm quite new to CSS and I'm trying to get a page up and running. I managed
    to successfully produce what I thought was a nice page until I resized the
    browser window then everything started to move around. I have no idea why
    this is happening!!

    Could someone offer me some advice please. When I resize the window I would
    like the 'objects' to stay where they are but the window to resize. for
    example, if I drag the bottom corner of a window up and to the left I'd
    expect to see what was at the bottom right disapear and scroll bars to
    appear but the object in the top left hand corner would stay exactly where
    they are.

    Am I making sence ?

    Thanks in anticipation of your help.

    Chris



    Here is the code I'm using



    ===== Main document =====
    <head>
    <LINK REL="stylesheet" type="text/css" href="chris.css">

    </script>

    <style type="text/css">

    html {margin: 0; padding: 0; border: 0;}

    #rightwrap {position: absolute; left: 4%; top: 20%; width: 14%; min-width:
    110px;}

    #rightcol {border: 2px solid #000; padding: 0 .3em 1.5em .7em; background:
    #ffd; Height: 250px}

    #rightcol a {font-weight: bold;}

    #rightcol a:hover {color: #555cb4;}

    #rightcol ul {margin: .5em 0; padding: 0; list-style: none;}

    #rightcol li {margin: .5em 0 .5em 1em; padding: 0;}

    #rightcol h3 {font-size: 1.1em;}

    #rightcol p {margin: .3em 0 .3em 1em;}

    #bevel {position: absolute; top: 0; left: 0;}

    #bevel-lr {float: right; position: relative; top: -25px; left: 2px;}

    head:first-child+body #bevel-lr {left: 0;}

    * html #bevel-lr {left: 3px; lef\t: 0px;}

    </style>

    </head>

    <body onLoad="init()">

    <div id="header">
    <p id="headpic"><img src="images/chris.png"></p>
    </div>

    <div id="rightwrap">
    <div id="rightcol">
    <DIV id=menu>
    <DIV id=menulist>
    <ul>
    <li id=menuheading>&nbsp;</li>
    <li id=menuheading>Chris's Menu</li>
    <li><a href="#" onClick="show('bio');">Show Bio</A></li>
    <li><a href="#" onClick="show('hobby');">Hobbies / Interests</a></li>
    <li><a href="#" onClick="show('picture');">Recent Pics</a></li>
    <li><a href="#" onClick="show('books');">Favourite Books</a></li>
    <li><a href="\index.asp">Home Page</a></li>
    </ul>
    </DIV>
    </DIV>
    </div>
    <img id="bevel-lr" width="25px" height="25px" alt="" src="box-cor-lr.gif"
    />
    <img id="bevel" width="25px" height="25px" alt="" src="box-cor.gif" />
    </div>

    </body>
    </html>


    ====== Style sheet - chris.css =====

    BODY
    {
    background: #757cd4;
    font-family: verdana,sans-serif;
    font-size: 90%;
    }

    #main
    {
    LEFT: 1%;
    TOP: 1%;
    POSITION: absolute;
    }

    #header
    {
    FONT-SIZE: 150%;
    POSITION: absolute;
    WIDTH: 98%;
    HEIGHT: 5%;
    background-color: #ffd;
    text-align: center;
    padding-top: 2%;
    border: 2px solid #233622;
    margin: 8px 149px 5px 10px;
    padding: 0 5px 5px 0;
    }

    #menu
    {
    LEFT: 2%;
    TOP: 10%;
    WIDTH: 20%;
    Height: 94%;
    POSITION: absolute;
    background-color: #ffd;
    }

    #menulist
    {
    width: 100px;
    padding: 0 0 1em 0;
    margin-bottom: 1em;
    font-family: Arial;
    background-color: #ffd;
    }

    #menulist ul
    {
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
    }

    #menulist li
    {
    font-size: 90%;
    border-bottom: 1px solid #ffd;
    margin: 0;
    }

    #menuheading
    {
    display: block;
    padding: 2px 2px 2px 0.5em;
    background-color: #ffd;
    color: #000000;
    font-weight: bold;
    text-decoration: none;
    width: 100%;
    }

    #menulist li a
    {
    display: block;
    padding: 2px 2px 2px 0.5em;
    border: 1px solid #ffd;
    background-color: #ffd;
    color: #000000;
    text-decoration: none;
    width: 100%;
    }

    html>body #menulist li a
    {
    width: auto;
    }

    #menulist li a:hover
    {
    border: 1px solid #000000;
    background-color: #757cd4;
    color: #000000;
    }
    Chris Leonard, Apr 16, 2004
    #1
    1. Advertising

  2. Chris Leonard

    Neal Guest

    On Fri, 16 Apr 2004 22:05:47 +0000 (UTC), Chris Leonard
    <> wrote:

    > Hi.
    >
    > I'm quite new to CSS and I'm trying to get a page up and running. I
    > managed
    > to successfully produce what I thought was a nice page until I resized
    > the
    > browser window then everything started to move around. I have no idea why
    > this is happening!!
    >
    > Could someone offer me some advice please. When I resize the window I
    > would
    > like the 'objects' to stay where they are but the window to resize. for
    > example, if I drag the bottom corner of a window up and to the left I'd
    > expect to see what was at the bottom right disapear and scroll bars to
    > appear but the object in the top left hand corner would stay exactly
    > where
    > they are.
    >
    > Am I making sence ?



    I might take a few arrows, but what the hey...

    Might I suggest that, since you can't have any idea what the user's
    viewport is sized at, it might be better to modify your layout to fit
    changing sizes, rather than force it to be either too big for some users,
    or wasting space for others?
    Neal, Apr 16, 2004
    #2
    1. Advertising

  3. Chris Leonard

    Joshua Beall Guest

    "Neal" <> wrote in message
    news:eek:...
    > On Fri, 16 Apr 2004 22:05:47 +0000 (UTC), Chris Leonard
    > Might I suggest that, since you can't have any idea what the user's
    > viewport is sized at, it might be better to modify your layout to fit
    > changing sizes, rather than force it to be either too big for some users,
    > or wasting space for others?


    Neal is right - this is the way to go.

    But, if you *really* want a fixed width layout, it's real easy: just put
    your content inside a <div style="width: 600px;"></div> block. Adjusting,
    of course, to whatever width you really want. And you also should really
    put the width declaration in a class, rather than declaring it inline. You
    get the idea.
    Joshua Beall, Apr 16, 2004
    #3
  4. Thanks very much for the advice.

    I'll try setting the width. I'll also move it all into a class module.

    Chris
    Chris Leonard, Apr 17, 2004
    #4
  5. Chris Leonard

    Mark Parnell Guest

    On Fri, 16 Apr 2004 22:05:47 +0000 (UTC), "Chris Leonard"
    <> declared in alt.html:

    > I'm quite new to CSS and I'm trying to get a page up and running. I managed
    > to successfully produce what I thought was a nice page until I resized the
    > browser window then everything started to move around.


    Good. :)

    > I have no idea why this is happening!!


    Because that is the nature of the web. The web is inherently fluid. And
    a wonderful thing it is, too.

    http://www.allmyfaqs.com/faq.pl?AnySizeDesign

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
    Mark Parnell, Apr 19, 2004
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Rod Billett

    Phantom space and resize problem.

    Rod Billett, Oct 24, 2003, in forum: ASP .Net
    Replies:
    0
    Views:
    443
    Rod Billett
    Oct 24, 2003
  2. Luigi Donatello Asero

    Resize cells of a table (css)

    Luigi Donatello Asero, Mar 13, 2005, in forum: HTML
    Replies:
    1
    Views:
    583
    Luigi Donatello Asero
    Mar 13, 2005
  3. Replies:
    0
    Views:
    616
  4. zorro
    Replies:
    9
    Views:
    691
    Neredbojias
    Jul 6, 2007
  5. Replies:
    2
    Views:
    1,251
    Adrienne
    Feb 13, 2005
Loading...

Share This Page