Dear webdesigners,

 

Is there anybody who can help me with the following problem?

I'm making a website, but have a problem which I can't figure out myself.

You can view what I've done so far here:

http://www.densodesign.be/contekst.html

 

Problem:

The div, containing the images, should stretch (depending the screen size of the visitor) to about 50px from the bottom.

I've allready tried set the height at 100% in css, but doesn't seem to work.

 

If you can help, please let me know.

 

Thanks,

Dennis

Set the height (and min height) of The HTML, Body and DIV to 100%.

Set the height (and min height) of The HTML, Body and DIV to 100%.

 

Dear MikeChipshop,

 

Thanks for the quick reply, but if I do so the div stretches to the full length, beyond the screen size and not to 50px from the bottom.

 

As you can see know ( http://www.densodesign.be/contekst.html ), I would like it to stay within the screen size ( 50px from bottom of every screen, so I won't get a scrollbar in the window.

 

Thanks in advance.

 

Best regards,

Dennis

Hi - what browser are you using? I've checked with Chrome and Firefoxand it seems okay to me. Is it an IE issue?

It looks OK in my Firefox and IE9 but I have noticed a few things.

 

Your #wraprightcontent is width:609px; but #rightcontent inside is width:626px; which won't fit. It's probably being cut off at the right side.

 

Your images are 1268px wide scaled down to 609px wide. This works but it's better if you can resize them before you upload them, to save processing time.

 

Your images have a space between Image and 1 which a browser fills with %20 like Image%201 and this is not good. Look at Firefox Page Info/ Media to see the image url with %20. Never have a space in a filename.

 

I can only see images 1 and 2 as 3 to 10 don't show. I can only assume that they are cut off/don't fit the container which is only 535px high, as they aren't commented out.

 

Validate here http://validator.w3.org/ as all your 11 errors are about missing alt tags. Otherwise, no important errors which is good.

Edited August 22, 201115 yr by Wickham

Dear MikeChipshop,

 

Thanks for the quick reply, but if I do so the div stretches to the full length, beyond the screen size and not to 50px from the bottom.

 

As you can see know ( http://www.densodesign.be/contekst.html ), I would like it to stay within the screen size ( 50px from bottom of every screen, so I won't get a scrollbar in the window.

 

Thanks in advance.

 

Best regards,

Dennis

 

okay so we need to do a little bit of maths and javascript here, unless you want to be playing with percentages and fixed sizes which really dont go together

 

something like this will do the trick, obviously youll need to do the same but for the width unless when you resize the height it will do the width to scale

 

<script type="text/javascript">

window.onload=function(){

<!--

var height = screen.availHeight-thegap at the top-thegapatthebottom;

document.getElementById("theidoftheimagescontainer").style.maxHeight=height+'px';

//-->

}

</script>

 

so if you preset the images height to about what itll be, and then that js runs after the page has loaded, the image will be shrank to remove the scrollbar IF the gap isnt 50px basically

 

EDIT i think that should work, ive not tested, but as i read over it it all seems goood

Edited August 22, 201115 yr by web-itec

Dear,

 

Thanks for the many replies so far.

 

Still isn't working.

 

@Tim Smith:

I'm using Firefox, IE and Chrome to test the webpage.

It looks fine in these browsers on my computer as well, but when I check it on a different computer ( bigger screen) it looks silly. The images should stretch to about 50px from the bottom of every screen.

 

@Wickham:

I've set the width of the #wraprightcontent to 609px, so I won't get a scroll-bar in the #rightcontent.

Normally, works fine in my browser, you should be able to scroll down to see the rest of the images.

Thanks for the other info, very helpfull.

 

@web-itec:

 

I've tried it, but it doesn't work, probably because I don't know javascript that well.

This is what I added in my <head>.

 

 

<script type="text/javascript">

window.onload=function(){

<!--

var height = screen.availHeight-50-50;

document.getElementById("rightcontent").style.maxHeight=height+'px';

//-->

}

</script>

 

 

Thanks in advance,

Dennis

Dear,

 

Thanks for the many replies so far.

 

Still isn't working.

 

@Tim Smith:

I'm using Firefox, IE and Chrome to test the webpage.

It looks fine in these browsers on my computer as well, but when I check it on a different computer ( bigger screen) it looks silly. The images should stretch to about 50px from the bottom of every screen.

 

@Wickham:

I've set the width of the #wraprightcontent to 609px, so I won't get a scroll-bar in the #rightcontent.

Normally, works fine in my browser, you should be able to scroll down to see the rest of the images.

Thanks for the other info, very helpfull.

 

@web-itec:

 

I've tried it, but it doesn't work, probably because I don't know javascript that well.

This is what I added in my <head>.

 

 

<script type="text/javascript">

window.onload=function(){

<!--

var height = screen.availHeight-50-50;

document.getElementById("rightcontent").style.maxHeight=height+'px';

//-->

}

</script>

 

 

Thanks in advance,

Dennis

 

 

try

 

<script type="text/javascript">

window.onload=function(){

<!--

var height = screen.availHeight-50-50;

document.getElementById("rightcontent").style.height=height+'px';

//-->

}

</script>

 

try that, i was under the impression it was already filling more than the screen, that should set it TO fill the screen

Web-itec,

 

This seems to work, when I open it in my browser and press "F11" to go to full screen.

Than it's ok!

But I'd like it to do the same in my browser window?

 

Now, there's allways a small part that falls out of the window, because of the 'taskbar', and others.

 

 

<script type="text/javascript">

window.onload=function(){

<!--

var height = screen.availHeight-50-50;

document.getElementById("rightcontent").style.height= height +'px';

//-->

}

</script>

 

 

Thanks

Web-itec,

 

This seems to work, when I open it in my browser and press "F11" to go to full screen.

Than it's ok!

But I'd like it to do the same in my browser window?

 

Now, there's allways a small part that falls out of the window, because of the 'taskbar', and others.

 

 

<script type="text/javascript">

window.onload=function(){

<!--

var height = screen.availHeight-50-50;

document.getElementById("rightcontent").style.height= height +'px';

//-->

}

</script>

 

 

Thanks

 

Hmm i dont see why it should do that :/ and the taskbar height or anything, shouldnt have anything to do with it, as screen.availHeight is the browser height only, not including the task bar height, just make the numbers bigger and smaller here -50-50 and see if it does what you want, it should work though (in theory)