CSS Resize problem

C

Chris Leonard

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;
}
 
N

Neal

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 ?
Click to expand...


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?
 
J

Joshua Beall

Neal said:
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?
Click to expand...

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.
 
C

Chris Leonard

Thanks very much for the advice.

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

Chris
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Working on mobile css menu with plenty of frustration! 2
Positioning CSS components 1
I need help fixing my website 2
Help with Visual Lightbox: Scripts 2
Help with my responsive home page 2
How to position the *tooltip* comment on these buttons? 9
Need help with code on website (noob) 2
Why is the e.target not working here? 1

Members online

Total: 32 (members: 1, guests: 31)
Robots: 334

Forum statistics

Threads
473,755
Messages
2,569,535
Members
45,007
Latest member
obedient dusk

Latest Threads

Top