How to shrink a banner?

**fabrizio** · Sep 20, 2006 10:59

Hello here,
I am trying to find a way to make a banner to shrink if the user resizes the browser window.

Here is the page I am working on:

http://www.musicianspage.com/newsite/Passo11/test.html

if you try to shrink the window under 370px wide the right element gets over the left banner. Of course, I am not using the right way to reach my goal which is to keep a constant distance between the left banner and the right element by shrinking the banner as necessary. Here is the used code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
 <HTML><HEAD>
 <TITLE>Banner Test</TITLE>
 <META http-equiv="Content-type" content="text/html; charset=iso-8859-1">
 
 <STYLE type="text/css">
 <!--
 
 #topbannercont {
 	position:absolute;
 	top:35px;
 	width: 62%;
 	height: 60px;
 	overflow: hidden;   
 
 }
 
 #topbanner {
    
 	background:transparent url(images/bannertest.gif) top left no-repeat;
 	height: 60px;
 	width: auto;
    
 }
 
 
 
 #righttext {
 	position: absolute;
 	top: 55px;
 	right: 35px;
 	background: #444;
 	color:#fff;
 	width: 100px;
 	font: normal 12px/1em Verdana,Arial,Helvetica,sans-serif;
 	text-align:left;
 
   }
 
 #topad {
 	min-width: 200px;
 }
 
 -->
 </STYLE>
 
 </HEAD>
 <BODY bgcolor="#FFFFFF">
    
 		<DIV id="topad">
 			<DIV id="righttext">
 			This element must not be hidden by the image on the left. The image must shrink to the right without to cover this element.
 			</DIV>
 			<DIV id="topbannercont"><DIV id="topbanner">&nbsp;</DIV>
 			</DIV>
 		   
 		</DIV>
 
 </BODY>
 </HTML>

I tried to change the positions of the DIVs from absolute to relative by using floats, but the problem persists...

Any suggestion is very welcome! Thank you in advance.

Sincerely,

Fab.

**Avenir** · Sep 20, 2006 11:58

Hello Fab,

Try by fixing the width of the #topbanner (width: 460px)

**newdaynewdawn** · Sep 20, 2006 12:08

While I've seen alot of hacks and so on and so forth I can't say I've run into one to achieve that particular affect just yet!

I ran a test (firefox scrshot -- attached) and short of not degrading down to a really really really small resolution (phone or something) it goes pretty small already before the overlap occurs.

**fabrizio** · Sep 20, 2006 17:52

Thank you guys for your replies.

Avenir: I tried, but nothing changes. You can try yourself, I have just updated the page.

newdaynewdawn: thank you, you are right, the fact is that I'd like to know if there is a technique to avoid that no matter the size of the banner or the right element.

Thank you again.

Best,
Fab.

User Tag List

Thread: How to shrink a banner?

Thread Tools

Display

Hybrid View

How to shrink a banner?

Bookmarks

Bookmarks

Posting Permissions