He wants to put the constiution for his country online. The document was originally in pdf and he used a online website to convert the pdfs to html... But I am having hell trying to retain the the way he wants it....just as it is in the law book... ...if you guys have ever seen a law book you know you have side notes to the left of the certain sections...and they are indented( see image below)....and I am having hell......getting that format to display on the website... here is a example below or a typical page http://img43.imageshack.us/i/constitutionsamplepage.jpg/ Is there a way to make the website looking like the above pic.....so literally he wants me to convert his constitution to a website.. PS..sorry for d pop ups at imageshack
you can try inserting a clear short long spacer to indent or you can insert a ton of   s to the code
You may use tables (old fashioned) or divs (more modern). But... you will have to do that article by article.
css <ul><li> with proper text-indent, margins, etc.. will give you exactly what you are looking for.... If you don't know how to do this, take the time to read and learn. There are many places out there that offer the tools and information needed to get the job done.
Hi TazerDude, I've been manually converting Terms&Conditions PDFs to HTML for many months now (haven't found a tool that does it correctly yet, and very tedious to do by hand!) and first, the main part of your document will be various nested dl's, ol's and even ul's. What works best actually depends on how most of the document looks (you're going to be styling this with CSS, but it will need to make sense logically without CSS). You're going to want this to be as semantic as possible. If this is going to get posted on any government website, you may be liable if the page isn't accessible (depends on the government) and properly written. The image you posted, those small left texts really almost look like headers, or article names: IX Article 9: Terms of Use 1. begin first section of Article 9... Where "Terms of Use" really is a sort of header text... names the article. So if the rest of his document is like that, and that smaller text is always something that could be a header, then you might be able to have headers come before the li's text of each section and float them left. *edit example below ended up not using floats because of the li number! So, example of code: (in an ol) <li> <h3>Prescribing matters</h3> <p>Where any matter that fails to be proscribed...</p> </li> Hmm, I just realised that because the header can't be a direct child of the ol, and because we don't want the number to come before the header, we may need to absolutely position it within the li. ol li { list-style-position: inside; (make the number line up with text, not stick out) position: relative; margin-left: as large as the left "column"; } ol li h3 { position: absolute; (abso-po'd boxes without width should shrink-wrap to longest word) top: 0; left: however far from the left needed; (this will be a negative number) font-size: the tiny font size, don't go lower than the equiv of 9px though; } something kinda like that. If it looks convoluted, it is. If you want to see examples of ones I've done (but without the left column) I'll post one here. They become pretty long files, esp depending on how much you want to add to it (I've done one where every time an article referred to another article, I linked it with an in-page link, since the whole document was just one HTML page). I also see in your image some spacing inconsistancies, like a bunch of whitespace between 24. and the first set of text, while 25. doesn't have this. Does he want these as well? That makes things more difficult. You both should be clear on how print is different from the web. If getting that cross-browser is near-impossible and if he insists on making the web look like print (which, it simply doesn't) you could possibly convince yourself to try a simple table (no nesting). I don't like this idea because the differing cells would prevent use of a single ol, which semantically this is an ordered list and those numbers really should be there as part of that ol tag, not hand-typed in (the number isn't content, it marks the content).
Without any intention of contradicting what Stomme-poes has said, here is a very rough approach to aid the OP so that he/she can begin to elaborate his own solution. <html> <header> <style> #container { width: 90%; margin: 10px auto; background-color: #fff; color: #333; line-height: 130%; } #titles { float: left; width: 160px; margin: 0; padding: 1em; } #content { margin-left: 200px; padding: 1em; max-width: 36em; } </style> </header> <body> <div id="container"> <div id="titles"> <p> Prescribing matters. </p> </div> <div id="content"> <p> 24. Where any matter that falls Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> </div> </div> </body> </html> Code (markup):
Well, here's one nitpick I'll add : ) #content { margin-left: 200px; padding: 1em; max-width: 36em; } Code (markup): What this will do in IE is the max-width sets off Haslayout (in IE7 but not IE6) which means it will incorrectly apply the left margin... instead of letting it slide under the float like the modern browsers will do (and what they should do) it'll start it at the left side of the floated p. So in IE7 the margin will be much further away than in other browsers. If a regular width were set on it, IE6 would have the same problem. You could fix this by having #content also floated (left or right) and reduce the left margin cause then at least all the browsers will act about the same (well not IE6 but we know how to deal with doubled margins etc).