layers - catch 22 or is there a way around it

superman

10-05-2006, 09:21 PM

If I use percentage to define width of a layer etc and make the browsers width narrower the content shrinks but if I use pixels and make the browsers width narrower the content doesnt shrink. I want to use percentages so appearance will be centered on all types of monitors.

e.g.
<div id="PageLocation" style="position:absolute; width:70%; left: 15%; height:50px; z-index:1; background-color:#990000; top: 200px;">Page location Page location Page location Page location Page location Page location</div>

if i make the browser narrow it will appear like

Page location
Page location
Page location
Page location etc

instead of Page location Page location Page location Page location etc

Is there a way of stopping this?

P.S have attached current code with layout

rmedek

10-05-2006, 10:01 PM

You can use min-width:

#container {
min-width :20em; /* adjust to the necessary width */
}

IE doesn't support this but IE7 will; for IE6 you can use this javascript (http://www.doxdesk.com/software/js/minmax.html).

superman

10-07-2006, 12:11 AM

min-width works well, tried the javascript for IE but doesnt seem to work. anyone know any reasons why.

_Aerospace_Eng_

10-07-2006, 12:26 AM

We need to see your code for us to tell you why. You should also read this thread. http://www.codingforums.com/showthread.php?t=97590

superman

10-07-2006, 08:20 PM

This is my CSS
/* CSS Document */

body
{
background-color:#EEEEEE;
}

#heading
{
position:absolute;
width:70%;
left: 15%;
min-width:44em;
max-width:50em;
min-height:100%;
z-index:1;
height:100px;
background-color:#00CC00;
top: 50px;
overflow:auto;
}

#links
{
position:absolute;
width:70%; left: 15%;
min-width:44em;
max-width:50em;
min-height:100%;
z-index:1;
height:50px;
background-color:#003366;
top: 150px;
}

#page_location
{
position:absolute;
width:70%;
left: 15%;
min-width:44em;
max-width:50em;
min-height:100%;
z-index:1;
height:50px;
background-color:#990000; top: 200px;
overflow:visible;
}

#main
{
position:absolute;
width:70%;
left: 15%;
min-width:44em;
max-width:50em;
min-height:100%;
z-index:1;
height:400px;
background-color:#9900CC;
top: 250px;
}

#end
{
position:absolute;
width:70%;
left: 15%;
min-width:44em;
max-width:50em;
min-height:100%;
z-index:1;
height:50px;
background-color:#FFFF00;
top: 650px;
}

#end_border
{
position:absolute;
width:70%;
left: 15%;
min-width:44em;
max-width:50em;
min-height:100%;
z-index:1;
height:50px;
background-color:#EEEEEE;
top: 700px;
}

This is my index page layout:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="cssfile.css">
</head>
<script type="text/javascript" src="minmax.js"></script>
<body>
<div id="heading">heading</div> 

<div id="links">links</div> 

<div id="page_location"> 
Page Page Page Page Page Page Page Page Page Page Page Page Page Page Page Page Page Page Page Page
</div>

<div id="main">MAIN</div> 

<div id="end">End</div> 

<div id="end_border"></div> 
</body>
</html>

the JavaScript i got from the link above doesnt seem to be working for IE6

is there any other way of stopping the shrinking other than something like
* html #main{width:800px};

_Aerospace_Eng_

10-07-2006, 09:28 PM

Did you read that thread?

superman

10-07-2006, 09:51 PM

yeah had a read thru it got the
* html #main{width:683px}; from it. that works. it just means my page isnt exaclty centered if i view it on my laptop.
i picked up the container div from the thread. Should i be using one.
Also should i be using this bit of code.

_Aerospace_Eng_

10-07-2006, 10:00 PM

You read the wrong thing. Yes the thing above is a variation of what you should be using. http://www.pmob.co.uk/temp/min-width-ie.htm (view the source).

superman

10-08-2006, 04:28 PM

have it working
added:


to my code.

thanks fir the help.