How to make a 'Code' Area

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Sphenn
Forum Commoner
Posts: 48
Joined: Sun Jul 17, 2005 8:08 pm
Location: Winnipeg, MB

How to make a 'Code' Area

Post 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
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

leading spaces are converted to &nbsp pairs, there is no white-space attribute set for the CSS.
Sphenn
Forum Commoner
Posts: 48
Joined: Sun Jul 17, 2005 8:08 pm
Location: Winnipeg, MB

Post 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
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

I already told you. Reread my post. :)
Sphenn
Forum Commoner
Posts: 48
Joined: Sun Jul 17, 2005 8:08 pm
Location: Winnipeg, MB

Post by Sphenn »

Hmm... Okay.

Thanks,

Sphenn
User avatar
phpScott
DevNet Resident
Posts: 1206
Joined: Wed Oct 09, 2002 6:51 pm
Location: Keele, U.K.

Post by phpScott »

Could be done to which spec of CSS your book is refering too and how your browser currently inteprets that spec.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Re: How to make a 'Code' Area

Post 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.
Post Reply