p and span elements

[amiw]

Hi I'm working on this code, one of the suggestions I received was to wrap the code in <p> tags. If I'm correct that's not allowed? and secondly I would like the text below the <span> tag to appear on a separate line, though I don't want to use display:block for the span, is there another way? Should I use a div tag or just place a br tag above and below the span tag?

<style type="text/css">
.code {
color: #0000cc;
}

.comment {
color: #009933;
}
</style>

<p>
<div class="code">
... bunch of text ...<br>
...more text...<br>
<span class="comment">' comment to go here</span>
... more text ...
</div>
</p>

 

[mkrausnick]

1. You can put a <p> inside a <div> but not the other way around. You can just switch them around, or you could just say

<p class="code">

2. You can wrap the comment in a <p> the same way:

<p class="comment">

unless you don't want the blank line above the comment text that this would create. If that's the case, then you would put a <br> at the beginning of the comment text.


Mike Krausnick
Dublin, California

 

[BabyJeffy]

Do you have a reason not to use display:block for the span element? It works on every browser under the sun... and is the ideal method to achieve what you want!

You can also then add margin to the span to increase the distance between it and other elements on the page if you need.

You don't wrap DIVs in Ps. You can wrap SPANs in Ps.

In fact I would change your HTML code to:

<div class="code">
<span>... bunch of text ...</span>
<span>... more text ...</span>
<span class="comment">comment to go here</span>
<span>... more text ...</span>
</div>

You can now style the spans:

div.code { color: #0000CC; margin:1em 0em 1em 0em; }
div.code span { display:block; }
div.code span.comment { color: #009933; }

This code is readable by screen readers - and is nicely scaleable (since I don't use pixels etc for placement).

Hope this makes some sense to you,
Jeff

 

[ChrisHunt]

Taking a step back...

What do you mean by [tt]<div class="code">[/tt]? What do you mean by [tt]<span class="comment">[/tt]?

Is this being used to mark up an example of program code? There's actually an HTML element for that called [tt]<code>[/tt], though it's an inline element and may not suit the case at hand. Is the comment span intended to colour a comment within the code - as some text editors do - or is it to call out a section of text that dicusses the code but isn't part of it?

My approach would be to answer those questions, mark up the HTML according to the meaning of the document, then use CSS to get it looking how I want it.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[amiw]

Jeff,
I'd rather not use span as it's meant to be inline and opening and closing span tags would be alot more code than just using <br />. There's a few posts that suggest not to use span display:block;

Chris,
Yes it's for example code.
The span is to colour comments. The class="code" will colour all the code as blue and the class="comments" will colour comments green.
I'll also add a border and background to the code class.

 

[ChrisHunt]

I'd do the HTML like this:

<div class="code">
While 1=1 do
   print "Hello World"; <span class="comment">' How Exciting</span>
</div>

then add this CSS:

div.code {
   color: #00C;
   border: 1px solid black;
   background: #CCC;
   white-space: pre; /* preserves spaces and CRs */
}

div.code .comment {
   color: #093;
}

Defining the code as [tt]white-space: pre;[/tt] means that you can leave out all the <br>s, and preserve any indenting that may be present in your code. It can be a real time-saver if you're cutting & pasting code from elsewhere. Be aware that it will switch your text to a monospaced font as a byproduct (though you can style it back again if you want to).

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[amiw]

That's a good suggestion, is there any browser compatability issues with white-space: pre;?

 

[JamesLean]

Be aware that it will switch your text to a monospaced font as a byproduct

Using [tt]<pre>[/tt] tags will do this but adding [tt]white-space: pre;[/tt] will not change the font.

--James

 

[ChrisHunt]

adding white-space: pre; will not change the font.

I stand corrected, Thanks James. AFAIK, all mainstream browsers support [tt]white-space: pre[/tt], I'm not sure about dinosaurs like NS4 or IE5.0.

If you want to be really bullet-proof regarding backwards compatibility, you could use [tt]<pre class="code">[/tt] instead of a <div>, though this will get the font-switching effect alluded to.

Some might say that <pre> is a presentational element and should thus be avoided, I'll leave that one to the theologians.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd