sanchopansa
22 Jul 2006, 05:03 PM
Hello,
Excuses for the long post. I'm stuck with the following problems. I want to proportionally shrink/expand the layout below when the browser resizes. I can't get the new dimensions of the browser window- how should this be done?
I also want to expand it if it displays a small image to the dimensions of the browser window. Here is a diagram of what I mean: (h-header, f-ft, n-nav, i-img, b-background)
------------------------------------------------
| hhhhhhhhhhhh
| iiiiiiiiiiii nnnnnnn
| iiiiiiiiiiii nnnnnnn
| iiiiiiiiiiii nnnnnnn
| fffffffffffffffffff
|
|
|
|
|
------------------------------------------------
Basically I want this to happen:
------------------------------------------------
| hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh|
| iiiiiiiiiiii bbbbbbbbbbbbbbbbbbbbbbbbbbbbnnnnnnn|
| iiiiiiiiiiii bbbbbbbbbbbbbbbbbbbbbbbbbbbbnnnnnnn
| iiiiiiiiiiii bbbbbbbbbbbbbbbbbbbbbbbbbbbbnnnnnnn
| bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
|
|
|
| bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb|
| fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff|
------------------------------------------------
You can see that the background is not visible when a small picture is displayed.
Is there a way to accomlish this using javascript? In the code that I've pasted what should be changed to make the same things if text displayed.
I'm still an amateur so I would really appreciate your help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Layout 1</title>
<script language="javascript" type="text/javascript">
function setHeaderWidth()
{
var news= document.getElementById("news");
var newsWidth= news.offsetWidth;
var width=document.getElementById("image_1").width;
var header= document.getElementById("header");
header.style.width= width + newsWidth + 'px';
}
function setFooterWidth()
{
var news= document.getElementById("news");
var newsWidth= news.offsetWidth;
var width= document.getElementById("image_1").width;
var footer= document.getElementById("footer");
footer.style.width= width + newsWidth + 'px';
}
function setNewsHeight()
{
var height=document.getElementById("image_1").height;
var news= document.getElementById("news");
news.style.height= height + 'px';
}
function setNewsPosition()
{
var news= document.getElementById("news");
var newsWidth= news.offsetWidth;
news.style.left= newsWidth + 'px';
}
function setContentHeight()
{
var height= document.getElementById("image_1").height;
var content= document.getElementById("content");
content.style.height= height + 'px';
}
function Caller()
{
setHeaderWidth();
setFooterWidth();
setNewsHeight();
setNewsPosition();
setContentHeight();
}
</script>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
html,body
{
margin:0.5% 0.5% 0.5% 0.5%;
padding:0;
display:inline-block;
}
body
{
font: 76% arial,sans-serif;
}
div#header h1
{
height:80px;
line-height:80px;
margin-bottom:0.5%;
padding-left:10px;
background-color:#ff9999;
}
div#container
{
width:100%;
}
div#content
{
float:left;
margin-bottom:0.5%;
background-color:#00ccff;
}
div#news
{
float:left;
width:25%;
margin-left:-25%;
position:relative;
background:#0099cc;
}
div#footer
{
clear:left;
margin-top:0.5%;
background-color:#ba3f3f;
padding-left:4px;
height:30px;
line-height:30px;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
div#content
{
margin-bottom:0;
}
</style>
<![endif]-->
</head>
<body onload="Caller();">
<div id="container">
<div id="header"><h1>Header</h1></div>
<div id="content">
<img src="images/1.jpg" alt="" id="image_1" width="200" height="300"/>
</div>
<div id="news">
<p>Navigation</p>
</div>
<div id="footer"><p>Here it goes the footer</p></div>
</div>
</body>
</html>
Thank you for your time.
Kindest regards,
Valentin
Excuses for the long post. I'm stuck with the following problems. I want to proportionally shrink/expand the layout below when the browser resizes. I can't get the new dimensions of the browser window- how should this be done?
I also want to expand it if it displays a small image to the dimensions of the browser window. Here is a diagram of what I mean: (h-header, f-ft, n-nav, i-img, b-background)
------------------------------------------------
| hhhhhhhhhhhh
| iiiiiiiiiiii nnnnnnn
| iiiiiiiiiiii nnnnnnn
| iiiiiiiiiiii nnnnnnn
| fffffffffffffffffff
|
|
|
|
|
------------------------------------------------
Basically I want this to happen:
------------------------------------------------
| hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh|
| iiiiiiiiiiii bbbbbbbbbbbbbbbbbbbbbbbbbbbbnnnnnnn|
| iiiiiiiiiiii bbbbbbbbbbbbbbbbbbbbbbbbbbbbnnnnnnn
| iiiiiiiiiiii bbbbbbbbbbbbbbbbbbbbbbbbbbbbnnnnnnn
| bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
|
|
|
| bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb|
| fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff|
------------------------------------------------
You can see that the background is not visible when a small picture is displayed.
Is there a way to accomlish this using javascript? In the code that I've pasted what should be changed to make the same things if text displayed.
I'm still an amateur so I would really appreciate your help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Layout 1</title>
<script language="javascript" type="text/javascript">
function setHeaderWidth()
{
var news= document.getElementById("news");
var newsWidth= news.offsetWidth;
var width=document.getElementById("image_1").width;
var header= document.getElementById("header");
header.style.width= width + newsWidth + 'px';
}
function setFooterWidth()
{
var news= document.getElementById("news");
var newsWidth= news.offsetWidth;
var width= document.getElementById("image_1").width;
var footer= document.getElementById("footer");
footer.style.width= width + newsWidth + 'px';
}
function setNewsHeight()
{
var height=document.getElementById("image_1").height;
var news= document.getElementById("news");
news.style.height= height + 'px';
}
function setNewsPosition()
{
var news= document.getElementById("news");
var newsWidth= news.offsetWidth;
news.style.left= newsWidth + 'px';
}
function setContentHeight()
{
var height= document.getElementById("image_1").height;
var content= document.getElementById("content");
content.style.height= height + 'px';
}
function Caller()
{
setHeaderWidth();
setFooterWidth();
setNewsHeight();
setNewsPosition();
setContentHeight();
}
</script>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
html,body
{
margin:0.5% 0.5% 0.5% 0.5%;
padding:0;
display:inline-block;
}
body
{
font: 76% arial,sans-serif;
}
div#header h1
{
height:80px;
line-height:80px;
margin-bottom:0.5%;
padding-left:10px;
background-color:#ff9999;
}
div#container
{
width:100%;
}
div#content
{
float:left;
margin-bottom:0.5%;
background-color:#00ccff;
}
div#news
{
float:left;
width:25%;
margin-left:-25%;
position:relative;
background:#0099cc;
}
div#footer
{
clear:left;
margin-top:0.5%;
background-color:#ba3f3f;
padding-left:4px;
height:30px;
line-height:30px;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
div#content
{
margin-bottom:0;
}
</style>
<![endif]-->
</head>
<body onload="Caller();">
<div id="container">
<div id="header"><h1>Header</h1></div>
<div id="content">
<img src="images/1.jpg" alt="" id="image_1" width="200" height="300"/>
</div>
<div id="news">
<p>Navigation</p>
</div>
<div id="footer"><p>Here it goes the footer</p></div>
</div>
</body>
</html>
Thank you for your time.
Kindest regards,
Valentin