[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

displaying banner in different browsers

Posted on 2004-03-20
10
Medium Priority
?
192 Views
Last Modified: 2010-08-05
I had made in photoshop 6 a banner that I want it to be displayed in the full width of the browser, the banner size is 500x60 and its resolution is 72 pix/inch and it is in jpg format>
I tried to set the width and hight property in the html file, but the image was destroyed, also I tried to change the image size in photoshop but also the image was destroyed...
can somebody tell the solution and tell me also how to make the image fet all browsers????
0
Comment
Question by:romram
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2
  • +1
10 Comments
 
LVL 30

Expert Comment

by:weed
ID: 10641453
Any time you resize an image with HTML itll look UGLY. No real way around that one.
As for resizing in photoshop, NEVER resize up. If youre going to resize, resize down.
There's really no way to take a raster image, and have it resize nicely so that it fits ALL browsers. If you want something that resizes nicely, youll have to do it as a vector, flash, or SVG.
0
 
LVL 3

Expert Comment

by:echobravo316
ID: 10642824
Resize each layer in PS individually in order to maintain as much resolution as is possible.  You can make one size that is pretty close to "fits all browsers" however with so many variables like screen size/resolution etc it wont be 100%.  
0
 
LVL 30

Expert Comment

by:weed
ID: 10642835
resizing each layer individually makes NO difference in the resulting quality. Nor is it going to have anything to do with the resulting rez.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 3

Expert Comment

by:echobravo316
ID: 10642959
Well its better then resizing the picture with HTML.
0
 
LVL 30

Expert Comment

by:weed
ID: 10643030
Not really. The problem is that the image doesnt "grow" to fit larger browsers. Resizing it in Photoshop (all the layers at once, not one at a time which achieves nothing different than doing them all at once) will give you a slightly better image, but you've still hosed your quality. If you resize down in photoshop your image will look better than a resize up, but you've just gotten farther away from having it fit all browsers.
0
 
LVL 3

Expert Comment

by:echobravo316
ID: 10643580
Oh I see now.  I misunderstood the question.  Well I dont see why you couldnt find a JavaScript code that would resize the image accorgind to browser, screen resolution etc.  Try www.javascriptsource.com.  If your a more advanced web designer, try setting up several IF statements
0
 
LVL 9

Expert Comment

by:j3one
ID: 10644150
If you are just wanting it to not look odd, you could make it expand and collapse with the browser. you would just make a table and insert a small slice of the end of your immage (lke 10 px) as the background img for the table. Next nest another table inside the first one with your img in it. The code would look somthing like this...

<table background="images/exp2.gif" width="100%" height="60" border="0" cellpadding="0" cellspacing="0">
<tr><td>
<table id="Table_01" width="735" height="173" border="0" cellpadding="0" cellspacing="0">
      <tr><td><img src="images/YOUR.jpg" width="500" height="60" alt=""></td></tr>
</table></td></tr></table>

the end result would be that no matter ther screen resalution or browser size, your banner will streach all the way accross the screen.
0
 
LVL 1

Accepted Solution

by:
snapdragon030500 earned 375 total points
ID: 10689418
The majority of browers on the Web are still using 800 x 600 resolution.  I like to design headers that are 760 pixels wide, then fill in out to 1024 pixels wide with prettiness that is not important information.  That way, people with 800 x 600 resolution are missing nothing, and people with 1024 x 768 resolution see something all the way across.  People with smaller resolution than 800 see most websites cut off horizontally anyway because their monitor is just too small for modern times.  And people with larger resolution than 1024 x 768 are used to websites not filling their screens.
0
 
LVL 1

Expert Comment

by:snapdragon030500
ID: 10689419
The majority of browers on the Web are still using 800 x 600 resolution.  I like to design headers that are 760 pixels wide, then fill in out to 1024 pixels wide with prettiness that is not important information.  That way, people with 800 x 600 resolution are missing nothing, and people with 1024 x 768 resolution see something all the way across.  People with smaller resolution than 800 see most websites cut off horizontally anyway because their monitor is just too small for modern times.  And people with larger resolution than 1024 x 768 are used to websites not filling their screens.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Read about why website design really matters in today's demanding market.
This article outlines the struggles that Macs encounter in Windows-dominated workplace environments – and what Mac users can do to improve their network connectivity and remain productive.
In this tutorial viewers will learn how to create layer styles in Photoshop to easily apply effects to multiple items. Open a document in Photoshop: Apply layer styles to a layer by right clicking the layer in the Layers window and selecting "Blendi…
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.
Suggested Courses

656 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question