Help with CSS, anyone?

[rogue_ronin]

Originally Posted by rogue_ronin

So, make <br class="SceneBreak" /> and <br class="PageBreak" /> and add something like this to CSS:

br.SceneBreak {
display:none;
}

br.SceneBreak:after {
content:"* * *";
text-align:center
}

br.PageBreak {
display:none;
}

br.PageBreak {
page-break-after:always;
}

'course, it didn't quite work! The display:none kills the other effects, so that has to go. (Isn't it fun to watch the silly noob? )

But the page-break-after:always for the PageBreak class works a treat. The only drawback is that you won't get a horizontal rule when you insert a manual page-break that would be visible in a normal browser. You do get a blank line. Since I'm drawing a bottom-border on my divs that page-break, I think I'm going back to the hr for this one.

On the other hand, a blank line is great for a scene-break; but I don't seem to be able to generate the content "* * *" -- or any other content.

Here's what's in the CSS now:

br.SceneBreak:after {
content:"* * *";
}

Why won't the asterisks show up when I insert a <br class="SceneBreak" /> to the xHTML?

m a r

[Jellby]

Originally Posted by rogue_ronin

On the other hand, a blank line is great for a scene-break; but I don't seem to be able to generate the content "* * *" -- or any other content.

Here's what's in the CSS now:

br.SceneBreak:after {
content:"* * *";
}

Why won't the asterisks show up when I insert a <br class="SceneBreak" /> to the xHTML?

I don't think <br> can have any content at all, it's an empty tag, like <hr>. And I believe it's not a block-level element, it has to be contained into a paragraph, div, or something else (it's maybe fine for you if you have a div around everything, but not for me).

[rogue_ronin]

Originally Posted by Jellby

I don't think <br> can have any content at all, it's an empty tag, like <hr>. And I believe it's not a block-level element, it has to be contained into a paragraph, div, or something else (it's maybe fine for you if you have a div around everything, but not for me).

Well, you're right, it is contained in a div. But, technically it's not containing anything, is it? It's the pseudo-element :after that's containing the content, with the content attribute.

Or am I completely off-base here?

m a r

EDIT: yeah, Jellby, looks like you're right. I tried it with an image tag, too, and it doesn't work, but the header tags take it just fine. Guess you can apply the pseudo-element only to containers that hold content already. Bummer. I was hoping to keep it simple...

[Jellby]

Originally Posted by rogue_ronin

EDIT: yeah, Jellby, looks like you're right. I tried it with an image tag, too, and it doesn't work, but the header tags take it just fine. Guess you can apply the pseudo-element only to containers that hold content already. Bummer. I was hoping to keep it simple...

I'd say the pseudo-element :after still includes content inside the main element inside. If you use it for a styled element (like a header), does the :after content use the same style (font, color, etc.)? If it does, it confirms that it is still inside the element, although after the explicit content.

[rogue_ronin]

Originally Posted by Jellby

I'd say the pseudo-element :after still includes content inside the main element inside. If you use it for a styled element (like a header), does the :after content use the same style (font, color, etc.)? If it does, it confirms that it is still inside the element, although after the explicit content.

It does, which makes sense (after I've thought about it.) It's pseudo after all.

What is strange is that a couple of the examples I looked at suggested that content can be added after items like images -- but if you can't add text, what can you add?

I was hoping to add display of an attribute (title) after an image, using the content:attr(title) construction, but no go.

m a r

ps: my first shot at a CSS is nearly done. It required minor tweaking of the html, so I'll include both when it's ready. Hope some folks will take a look at it.

[rogue_ronin]

Here's the latest version of the html, the images and the CSS. If anyone has some feedback, it'd be great.

I got rid of the high-contrast, inverse theme. I know that would not be popular!

Thanks,

m a r

[AlexBell]

Originally Posted by rogue_ronin

Here's the latest version of the html, the images and the CSS. If anyone has some feedback, it'd be great.

I got rid of the high-contrast, inverse theme. I know that would not be popular!

Thanks,

m a r

I really admire the enormous amount of work you have put into this, and it looks good in a browser.

But I hope you don't mind me pointing out that the W3C Markup validation service at http://validator.w3.org/ finds 167 errors in the XHTML, and the W3C CSS validation service at http://jigsaw.w3.org/css-validator/validator finds 2 errors in the CSS.

Many of the errors in the XHTML are minor, like leaving out alt in the markup for an image. But I've learned from bitter experience that even minor errors can come back to bite you.

Regards, Alex

[rogue_ronin]

Originally Posted by AlexBell

I really admire the enormous amount of work you have put into this, and it looks good in a browser.

But I hope you don't mind me pointing out that the W3C Markup validation service at http://validator.w3.org/ finds 167 errors in the XHTML, and the W3C CSS validation service at http://jigsaw.w3.org/css-validator/validator finds 2 errors in the CSS.

Many of the errors in the XHTML are minor, like leaving out alt in the markup for an image. But I've learned from bitter experience that even minor errors can come back to bite you.

Regards, Alex

No problem at all, and thanks for the compliment, too!

My subconscious must be as quick as you are (but not my conscious mind, it's a turns like a battleship) -- I was nosing around in my text editor (NOTETAB, HOOAH!) and it has a menu entry to run tidy.exe. Just had to download it, and stick it in the NoteTab directory. So I ran it and found most of those errors, too!

I fixed all the alt tags, and updated the macros to add them. And I found the silly unclosed img tags and fixed those (and their macros.) There were a couple of regex-missed strong tags -- got 'em. Now tidy reports no errors!

What were the CSS errors, can I ask? The zipfile attached here has a new one, so maybe no errors now... and it has some additional table icons. (I may add a basic map of Barsoom, so I added the symbol for the map tables -- plus it makes the tables consistent to all have an icon/button, so I added Tables, too.)

Give this a try, if you have time, and let me know. I have made the covers for the next four books in the series, and I expect I should be able to knock them all out with the same CSS. The next ones could all come very quickly once this is settled in place.

Thanks AlexBell! I definitely appreciate the feedback.

m a r

EDIT: I ran the CSS through the validator -- it's clean now! One text/font mixup, one bad value and three floats that had no width (which I had no idea was necessary.) Thanks for the link!

EDIT 2: I wasn't sure if I had updated the CSS and HTML in this zip, so I switched to a new zip. If you downloaded it (and one person did!) you may want to re-download.

[AlexBell]

Originally Posted by rogue_ronin

No problem at all, and thanks for the compliment, too!



EDIT: I ran the CSS through the validator -- it's clean now! One text/font mixup, one bad value and three floats that had no width (which I had no idea was necessary.) Thanks for the link!

EDIT 2: I wasn't sure if I had updated the CSS and HTML in this zip, so I switched to a new zip. If you downloaded it (and one person did!) you may want to re-download.Attachment 32571

Congratulations. I know the good feeling of nailing that last error.

The attachment you have at the end of your post doesn't seem to work, but I've downloaded the one below the post and will try to get to in tonight.

Regards, Alex

[AlexBell]

PS I think you'll find that HTML Tidy is more of a lint cleaner than a validator - unless it's been extended since the last time I used it. I recommend that you use the W3C HTML validator if you haven't already done so.

Regards, Alex

[rogue_ronin]

Originally Posted by AlexBell

The attachment you have at the end of your post doesn't seem to work, but I've downloaded the one below the post and will try to get to in tonight.

That is some kind of forum bug -- I'll see if I can edit it. The one below is correct, I believe.

PS I think you'll find that HTML Tidy is more of a lint cleaner than a validator - unless it's been extended since the last time I used it. I recommend that you use the W3C HTML validator if you haven't already done so.

Yeah? I'll give it a try, but I think they keep tidy pretty up-to-date. Perhaps it doesn't do structural checks, though. I'll have to read up. It did point out about a hundred or so errors! (Mostly alt tags.) And it's very conveniently located in my menu!

I'll be starting on the second book very soon. I built a template for the CSS, so double-click and boom!(But haven't made it a wizard yet, for customizing.) And I made a cover for book six last night. Hopefully this'll just be smooth sailing now. At this point, the covers should be much more work.

m a r

ps: y'know, it occurs to me that the navlink images may not show up so well on a grey-scale reader. I have three other navlink themes, all of which are in monochrome (modded from my REB1100 days.) They're not nearly as attractive, nor do they suit the book as well... Without javascript, is there a simple way to select the proper set? Should I bother?

[rogue_ronin]

BTW, it validated, except for a warning about defining character-encoding. Off to read... Unless someone wants to give me a tip? I think it's in the DOCTYPE head or the XMLNS?

EDIT: the validator had a link -- proper for xHTML 1.1:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

placed inside the head. Done, macros updated!

EDIT II: OH NOES! A flaw in NoteTab!!1!!one! NoteTab is not a utf-8 editor! So I will have to insert the following instead:

<meta http-equiv="Content-Type" content="text/html;charset=windows-1252" />

So close to perfect...

Wait! It's the flaw that enhances the beauty! Like a crappy frame on a masterpiece, or a supermodel with a crooked nose!

Ah, I feel better.

m a r

[AlexBell]

Originally Posted by rogue_ronin

Yeah? I'll give it a try, but I think they keep tidy pretty up-to-date. Perhaps it doesn't do structural checks, though. I'll have to read up. It did point out about a hundred or so errors! (Mostly alt tags.) And it's very conveniently located in my menu!

I don't think it's a matter of being up to date - HTML Tidy and the W3C validator service have different (even if overlapping) functions. Tidying up lint and errors is not the same as validating to W3C standards, as I think you found out when you used the validation service.

I don't think I can be of much more help to you, partly because I have only just started to learn something of XHTML 1.1 (the template I uploaded last night asking for comments is in XHTML 1.0) and partly because my taste lies towards the simple, even austere, in markup. I don't doubt for a moment that your XHTML and CSS are organised logically and systematically, but they are so complex that at my level I can't comprehend the pattern.

I've found it very hard to get much information about XHTML 1.1; could you tell me please what sources you used?

Regards, Alex

[rogue_ronin]

Originally Posted by AlexBell

I don't think it's a matter of being up to date - HTML Tidy and the W3C validator service have different (even if overlapping) functions. Tidying up lint and errors is not the same as validating to W3C standards, as I think you found out when you used the validation service.

Yup, the validator definitely looks to structure. So I'll use both; as the online is a bit less convenient to use, it'll be done near the end. Plus, the CSS validator is far more up-to-date -- although there is a CSStidy, too.

I don't think I can be of much more help to you, partly because I have only just started to learn something of XHTML 1.1 (the template I uploaded last night asking for comments is in XHTML 1.0) and partly because my taste lies towards the simple, even austere, in markup.

Missed it, I'll look for it, see if I see anything.

I don't doubt for a moment that your XHTML and CSS are organised logically and systematically, but they are so complex that at my level I can't comprehend the pattern.

Y'know, I get that a lot. I only started working on XHTML and CSS in the last month or so, but I have a tendency to put together intricate little things. Perhaps overly intricate. And I've got a lot of free time right now.

Still, I don't do it by hand -- once I figure something out, I just make it automatic. The hard/fun part is making all the interrelated things work together. And trying to find a way to keep it all in as few places as possible.

You probably don't want to even see the macro code that exports the books. It's much more complex under the hood. But now it's stupidly easy to make a book. I did the attached book in about an hour. And it only took that long because of the Table of Contents -- starting with an HTML file that has a complex TOC as the source makes it necessary to double-check a lot of stuff. The cover took longer to make.

The macros even copy all the files into an Author/Series/Title directory structure for me, so zipping 'em up is easy. (The only problem is that I am basically a Linux user, except for my text-editor -- I have to do a shared folder thing under VMware that's a bit of a hassle.)

The XHTML is basically just divs with uls or ols for links and imgs to spice things up. Every div is basically a page. Every page has a header, although they're often suppressed in the CSS. All the meta information is available in the head. The rest (what I think probably looks complicated) is just interlinking for easy in-book navigation, and trying to keep the source code human-readable.

I don't know what reader you use, but try to convert it and tell me what happens. It should just work, I hope, maybe finding most of the meta information. And if you ever wanted to change something, it should be fairly easy to target whatever you don't like with some specificity.

On a related note, now that the programming is mostly done, and the format spec is mostly settled, it will be easy to write some macros to export to different formats, using scriptable utilities, or writing OPF files, etc. OPF in particular should be pretty easy, and I can probably write a decent OPT file for rbmake to export to the REB1100. Is there a decent ePub command line tool? (Calibre?)

I've found it very hard to get much information about XHTML 1.1; could you tell me please what sources you used?

Almost everything I read came from w3schools.org -- they have a CSS tutorial and reference, and one for (X)HTML. The reference is good enough for beginning, but every now and then I needed something else, and I mostly used Mr. Google's advice. And that advice mostly concerned the haphazard support that Internet Explorer has for standards and how to work around them.

XHTML, even 1.1, is mostly HTML, as I think you know; I don't remember exactly, but I think that there are only 2 or 3 minor differences between XHTML 1.0 and 1.1.

Overall, it's pretty easy, really: your HTML gets much, much simpler. It's the CSS that gets complicated. And that's just art. And iterate, iterate, iterate.

m a r

ps: if you're not yet attached to a text editor, consider NoteTab! I'll gladly share my Clips (macros.)

EDIT: In the attachment, there are minor additions to the CSS (tables, in particular) and some tweaks to the XHTML for some things.

[AlexBell]

Thanks for the reference to w3schools.org, I vaguely remember them in the past, but Mr. Google didn't see fit to draw it to my attention when I asked him about XHTML 1.1 tutorials.

And thanks for the offer of the macros. My eyes glaze over when you described the work you have done on macro codes to export the book. I don't think I'll ever be that good. And I'm used to the CoffeeCup HTML editor so I'll stick with that for the moment at least.

Regards, Alex