Hypercompendia

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.

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.

Didn’t even think to check the hypertext piece on Internet Explorer since the changes were so elementary.

The code for changing the font color of particular writing spaces doesn’t work! The link color changes do, but the whole body of text in the ‘asides’ remains white despite the simple code of <p><font color=”ff0000″>text</font></p> tag enclosures.

What’s IE looking for? There is a browser-checker online that I’ll check into later. After I’ve finished pouting and grumbling “get with the program. Get a Mac and Firefox for Pete’s sake” into the cosmos.

Now that I’m feeling all cocky and proud of myself for finally learning how to get something working online, I’m more interested in pursuing the hypertext path of narrative. Just the idea that maybe somebody would read my work, would have the ability to access it, makes it a viable format for any efforts put into it. As with linear narrative, there has to be an outlet for work unless all you’re writing is a secret diary that you don’t want anyone to find.

While I’ve got a long way to go yet on learning to manipulate the hypertext environment, I’m beginning to find my way round enough to feel comfortable with the idea of devoting a longer narrative to its possibilities. Even as I straddle the simple stuff like colors and order and layout, the more intriguing concept of images and animation, or film backgrounds and audio are already lobbying for my attention. With A Bottle of Beer, there is such an obvious call for visuals–despite my best attempts as a writer to paint background and movement with words. I envision the long road that runs by Yolanda’s small house, disappearing into the sunset. I see the man running into the picture as the mountain shadows lengthen and reach towards her. I see the evening darken into dusk, hear the creak of her rocker on the porch, the night prowling of coyotes and the rush of a scorpion across the hot sands.

So that’s what’s brewing in my mind even as I get ridiculously self-satisfied in learning to manage a thin line of border around text. It’s just a step towards an intersection of paths up ahead; sort of a living, working hypertext.

Well, I may not have done it the proper, clean way, but I do have a decent css sheet made up for A Bottle of Beer, along with the necessary changes made in the individual pages made via html. Some of these changes may have an easier manner of being handled in the stylesheet, as far as the link colors being different based on random purpose, the corresponding spaces having a different text color, and the basic links setup with the arrow symbol, and I hope to sort that out as I approach a more complicated hypertext project.

Things I still need to do with A Bottle of Beer: find the method of adding space on the top of the page (margin? padding?); put a back-arrow to match the forward basic link (can figure out how, just don’t know if it’s worth doing–though definitely worth knowing how) and to move the forward-arrow to align right; aligning and positioning of titles, text, etc.; checking out tables or columns so that I can figure out how to place several rows of text or images.

I feel pretty good about what I’ve done so far, though it’s taken me forever to learn and must seem freshman-level to folks who’ve done this and find it easy.

Just wrote up and initiated a border around the text–the complete block of text, not each paragraph–in a test stylesheet!

I’m so excited as the steps start coming together to create a dance. This is the code I stuck into the stylesheet, and all I have to do is get some padding or margins in there:

body {
border-style: solid;
border-color: #FFFFFF;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
}

And, I think I have padding…

&#8230;a block, a dot; something that, with a single keystroke, will act as a hyperlink at the end of lexia text to move to the next logical lexia without the need for “next” or “basic links” or as I have been doing, using the last word of the space. I’m thinking of going back and using an arrow (–>) which is a common sign for moving forward in both hypertext and IF, but it would be really neat to have something with a ‘heavier’ weight, particularly when using colored text and backgrounds.

There’s likely something available in the library of symbols in either Pages or Word, but as I’ve found out with the ene (or Spanish nyah-sound of Señora) they do not compute in the export of Storyspace into the html templates.

So I’m looking for a blob of color, fairly large, like a drop of blood that leaves a trail to follow to the murderer.