...

View Full Version : 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> <!-- heading -->

<div id="links">links</div> <!-- links layer -->

<div id="page_location"> <!-- page location info layer -->
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> <!-- main content -->

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

<div id="end_border"></div> <!-- end border -->
</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.
<!--[if lte IE 6]>
<style type="text/css">
#outer { padding-left: 900px; float: left; }
#inner { margin-left: -900px; }
#container { position: relative; width: 100%; }
#content { width: 630px; height: 100%;}
#right { width: 225px; }
</style>
<![endif]-->

_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:

<!--[if IE]>
<style type="text/css">
#inner{padding-left:1000px;float:left;}
#content{margin-left:-1000px;}
</style>
<![endif]-->


to my code.

thanks fir the help.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum