Questions about SPAN and DIV using CSS

[KingAuthor]

Hi, I'm at a bit of a standstill with my epub in Sigil. I suspect it's more tunnel vision than not. I'm about done with formatting my book in Sigil, however another problem has reared it's ugly head. I have 36 html sections and 3 external CSS. SS#1 is strictly for headings (H1,H2, etc.), SS#2 is for the majority of my paragraph styling (which is align:justified), and SS3 is only for sections that have all content centered. I did it this way to simplify things in my head. So, my problem deals with the last html section where I have SS1 and SS2 linked. Besides the header and paragraph content, I have a link at the bottom that I wanted centered on the page. I decided use SPAN to do inline styling without creating a line break, since it's just the one line. I added this to SS2:

}

span.link {
text-align: center;
}

And this to my code:

<p><a href="http://www.overmyheadwithCSS.com/gp/product/B016S96QEA">span class="link"><View on Headcase.com</span></a></p>

...and nothing changed. So I removed "span" from the "span.link" on CSS, thinking I was applying it wrong. But still no centered link. Then I used this:

}

div.link {
text-align: center;
}

and changed my code to:

<p><a href="http://www.overmyheadwithCSS.com/gp/product/B016S96QEA">div class="link"><View on Headcase.com</div></a></p>

and VIOLA! The link was centered! But now Sigil validation gives me this error:

element 'div' is not allowed for content model '(br|span|bdo|map|object|img|svg|tt|i|b|big|small| em|strong|dfn|code|q|samp|kbd|var|cite|abbr|acrony m|sub|sup|input|select|textarea|label|button|ins|d el|script)'

I'm really new to this and it's been a crash course of bleary eyes and spontaneous profanity. I think this is a simple fix, but I'm too simple to understand? Shouldn't "span" work "inside" a style?

[theducks]

Div is a Block level and can not contain another block

Are you trying to style the 'text'? Simply apply the style to the <p

[KevinH]

If the entire paragraph is just the link to be centered, have you thought about adding the css and link class to that final p tag. Or replace the p tag with a div. But trying to centre some span tag in the middle of a p tag is not a good idea.

[KingAuthor]

Div is a Block level and can not contain another block

Are you trying to style the 'text'? Simply apply the style to the <p

__________________________________________________ ____________________

Thanks, TheDucks. The Div rule is good to know. That explains the error. By applying the style to the p, do you mean "align-text: centered" in the p tag? I had to wipe a ton of "attribute "align" not declared for element "p" statements from the document, even though it was in my stylesheet.

[KingAuthor]

Originally Posted by KevinH

If the entire paragraph is just the link to be centered, have you thought about adding the css and link class to that final p tag. Or replace the p tag with a div. But trying to centre some span tag in the middle of a p tag is not a good idea.

Thanks, KevinH. Wouldn't replacing the p with a div still give me a div within a div? I added the css and link class to that final p tag, and that didn't work. Am I misunderstanding what you're telling me?

[KevinH]

You do not need or want the internal span/div tag. use just the p tag alone with the proper class and no span or div. Or remove span and replace p tag with div. You do not need the nesting. And fwiw, div tags can be nested in div tags, you just don't need it.

Simply center a p tag or center a div, don't try to center a span inside of a p

[KingAuthor]

Originally Posted by KevinH

You do not need or want the internal span/div tag. use just the p tag alone with the proper class and no span or div. Or remove span and replace p tag with div. You do not need the nesting. And fwiw, div tags can be nested in div tags, you just don't need it.

Simply center a p tag or center a div, don't try to center a span inside of a p

Thanks for the clarification, KevinH! Much appreciated. I'll try that tonight!

[rubeus]

What's the relation ship with Sigil? Why isn't this moved to the epub forum?

[DiapDealer]

It's OK to wander occasionally. They are using Sigil to do what they're doing.

[rubeus]

What for is the epub forum than? This is Sigil, and the questuon is about html(epub2), I'm using Windows to run Sigil, and i'm not asking in Windows forums about that.

[KingAuthor]

KevinH and the Ducks, thanks again for your help with coding in SIGIL. All is working, and SIGIL Flightcrew validation shows my doc as error-free. Now, off to look at that new SIGIL version KevinH posted about...

[Jellby]

Originally Posted by theducks

Div is a Block level and can not contain another block

That's not exact. <div> is a block-level tag and can contain block or inline level tags. If I remember correctly inline tags (like <span>) can contain block level tags too, and the "type" of any tag (at least to the extent of how they are rendered) can be changed with the CSS "display" property.

But <p> is a special case. It cannot contain block-level tags, not because it's block-level itself, but because it's <p> and it's defined that way. And the tags it cannot contain are those defined as block level by default, even if you change their "display". So this is forbidden:

<p><div>Foo</div></p>

But this is allowed and should have the same effect as intended:

<p><span style="display:block">Foo</span></p>