PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
It is currently Mon Jun 18, 2018 10:11 pm

All times are UTC - 5 hours

Post new topic Reply to topic  [ 1 post ] 
Author Message
PostPosted: Wed Jan 14, 2009 12:51 pm 
Forum Newbie

Joined: Tue Dec 12, 2006 7:21 pm
Posts: 7
Hello everyone. As part of the web application I am developing, I need to place a business's logo in the form of a banner at the top of the page. This banner should adjust automatically to the user's resolution, so that it always takes up the screen's full width (it would be even better if it could adjust to the web browser's window width, as the user will not always have it maximized). I have tried several approaches to make this work, coding with html and javascript (unfortunately, I cannot use PHP or other languages on this particular issue at the moment), but I have been unsuccessful. Currently the banner is inside a table which contains a few cells, the banner on the first row (as background, although I can change it to "img scr" if need be) and a couple of links on the second row. I tried first setting the table cell's width to 100%, but this only goes as far as the banner goes (the banner is a .jpg image of 1024x75). I also tried creating several banner images for each of the following resolutions: 800x600, 1024x768, 1280x1024, 1440x900, 1600x1200, 1920x1200, and then using the following code to check the user's browser window and select a banner according to it:

Syntax: [ Download ] [ Hide ]
<TABLE border = "0">
<script type="text/javascript">
if (winwidth > 640) {
document.write('<TD width="800" height="75" valign="bottom" background="/apps/Comm/images/image800.jpg">'); //800x600
else if (winwidth > 800) {
document.write('<TD width="1024" height="75" valign="bottom" background="/apps/Comm/images/image1024.jpg">'); //1024x768
else if (winwidth > 1024) {
document.write('<TD width="1280" height="75" valign="bottom" background="/apps/Comm/images/image1280.jpg">'); //1280x1024
else if (winwidth > 1280) {
document.write('<TD width="1440" height="75" valign="bottom" background="/apps/Comm/images/image1440.jpg">'); //1440x900
else if (winwidth > 1440) {
document.write('<TD width="1600" height="75" valign="bottom" background="/apps/Comm/images/image1600.jpg">'); //1600x1200
else if (winwidth > 1600) {
document.write('<TD width="1920" height="75" valign="bottom" background="/apps/Comm/images/image1920.jpg">'); //1920x1200

However, it is not working. Actually, no banner is shown when using this approach!

A colleague suggested I split the banner into two or three separate images and work with them independently (each image on a different cell on the same row), but I cannot see how this would work.

Any suggestions? It is ok if the solution uses one or several banner images (for each resolution), as long as it can be achieved using html and/or javascript.

If you need any more details please let me know.

Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 1 post ] 

All times are UTC - 5 hours

Who is online

Users browsing this forum: No registered users and 3 guests

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group