Grow your CSS skills. Land your dream job.

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

  • # September 27, 2009 at 10:57 am

    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

    # September 27, 2009 at 11:32 am

    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:
  • Joel

    Joel Garner – The Big Bird

    The dreaded pace bowler has the finest economy rate in world cricket. His delivery stride had a focus which most batsmen could not handle.

Other things which invalidate your code are described in details at http://validator.w3.org/
One more thing, you cannot put the ‘&’ symbol straight away. Rather put ‘&amp;’

# September 27, 2009 at 11:50 am

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

# September 27, 2009 at 1:45 pm

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.

# September 27, 2009 at 1:59 pm

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>?

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".