[theducks]

My CSS skills are basic
I am trying to mimic the printed version.

I have an Image that is used on every chapter
On that (in the lower 1/3) I want the chapter digit (text). see attachment

The problem is if I re-flow (zoom) on my reader text, the digit moves out of place (ugly).

How do I stop the re-size of just this text (64 Images is not the answer type I want )

Existing coding :

/* Overlay Chapter digit  */

/* the code  withe the problem */

  <p class="calibre5"></p>

  <div class="overall">
    <p class="big1 calibre8 middle"><br />
    &nbsp;<br />
    &nbsp; 1</p>
  </div>

  <p class="calibre8 sgc-2"><br class="calibre2" /></p>

  
  /* ========== the CSS pieces ============*/
  div.overall {  
	display: block;
	background-image: url("../Images/image02.gif");
	background-repeat: no-repeat;
	background-position: center;
	height: 424px;
	width: 180;
  	position: relative; 
    top: 10
    }
div.middle{
	position: relative;
	margin-top: 5	
	}
  
  .big1 {
    display: block;
    font-size: 5em;
    font-weight: normal;
    margin-bottom: 0.5em;
    margin-left: 0;
    margin-right: 0;
    margin-top: .5em;
    text-align: center;
    text-indent: 0
    }
	 .calibre8 {	
    font-style: italic
    }