Page 1 of 1

How to make a 'Code' Area

Posted: Tue Mar 28, 2006 9:34 pm
by Sphenn
Hi,

I'm trying to use some HTML and CSS to create a DIV style that will do basically what the phpBB code block does. I am hoping that I'll be able to use <div class="code"></div> and the code surrounded by those tags would be indented, preformatted, etc. I've managed to get the block indented and background colours correct, but I haven't been able how to get the preformatting look to it. The code I have so far is:

Code: Select all

div.code {
   margin: 3px;
   background-color: #DDDDDD;
}
This works fine. I've tried using

Code: Select all

white-space: pre;
in the CSS, but this doesn't quite do exactly what I wanted.

I'm going to look through the phpBB source, but tracking it down could take quite a while. If anyone would know how to do something like this, that would be greatly appreciated.

Sphenn

Posted: Tue Mar 28, 2006 9:43 pm
by feyd
leading spaces are converted to &nbsp pairs, there is no white-space attribute set for the CSS.

Posted: Tue Mar 28, 2006 9:48 pm
by Sphenn
feyd wrote:there is no white-space attribute set for the CSS.
Hmm.... that's interesting. In the book I'm using (CSS: Designing for the Web) defines the white-space property as "specifies how tabs, newlines, and white space are handled". The book also lists the possible attributes as: normal, pre, nowrap, pre-wrap, pre-line.

Would you have any suggestions as to how to achieve this?

Thanks very much

Sphenn

Posted: Tue Mar 28, 2006 10:06 pm
by feyd
I already told you. Reread my post. :)

Posted: Tue Mar 28, 2006 10:09 pm
by Sphenn
Hmm... Okay.

Thanks,

Sphenn

Posted: Wed Mar 29, 2006 2:04 am
by phpScott
Could be done to which spec of CSS your book is refering too and how your browser currently inteprets that spec.

Re: How to make a 'Code' Area

Posted: Wed Mar 29, 2006 2:12 am
by RobertGonzalez
Sphenn wrote:I'm trying to use some HTML and CSS to create a DIV style that will do basically what the phpBB code block does
Are you talking about the boxed areas that show up inside of the CODE and PHP bbCode tags? If so, view sourceof the given thread and view the CSS for this forum style to see how it is done.