js/css problem-using the width&height values obtained with js to structure my layout

**sanchopansa** · 07-21-2006, 04:26 PM

Hello!

I'm a beginner so please excuse me if I'm asking a dumn question.
I have the following problem- I have obtained the width&height values of an image with js and now I want to use them to structure the rest of my layout.
How can this be done?
Here is my source in case it could be of help to you. I want to assign the obtained w&h to the w&h of the div#container, div#footer, etc.

<!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 getImageWidth()
{
return document.getElementById("image_1").width;
}
function getImageHeight()
{
return document.getElementById("image_1").height;
}
</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;
width:
}

div#container
{
width:100%;
}

div#content
{
float:left;
margin-bottom:0.5%;
background-color:#00ccff;
}

div#news
{
float:left;
width:25%; /*i can't remove this width because the section positions itself below the content*/
margin-left:-25%;
background:#0099cc;
height:
}

div#footer
{
clear:left;
margin-top:0.5%;
background-color:#ba3f3f;
width:
}
</style>
</head>
<body>
<div id="container">
<div id="header"><h1>Header</h1></div>
<div id="content">
<img src="images/1.jpg" alt="" id="image_1" />
</div>
<div id="news">
<p><strong>3) More stuff here.</strong> very text make long silly make text very very text make long filler very make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very </p>
</div>
<div id="footer"><p>Here it goes the footer</p></div>
</div>
</body>
</html>

Thanks for your time,
Valentin

**vangogh** · 07-21-2006, 05:07 PM

You could do something like this:

var container = getElementById("container");
container.style.width = getImageWidth();

I'm wondering though why you are setting the width of the divs through javascript. I'm think there's a better and easier way to layout the page. I'm having a hard time seeing a reason to do it this way.

**sanchopansa** · 05:23 PM

Hi, vangogh!

Thanks for your reply. Here is a short description of what I have to do in this task:
I have to create a 2-column website with right navigation, header&footer.
Basically the layout has to look like this

http://i.data.bg/06/07/21/35293_orig.jpg
(the lighter blue part being the navigation)

The initial problem I couldn't deal with is that when a very wide picture is displayed the whole layout has to stretch proportionally. And mine is totally messed up

http://proba45.free.bg/HTMLPage.htm

The requirements of the task are not to resize the image, not to use overflow:hidden. I have to expand the h&f to the whole width of the page and to place the navigation in the rightmost part.
I am a beginner and tried everything that is in my knowledge (% width, em widths, no widths specified, a second container for the picture and navigation only) and nothing worked. I asked many people in some other forums but none of them had a working suggestion.

If you have an easier one (I'm not sure that the one I'm trying now will work either), I would really really appreciate it because I've been stuck for about week.

Regards,
Valentin

**vangogh** · 07-21-2006, 05:48 PM

I see the problem. I think the issue us really a design issue though. That image is just far to wide to be usuable. Without resizing the image there's is no way it's going to fit within the resolution of most people's monitors. I have a pretty large resolution on my monitor and still couldn't see the whole image without horizontal scrolling. That also means close to 100% of your visitors will never see the right column on that page.

The problem with horizontal scrolling is no one likes it. People will sooner hit their back button than scroll horizontally. The overwhelming majority of people just won't scroll horizontally.

Is there a reason you need to have an image that wide? It will need to be a very, very good reason. And in all honesty I can't think of one.

The easiest solution will probably be to set the width of the image to 100%. I added it directly to the image tag in the html. That way it will fill up 100% of the width of the content area and also grow or shrink with the size of the browser. The image won't be as large as it is now, but like I said it's just too large to be workable at the moment.

**sanchopansa** · 06:30 PM

yes, I totally agree with you that the site is not functional like this, but I am currently applying for a job as a web designer and the guys from the company told me to do it like this. I guess its not about functionality, but just to test if I can do it because it is quite unordinary for a layout.

I dropped the layout stuff and I want to tried now with the js function, but it couldn't work. Can you tell why this function is not making the width of the header equal to the width of the image:

function setHeaderWidth()
{
width=document.getElementById("image_1").width;
var header= document.getElementById("header");
header.style.width= width;
}

I really appreciate your help. Thank a lot.

**vangogh** · 07-21-2006, 06:14 PM

have you called the function anywhere? It won't run automatically the way you have it.

You can add:

window.onload = getHeaderWidth;

before closing out your script tag.

**sanchopansa** · 07-21-2006, 06:26 PM

yes, I have the <body onload="javascript:getHeaderWidth()"> declaration, but it's working neither with this nor with the one you suggested.
I'm really sorry that I bother you with this amateur stuff, but I really need a hand. I hope you are not getting pissed.

**funkdaddu** · 07-21-2006, 06:32 PM

Quote:

Originally Posted by sanchopansa

It should be just:

Code:

<body onload="getHeaderWidth();">

the "javascript:" is just for links. Better yet, just include it in your head script:

Code:

 window.onload = getHeaderWidth;

**sanchopansa** · 07-21-2006, 06:49 PM

here is what I have now

<script language="javascript" type="text/javascript">

function setHeaderWidth()
{
width=document.getElementById("image_1").width;
var header= document.getElementById("header");
header.style.width= width;
}

window.onload= setHeaderWidth;

</script>

and it's still won't change the width of the header.
btw, when I added the window.onload, the onload was not present as a property for the window. So, I tried with the <body onload="setHeaderWidth();"> but it didn't work out either.

**sanchopansa** · 07-21-2006, 06:54 PM

problem solved!!!

what had to be done was

header.style.width= width+ 'px';

Thanks so much for your help.
Kindest regards,
Valentin

**vangogh** · 07-21-2006, 08:44 PM

Oh that's right. Forgot you needed to add the 'px' Sorry I didn't catch it, but glad you got it figured out. Don't forget to let us know how the interview goes.