+ Start a Discussion
jbozajboza 

Help with html header

I am developing a header for a rendered pdf. I would like for  the line that is red to be closer to the bottom boarder that is in blue text.  The text color is just to identify the lines that I need to work. I have attached a the code. This is been tough.

 

<body> <div style="width:90%; margin-left:5%; margin-right:5%; background-color:#fff;"> <div style="  border-bottom: 2px solid #000000;     margin: 55px 0 0 64px;     position: absolute;     width: 85%;"></div> <div style="width:100%;">

<table width="100%" border="0" cellspacing="0" cellpadding="0">

  <tr>

    <td width="50%" align="left"><h3 style=" font-family:Georgia; color:#000000; margin: 0 0 0 5px; padding:0px;">Law Office of</h3>

      <h1 style="font-family:times New Roman; color:#000000; margin: -8px 0 0; padding:0px;"><span style="font-family: times New Roman;     font-size: 46px;">J</span><span style="display: block;     font-family: times New Roman;     margin-left: 20px;     margin-top: -47px;">oel M. Mann</span></h1></td>

    <td width="50%" align="right"><h3 style=" font-family:Georgia; font-size: 17px; color:#000000;margin:0px; padding:0px;">601 South Seventh Street<br />

Las Vegas, Nevada 89101</h3></td>

  </tr>

</table>

<td width="70%" align="center"><h1 style=" font-family:Georgia; font-size: 17px; color:#000000;margin:0px; padding:-20px;">(702) 474-MANN  -  Fax (702) 789-1045  -  www.LegalMann.com</h1></td>

 

</div><!--header end here-->

Daniel B ProbertDaniel B Probert

why is your bottom border in red in <td>?

 

it's outside of the table so your html/pdf is a bit confused.

 

change that to a div and you should find it will be fine.

 

 

Daniel B ProbertDaniel B Probert
<body><div style="width:90%; margin-left:5%; margin-right:5%; background-color:#fff;"> <div style="  border-bottom: 2px solid #000000;margin: 55px 0 0 64px;position: absolute;width: 80%;"></div> <div style="width:100%;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="50%" align="left"><h3 style=" font-family:Georgia; color:#000000; margin: 0 0 0 5px; padding:0px;">Law Office of</h3>
      <h1 style="font-family:times New Roman; color:#000000; margin: -8px 0 0; padding:0px;"><span style="font-family: times New Roman;     font-size: 46px;">J</span><span style="display: block;     font-family: times New Roman;     margin-left: 20px;     margin-top: -47px;">oel M. Mann</span></h1></td>
    <td width="50%" align="right"><h3 style=" font-family:Georgia; font-size: 17px; color:#000000;margin:0px; padding:0px;">601 South Seventh Street<br />
Las Vegas, Nevada 89101</h3></td>
  </tr>
</table>
<div align="center"><h1 style=" font-family:Georgia; font-size: 17px; color:#000000;margin:0px;">(702) 474-MANN  -  Fax (702) 789-1045  -  www.LegalMann.com</h1></div>
 
</div><!--header end here-->

 i've slightly changed the alignment as well to get it centered nicely so set to 80% and removed the width from the bottom div as your centering it's not needed.

Kamatchi Devi SargunanathanKamatchi Devi Sargunanathan

Hi,

 

Try the following,

 

<body>
 <div style="width:90%; margin-left:5%; margin-right:5%; background-color:#fff;">
  <div style="border-bottom: 2px solid #000000; margin: 61px 0 0 60px; position: absolute; width: 86%;"></div>
 
   <div style="width:100%;">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
       <tr>    
            <td width="50%" align="left">
             <h3 style=" font-family:Georgia; color:#000000; margin: 0 0 0 5px; padding:0px;">Law Office of</h3>    
              <h1 style="font-family:times New Roman; color:#000000; margin: -8px 0 0; padding:0px;">
               <span style="font-family: times New Roman; font-size: 46px;">J</span>
               <span style="display: block;font-family: times New Roman;margin-left: 20px;margin-top: -47px;">oel M. Mann</span>
               </h1>
            </td>    
            <td width="50%" align="right">
                <h3 style=" font-family:Georgia; font-size: 17px; color:#000000;margin:0px; padding:0px;">
                    601 South Seventh Street <br />    
                    Las Vegas, Nevada 89101  <br />
                     <h1 style=" font-family:Georgia; font-size: 17px; color:#000000;margin:0px; padding:-20px;">
                        (702) 474-MANN  -  Fax (702) 789-1045  -  www.LegalMann.com
                    </h1><br/>                  
                </h3>               
            </td>         
      </tr>
   </table>
</div>
</div>
</body>

 

Hope this will help you...!

Don't forget to give Kudos and mark this answer as a Solution if this works out.

 

 

jbozajboza

Itried this and gt an error for </td>

Kamatchi Devi SargunanathanKamatchi Devi Sargunanathan
Have you checked whether you closed the <td> properly inside <tr> within <table> tag?

Please tell what error your getting, because the code i sent you works fine for me...
jbozajboza

I got error away but this does the same when I put code into the table it aligns above the bottom boarder and distrorts the stuff that I aligned left.

Daniel B ProbertDaniel B Probert

try this:

 

<apex:page renderAs="pdf" applyBodyTag="false">
<body>
<div style="width:90%; margin-left:5%; margin-right:5%; background-color:#fff;"> 
<div style="  border-bottom: 2px solid #000000;margin: 55px 0 0 64px;position: absolute;width: 80%;"> 
<div style="width:100%;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="50%" align="left"><h3 style=" font-family:Georgia; color:#000000; margin: 0 0 0 5px; padding:0px;">Law Office of</h3>
      <h1 style="font-family:times New Roman; color:#000000; margin: -8px 0 0; padding:0px;"><span style="font-family: times New Roman;     font-size: 46px;">J</span><span style="display: block;     font-family: times New Roman;     margin-left: 20px;     margin-top: -47px;">oel M. Mann</span></h1></td>
    <td width="50%" align="right"><h3 style=" font-family:Georgia; font-size: 17px; color:#000000;margin:0px; padding:0px;">601 South Seventh Street<br />
Las Vegas, Nevada 89101</h3></td>
  </tr>
</table>
<div align="center"><h1 style=" font-family:Georgia; font-size: 17px; color:#000000;margin:0px;">(702) 474-MANN  -  Fax (702) 789-1045  -  www.LegalMann.com</h1></div>
</div>
</div>
</div>
</body><!--header end here-->
</apex:page>

 this is my vf page i just tested and it loaded nicely.

 

cheers

dan

Kamatchi Devi SargunanathanKamatchi Devi Sargunanathan

Hi,

 

Can you provide the modified code of yours?

So that its easy to understand what the problem is.

 

Daniel B ProbertDaniel B Probert

it is in my previous post - basically i have moved the closing </div> from your original code.

 

so now your first 3 divs are being close </div> at the end of the code.

 

<apex:page renderAs="pdf" applyBodyTag="false">
<body>
<div style="width:90%; margin-left:5%; margin-right:5%; background-color:#fff;"> 
<div style="  border-bottom: 2px solid #000000;margin: 55px 0 0 64px;position: absolute;width: 80%;"> 
<div style="width:100%;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="50%" align="left"><h3 style=" font-family:Georgia; color:#000000; margin: 0 0 0 5px; padding:0px;">Law Office of</h3>
      <h1 style="font-family:times New Roman; color:#000000; margin: -8px 0 0; padding:0px;"><span style="font-family: times New Roman;     font-size: 46px;">J</span><span style="display: block;     font-family: times New Roman;     margin-left: 20px;     margin-top: -47px;">oel M. Mann</span></h1></td>
    <td width="50%" align="right"><h3 style=" font-family:Georgia; font-size: 17px; color:#000000;margin:0px; padding:0px;">601 South Seventh Street<br />
Las Vegas, Nevada 89101</h3></td>
  </tr>
</table>
<div align="center"><h1 style=" font-family:Georgia; font-size: 17px; color:#000000;margin:0px;">(702) 474-MANN  -  Fax (702) 789-1045  -  www.LegalMann.com</h1></div>
</div>
</div>
</div>
</body><!--header end here-->
</apex:page>
jbozajboza

I have tried as all this and still the Gap for the contact information under the bottom boarder is very large. I just want to reduce space between the contact info and the boarder.

Daniel B ProbertDaniel B Probert
i'm not sure what to suggest the code that is send displays with the line nicely underneath the address and centred. - i wish i could attach a copy of it.

what other code are you adding to the page maybe that is messing it?