GUIs - A Modest Proposal

Mon Jun 14 20:56:29 EDT 2010

On Jun 15, 11:59 am, Ed Keith <e_... at yahoo.com> wrote:
> But that is in a fixed size field,

That's why I used the same image definition in two different sized
divs to show that the images position wasn't determined by the divs
size.

> can you make the height change based on the height of the browser window, and still keep it centered?

Like this? The div is sized according to the browser window and
centered. The image is a fixed size, but still centered within the
div.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-
strict.dtd">
<html>
<head>
<style>

div {
    position: absolute;
    border: 1px solid blue;
    margin: auto;
    top: 10%;
    bottom: 10%;
    left: 10%;
    right: 10%;
    }

img {
    position: absolute;
    width:100px;
    height: 100px;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 1px solid red;
    }

</style>
</head>
<body>

<div>
<img src="image1.jpg" />
</div>

</body>
</html>

--
Cheers
Anton