How to slice a JPEG into HTML

Question

I have a JPEG image that I want to slice into HTML, I am little confused about positioning things into divs. Can anyone suggest me how can I do this I am sending the jpeg along with the question.

Regards Umair

Answer 1

I would look at what pieces seem to contain themselves. For instance, the fill out the form box would be a div, the legal info at the bottom would be a div, the why use online box would be a div, the 2 header pieces would also be a div. You could wrap the entire thing in a div and use a css sprite image ( CSS Sprite article ) for the background gradient. enter code here

<div id=pageWrapper>
   <div id=header1>OnlineGrantFinders.com</div>
   <div id=header2>Looking for grant money?</div>
   <div id=mainContent>
      <div class='infoText'>You can apply for grants ....</div>
      <div class='infoText' id='whyUseUs'>Why Use Online Grant Finders.com....</div>
      <div id=fileForm>Fill Out the form below....</div>
   </div>
   <div id='footer'>This website is owned...</div>
</div>

The css shouldn't be too difficult from here. If you don't know about floating elements I would look into that and learn how to clear them as well. The fileForm element would be best as an absolutely positioned element I would suspect.