Hypercompendia

Course I couldn’t go to bed wondering if all my work in the last two days was wasted so I Filezilla’ed the test story over here and was happy to see that despite the lousy structuring and story, everything works properly. Even in Internet Explorer which I’m on now.

So I’m happy ’bout that and all…but…I’m not so sure I really like the boxes moving around so much. It’s sort of distracting. Of course I’m not reading them but just link-hopping and this is just a dozen or thirteen writing spaces, whatever I needed to try out all the different attributes, but still…

Well that was easy. Just added a middle position vertically for each of the three (left, center, right) horizontal positions by making a “leftm” etc. though I’m sure it would be better to make it obvious with a “leftmiddle” designation. And of course, new questions come from this move.

First, with a Mac Book I’m not sure I want a lower or third level position. Now with my husband’s monitor which is 19 x 19 approximately, it’d be fine. So that’s a stop and thinker.

The other thing of course is that while it’s easy enough to copy and paste the whole rigamorole including borders and widths and paddings and just change the position throughout the stylesheet, I’m sure I missed an easier way–or rather simply a cleaner way of coding it. Probably under an umbrella of some sort. That’s what you get for skimming the textbooks or not listening. Then again, I am learning more about how things act and it’s not like I’m expecting to get a job out of this.

Then it happens; I remember that I should be testing all this in IE or other browsers as well.

Who’da thunk that I’d ever have gotten into the underlying structure of composing and presenting hypertext narrative? I loved Storyspace because it didn’t require much of me aside from twiddling a few dials to set up a very elegant looking hypertext so that I could concentrate on writing story. The drive to present that story online, however, led me into the whole code thing. It meant setting up a weblog that could allow for offering the pieces online, and that meant moving from Typepad to WordPress and setting up two new homes. Then learning css and html to export from Storyspace into the sites. From there, the imagination goes wild but it’s a fun learning process and each baby step I make (or elderly shuffle) is both an accomplishment as well as a treat.

Obviously, when one adds another element into the equation there naturally comes a need for variables.  With the major step of background image comes consideration of text color. On the last image, while I Photoshopped to make a dark text readable, there are other things to consider such as the links.

So I grabbed another image out of my garden files, one that in reality was hot coral California poppies and sun-drenched green leaves. I was going for composition knowing that the color was a big no-no. Ended up with this (below) and still, the original link color of cream is not going to work. But that’s fine. All I have to do is work out how to change that in a working narrative for the future.

In most projects you come to a point where the trail of thought diverges and there are several ways of doing the same thing as well as several directions in which to branch out. This is truly a hypertext moment.

With some ideas in mind of what I’d like to be able to do (positioning of lexias), even without getting into the golden grid method yet I may have other options of accomplishing what I want to do. This is when the old “a little knowledge is dangerous” becomes a possibility.

I’ve already likely gone the long way around to manage the postions already: left, leftlarge, leftlargea, center, centerlarge, centerlargea, right, rightlarge (no rightlargea). The left and leftlarge are 285 and 400 px wide, or roughly allowing for a 3 column position versus a single fixed. The addition of “a” on the leftlargea is the designation for the image background rather than the designated color. All work; all are, I’m sure, more elaborated and sloppy css than necessary but remember, I’m not classroom-taught here and my own mind works in “next step” and “try it and see” ways. All time-consuming, yet more fully understood because they come from logic rather than instruction or rote.

Now as I ponder my next move, I’m guessing that a placement of “top: 150 px;” code would likely give me the vertical positioning. But then, I’m going to have a css that’s going to cover every possibile combination of positions and colors and text and sizes and then, only then, will I be smart enough to go back to the books and find out a shorthand method of coding it all in.

This may not mean much to anyone but me, but I’ve just learned a lot:

Still playing with possible solutions to the layout since I really want to know what works and what doesn’t before I need to depend upon it. Placement is going to matter as much as color and text to tell a story that’s dependent upon links and relationships.

Haven’t gotten the knack yet of the <style type=”text/css”> background-image: url (“what4copy.jpg”); </style> but I suspect it may be dependent on the image and size. Meanwhile, I have my #centerlarge column:

Nice setup here and it looks perfect for a hypertext story in the many odd-sized writing spaces in so many different positions but…

Would they behave if the boxes were to show up singly or in small groups? Methinks not, since they appear to be co-dependent.

Just realized that any of my progress with html in What Was That 2? doesn’t work in IE. No borders. No proper color text. No columns. Something I did after I did what worked made it unwork.

&#8230;two scenarios in the learning of html and all that. The first is a minor quirk whereby the right (third) ‘column’ begins below the center when there IS a center column, and I think that may have to do with the margin setups I put in but for now that’s not a priority. I’m also looking into the grid layout as a better alternative to this structure since then the placement of text or image can be wherever I choose rather than dependent upon its buddies.

The second thing I’m working on is the background-image: url (“http://susangibb.net….jpg”) to replace the solid colors either of the whole page, or within the specified bordered areas. This one seems just out of reach because it should be simple and I’m getting close to the resolution but not quite there yet.

Meanwhile, in the background, I’m reviving the Storyspace piece Pigeon and Shoe with new characters and considering what to do about Paths.

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