function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
prakash chaudharyprakash chaudhary 

Html problem

Please solve this HTML problem...

How to make the following design...

yfrog.com/keji9qp

I tried this to make it by Table but nt getting proper design so please solve it....

Best Answer chosen by Admin (Salesforce Developers) 
SFDC_LearnerSFDC_Learner

Try this:

 

It will automatically adjust the div positions based on page number.

 

<apex:page >
  <apex:form >
      <div>
            <div style="margin-left:50px;margin-top:100px;height:3px;width:500px;border:none ;background-color:#B8B8B8 ;">
                <table>
                    <tr>
                    <td>
                        <div style="margin-top:5px;margin-left:40px;float:left;">
                                           <font size="5" color="blue">25674574576</font>
                         </div>
                     </td>
                     <td>
                          <div style="margin-left:5px;height:30px;width:3px;border:none ;background-color:#B8B8B8 ;">
                          </div>
                     </td>
                     </tr>
                   </table>
            </div>
      </div>
  </apex:form>
</apex:page>

All Answers

SFDC_LearnerSFDC_Learner

Hi prakash,

 

Try this code in you vf page.

 

<apex:page >
  <apex:form >
      <div>
            <div style="margin-left:50px;margin-top:100px;height:1px;width:500px;border:2px solid;background-color:black;">
                <div style="margin-top:5px;margin-left:40px;float:left;">
                   <font size="5" color="blue">2</font>
                </div>
                 <div style="margin-left:60px;height:30px;width:1px;border:2px solid;background-color:black;">
                </div>
            </div>
      </div>
  </apex:form>
</apex:page>

 

 

 
SFDC_LearnerSFDC_Learner

Apply the colors as you want based on your requirement
prakash chaudharyprakash chaudhary

I applied the color but it is showing me like this...

yfrog.com/h7eitvp

& Since I want to use this design in footer so as i hope that i need to set margin ?
SFDC_LearnerSFDC_Learner

Hi Prakash,

Just check it in google for your required colors.

Just i took black color for div tags.

You can find different colors in google (html colors in google).

so that we can change the colors in my code.

 

Let me know, if you can't solve your problem.
prakash chaudharyprakash chaudhary

I checked with different color but not getting it with different color.

Just checkout with different color since i am nt getting ?
SFDC_LearnerSFDC_Learner

I did small changes in my code: Like this you can add your custom color to the div tags.

 

Try this:

 

<apex:page >
  <apex:form >
      <div>
            <div style="margin-left:50px;margin-top:100px;height:3px;width:500px;border:none ;background-color:#B8B8B8 ;">
                <div style="margin-top:5px;margin-left:40px;float:left;">
                   <font size="5" color="blue">2</font>
                </div>
                 <div style="margin-left:60px;height:30px;width:3px;border:none ;background-color:#B8B8B8 ;">
                </div>
            </div>
      </div>
  </apex:form>
</apex:page>
prakash chaudharyprakash chaudhary

Yaa that I did just when I got your reply....

But the problem is now here that, the text 2 is nothing but page number & when I put 20 then it crosses the right line so wht i have to do for that bcoz pdf can't be within 9 page that can be above 100 page too...

As i think that need to use javascript function that manage this margin ?

Please reply me for this....
SFDC_LearnerSFDC_Learner

Yes.

We can do it by increasing margin-left value in our code.

 

<apex:page >
  <apex:form >
      <div>
            <div style="margin-left:50px;margin-top:100px;height:3px;width:500px;border:none ;background-color:#B8B8B8 ;">
                <div style="margin-top:5px;margin-left:40px;float:left;">
                   <font size="5" color="blue">20</font>
                </div>
                 <div style="margin-left:80px;height:30px;width:3px;border:none ;background-color:#B8B8B8 ;">
                </div>
            </div>
      </div>
  </apex:form>
</apex:page>

 

Try this once.

If you have any problem, let me know.
SFDC_LearnerSFDC_Learner

Try this:

 

It will automatically adjust the div positions based on page number.

 

<apex:page >
  <apex:form >
      <div>
            <div style="margin-left:50px;margin-top:100px;height:3px;width:500px;border:none ;background-color:#B8B8B8 ;">
                <table>
                    <tr>
                    <td>
                        <div style="margin-top:5px;margin-left:40px;float:left;">
                                           <font size="5" color="blue">25674574576</font>
                         </div>
                     </td>
                     <td>
                          <div style="margin-left:5px;height:30px;width:3px;border:none ;background-color:#B8B8B8 ;">
                          </div>
                     </td>
                     </tr>
                   </table>
            </div>
      </div>
  </apex:form>
</apex:page>

This was selected as the best answer
SFDC_LearnerSFDC_Learner

Is it solves your problem.

If not solves this problem, tell me.
prakash chaudharyprakash chaudhary

Sorry for the late response,

Yaa it works for me...