Please help! Used a PARA inside a span tag! Need a way out!

[sandeepapte]

Hi Friends!

I am a newbie at CSS and have been trying to learn for some time now.

Am working on the new website of my firm and though things are going well sometimes one runs into roadblocks!

Here is one and I would appreciate any help.

Please look up the test page.

http://personahr.in/carlo/

Although most things are working fine, the code is not getting validated.

I have used a PARA tag inside a span tag. I recall doing that to style a the captions below the rollover pics!

For example, hover the link over the little Van Gogh painting thumbnail.

You will see a bigger caption which says
Painter on his way to work

followed by regular text …
One of Vincent Van Gogh’s brightest, vibrant self portraits.
It was to augur Van Gogh’s most creative time in life, when he painted his finest work.

I did this by putting the bigger caption in a div and assigning it a class!

<p class="spanhover">Painter on his way to work</p>

Now I realize that a PARA (like a DIV) is NOT PERMISSIBLE inside a span tag!

What would you suggest as a way out?

All suggestions would be appreciated!

Thanks in advance and have a great day!

Sandeep

[Sumeet Chawla]

I didn’t find the place where you placed your div inside a span tag. But I saw that you have placed a paragraph within a hyerplink tag and that is not allowed in xHTML 1.0 Transitional.

Code:

[sandeepapte]

Thanks for writing in Sumeet! :D

My apologies!

Yes indeed I have placed a PARAGRAPH within a span tag! Another BLOCK element! :cry:

In my frustration, I actually later had replaced the paras with DIVs and discovered to my dismay that even that is not allowed! :oops: :cry:

Basically what I need to do is this:

When you hover the mouse over the Van Gogh Thumbnail
you would see the zoomed in image of the painting and the following text under it.

Painter on his way to work

One of Vincent Van Gogh’s brightest, vibrant self portraits.
It was to augur Van Gogh’s most creative time in life, when he painted his finest work.

I need to have ‘Painter on his way to work’
in BIG BOLD letters and a line break after it!
To accomplish that I added a para and added a class to it!

How can I get that to work is the basic question!

What element can go inside a span tag and also be styled?

Would appreciate any tips!

And yes I have fixed the & to &amp!

Thanks again!

Sandeep

[apnerve]

you can use any "inline" element instead of "p" or any such "block level element".
use a "span" and add "display:block" – property to the "spanover" class. I hope this solves the problem.

[TheDoc]

I haven’t looked that the code, but why don’t you simply just make sure that the whole thing is wrapped in a <p>?

[Author]

Posts