getting remaining height/width in %

[tiamat2012]

Hello all;

I'm trying to make my website's size fluid so that it can fit any screen. The only problem is I'm using a few images with definite pixel sizes, I was wondering if there was a way to find out the total pixel size (like 100% width = 800px)

my images at the top are 200x200, so that would allow me to change it for any browser to fill the gap between them, same for height.

do you know how I could get this value with javascript?

-Kerry

 

[BillyRayPreachersSon]

I'm lost. Do you want the image size? The page size? The free space size? And what units do you want it in? You say in your post you want it in pixels, but the post title says you want it in %.

Can you clarify your requirements?

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

And why would you want JS involved, anyway? To create a fluid layout doesn't normally require JavaScript... it normally involves a well thought-out design and good HTML and CSS. Perhaps you might try that first before resorting to JavaScript to lay out your pages.

Hope this helps,
Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[tiamat2012]

Sorry it's confusing,

I'd prefer to get it in percent, but I can only imagine a way to do it in pixel size. I want the page size.

I've thought for a while and I'm not sure how I can do it with good programming. For fluidity, which I amgoing for, I try to use %'s so that it fits every users browser, but when I have pictures, they aren't in %'s, and I don't know if there is a way to give them a fixed aspect ratio.

http://kerryj.awardspace.com/index.html,

the top right and left corners are pictures, while the top, left and right are 200x1 pictures repeating itself.

-Kerry

 

[BillyRayPreachersSon]

Images are fixed size - why would you want them to scale? I don't know of any websites that scale images along with text.

I'd forget about the image scaling thing - it's really not necessary.

Hope this helps,
Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[tiamat2012]

Ok, forgot about image scaling.


What I was talking about was just getting two columns to fit in the middle... I figured out the javascript to do it:

function fixWidth()
{
	var length, maincontent, header, changeto;
	
	length = document.body.offsetWidth - 400; // Set the width of the columns, left column = 200px, right column =  200px
	
	maincontent = document.getElementById("maincontent"); // Get center column
	header = document.getElementById("header"); // Get top column
	
	maincontent.style.width = length + "px"; // Set center column's width
    header.style.width = length + "px"; // Set top column's width
}

Thank you for your time,
Kerry

 

[snowboardr]

I think you are making things more complicated then they really need to be, why are you doing this exactly?

 

[tiamat2012]

because I want my page to be fluid for different resolutions, for instance, my dad uses 800x600, I use 1280x1024. I have widths on two columns of 200px, I need the center to be malleable to fit their size, the other option which I just thought of is giving it a 100% and z-index of 0, while the others have a z-index of 1, but basically I need everything to be centered and to look on the same on all resolutions.

-Kerry

 

[snowboardr]

Just make your table the % you want it, there are very few people who are still using 800x600 and if they are they should change the resolution I think its about 74% of internet users are above this resoultion... Scroll down on this page :

http://www.w3schools.com/browsers/browsers_stats.asp

to

to see for yourself..

Jason

 

[BillyRayPreachersSon]

I'd suggest creating a new thread in the HTML / CSS forum (forum215) on how to best go about creating a fluid design. It's something that is dicussed there quite a lot.

You *really* don't need JavaScript to do this with modern CSS support as it stands.

Hope this helps,
Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[tiamat2012]

ok, will do, thanks