Copy link to clipboard
Copied
For my webhelp project, in the header area of my master page, I have select an image, which serves as a banner.
On the Header Properties Shading tab, the Left option is selected for the X field. This means that the left side of the banner is fixed to the left side of the help screen and will always be visible regardless of how the screen is resized.
The problem is the right-side of the banner, which will not be visible if I resize the help screen to to less than the banner width, or will display incorrectly if I resize the screen greater than the banner width.
Is there a way to fix the image so that the entire banner will be visible regardless of the screen size?
I am using RoboHelp Version 8.0.2.
Copy link to clipboard
Copied
Hi there
I've seen many web pages where this is done. I do believe the commonly accepted approach is to configure your banner such that the width is far wider than you ever expect the user to have. For example, perhaps determine the largest resolution that is likely to be in use, then add a few pixels to the width to be sure. That way the full banner displays and if the browser is narrower, there are parts that simply aren't shown.
Cheers... Rick
Helpful and Handy Links RoboHelp Wish Form/Bug Reporting Form Begin learning RoboHelp HTML 7 or 8 moments from now - $24.95! |
Copy link to clipboard
Copied
Hi Rick,
I thought of that, but the problem is that there is an icon on the left side and the right side,
Regards,
Chaim Rosenblum
crosen1966@yahoo.com
Copy link to clipboard
Copied
Hi,
If I understand correctly, the banner has three parts:
1. A repeating background.
2. An image that is on the left side
3. An image that is on the right side
You can cut up the image. Have the background repeat on the entire page and position the other images relative to the browser width so they reposition when the browser is scaled.
Example with a background and an image:
div.header {
width: 100%;
height: 75px;
line-height: 60px;
background: url(images/title.png) repeat-x left bottom;
position: relative;
z-index: 10;
}
div#melodies {
width: 332px;
height: 56px;
background: transparent url(images/melodies.png) no-repeat right top;
position: absolute;
top: 0;
right: 0;
}
The HTML is:
<div class="header"><div id="melodies"></div></div>
Greet,
Willam