Hypercompendia

Yeah, that worked: creating a new class id for a different sized left column so that I’m not restricted to a particular box.

Here’s how it stands so far: What Was That? Version2

Actually, right after I posted it came to me that there’s probably a way of changing column widths simply by adding classes for them. For example, while I have #head, #left, #center, and #right, with particular attributes of width, I should be able to add #lefta, #leftb, etc. with different width assignments such as 150px or 400 px, and if warranted (i.e., wanting other columns to appear on the page as well) use them with corresponding center and right column assignments.

Really should–and probably will–form a new category for HTML and CSS, but since the main reason for my getting into it is all because of hypertext writing I suppose for now it all relates.

Just managed to move beyond the problem of the wandering center column of a three-column design format (figure I’ll work out the horizontal alignment later) which was driving me nuts because I don’t totally know what I’m doing yet. I was able to pin the left column in place while remaining fluid, and the right by pinning it to the right edge, but the center column moved to the left if there was no left column in place. I finally managed with both position: absolute and margins of left: 250px and right: 250px to keep the center column in the center without the sides supporting it.  For now, that’ll work, even though it’s not the cleanest way of doing this and it does limit me to the particular widths until I learn to code around them.

Meanwhile, I have to fix paddings and margin widths and the horizontal positioning before I bother getting more fancy with design.

This site for now has become a journal of learning the behind the scenes creativity necessary to bring any hypertext narrative efforts on my part to the process of production and accessibility. In other words, I can write the story, but it’s got to be displayed for public reading and up to now, for me that was a problem.

So I got beyond the procedure of exporting Storyspace work into an online site, set up a site that accepts it, and now am working on presentation. So while it may look extraordinarily silly to thems that already knows, this journey is an important one to me–if not for me, and the purple plague picture below this post is just so for a purpose.

I think that working with this short, unfinished piece (What Was That?) is the easiest way for me to learn all the different options available. The purple and aqua color choices are strategically marking this as separate from the more subtle original format. In the post below, the opening space of the piece includes title, image, and text with a hyperlink. I’ve separated each out into separate columns set up for placement–at least vertically; something else may work better to allow horizontal placement as well. And, all three columns are represented–which is not something I really feel I’d be using, but rather single or two at the most–but it does bring up the question of outer margins and spacing so that the borders are separated. I may need to look into going over an 800-pixel body width. Does anybody use 800 anymore?

And the black line at the top: that’s just an empty body border that I’ve since taken out. Hey, I’m sure this won’t be the ugliest hypertext space I produce in my trial and error learning!

You gotta love it.

Just as I had turned my head away from transforming all work into XHTML because it’s not a simple case of lower case alone, the books come in!

HTML, XHTML, and CSS for Dummies (Andy Harris) and Head First HTML with CSS & XHTML (Elisabeth and Eric Freeman) are over 900 and 600 pages respectively and though other, better books were suggested, I’ve found that starting on the easy level is sometimes best. After all, if politicos can talk to us like we’re three-year-olds then maybe that’s the best way to get the message across.

No, I’m still muddling through in my own pokey way and draining the brains of a couple friends who know a lot more than I do, but no, I’m not taking classes.  In this case, class means a specific style application to an element a selector. What I was looking to do–and managed in a way, was change text color for certain writing spaces in a hypertext piece. My solution was posted previously, but I knew there had to be a way of taking care of this more easily on the css stylesheet. While I haven’t checked it with IE, it works with Firefox. The only problem, it has to be done (inline) on each paragraph, vs. the embedded style that also works well and is really easier to implement. The sample and the code (in the stylesheet):

p.blue {
font-family: Georgia;
font-size: 1em;
color: #0000ff;
font-weight: 700;
padding-left: 25px;
padding-right: 25px;
}

And in the html of the space, for the blue paragraph:

<p class=”blue”>text</p>

Found my top margin!

So here’s where I am so far:

It does work; that is, the code in the previous post works fine in Firefox as well as Internet Explorer. This would be easier than inline style code since the entire code is easily pasted in place in entirety, with only the color hex itself needing change (or working production style, plopping all ‘red’ into place, then ‘blue’, etc.).

Then again, I’m sure that there’s even an easier way; likely a designation of class or id or something like p-blue{color:”0000ff;}  in the stylesheet, and the <p-blue>tag in the html.

And no, I didn’t check how this plays with Safari, Chrome. or anybody else.

With a bit of help from Chris and some trial and error work on my part, the problem of the colored text not showing properly in those lexias meant to be either all red, all blue, or all green instead of the white text showing up in the Internet Explorer browser has been fixed.

I tried several things, but what worked and was inserted in the <head> </head> section was this:

<style type=”text/css”>
p {
color:#0000ff;
}
</style>

Since these spaces are governed by a css stylesheet, I wasn’t sure what would work and while the inline css code worked with Firefox, I guess IE likes the embedded style above. Didn’t try removing the inline to see if Firefox works with just the above–and will, just to know for future reference–but for now, I’ve left both in with no problems.