Html Hell Week: D-Day + 1

Aww.

Due to a technicality (I had a medical emergency which involved eight injections. Ouch.), I flunked Hell Week. And interestingly, (a sign, perhaps?) B was not available for the toy run-slash-code meet that was to follow the test. But since now I had the opportunity to continue, I shall do so.

Here, after a few width and text properties on the header section, plus a few border sections on the main content area, we see more similarities. (For the pic of the original layout, I direct you here.)

The Header and Main Content Area are now aligned.

When the header was finished, it became easier to line up the main content by gradually increasing the negative margin and testing. I wish I could peek at the original values I typed in the first layout but it’s not allowed in the rules. (Of course, you may suggest that I take the measurement using other means…)

Now we continue on towards the sidebar elements.
The elements sit inside a “sidebar-wrapper” of sorts, and then they are arranged by floats inside the wrapper to look like so:

Now the sidebar elements are lined-up and styled. But there's a gap!

As you can see with this progress shot, the basic shape is almost finished. There is a big gaping problem of the border of the main content not reaching the end of the page(if the sidebar were to be shorter, the reverse would happen). This is, as I have mentioned before, is because divs do not expand beyond the content(and padding). The flanking sidebar trick by Craig Granell in his book Essential Guide to CSS and Html Web Design can be adapted to help solve this problem. A bit of tweaking on the respective divs’ padding-bottom, margin-bottom and the overflow of the parent container, and we have:

Now the main content is stretched down, and the borders are not broken.

This trick of course, just ensures that the two columns, sidebar and main content, match up to which one is the longest. If both are short, the layout will still collapse. I had to add a min-height value to the layout’s primary wrapper to prevent a collapse beyond the bottom of the navigation menu. Here is what it looks if I blank out the main content and sidebar areas:

This is what it looks like when empty. Min-height prevents layout from collapsing too much.

Aftermath

Other a few quirks on the font sizes and whatnot (I’m still not satisfied with them, and will still be replaced further on), I have managed to emulate my old layout. If I had worked on Hell Week as I was supposed to, I should have been able to finish the challenge by day 2, (or day 1 if I had worked longer).
Lessons learned? Well, B was right on the crutch thing. I had difficulty recalling the properties I used while making the original layout. I’ll probably skip using WYSIWYG (even the coding mode, which is what I use in there) on the foreseeable future, except for cases when time is of the essence.

Html Hell Week: Day One

Introduction

To recap  the story from before…

The challenge was to recreate a layout I made without resorting to a WYSIWYG application (specifically, its context-sensitive prompts in the coding mode).

This is what it looks like.

The original.

The logs

The following is a series of notes periodically typed in while I was working, which is why they feel disjointed.

3:15 pm
Late start. Exceptionally hot weather, electric fans on high and mentholated sugar-free gum to keep me in focus, check.

Okay. Layout is composed of divs representing sections of the site, plus a wrapper(fixed width design). CSS handles the layout’s positioning.

The coding of the divs went smoother than expected, since I still remember what I did beforehand.

…although I missed a few closing tags on the first code-in, a cursory glance revealed two mistakes, fixed. I kinda hate it that B was right that the auto-closing of tags is pampering me of sorts.

Okay, so after coding the layout and adding filler content, went to W3C markup validation service and tried out my stuff.

I had to refer to a document to completely add the doctype and character encoding declaration (I hope B will cut some slack on this one). But, the result passed as XHTML Strict, with one warning: “Info Using Direct Input mode: UTF-8 character encoding assumed”. This is most likely because I copy-pasted the code into the direct input validation box.

The barebones XHTML is done, with divs properly ided to their respective duties.

Btw, style-less, the layout looks like:

Still unstyled. This is also what you see if you turn styles off.

3:49 pm
After a bit of log typing, jumping on to CSS.

…and immediately, the point of B’s insistence on the exercise again slaps me in the face. Yes, my mind had difficulties recalling the variety of CSS properties available. I had to ask if referring to a function list is allowed in the rules. Now waiting for the reply.

…doing other IRL stuff to stretch a little. And maybe grab a bite.

…B replied to my question in the middle of grub n’ caf. Green light on the using references.

5:00 pm
Back in the saddle. Firing up Daft Punk’s Tron Legacy Reconfigured on the side.

…turns out a the meal break was what I needed. Most of the properties came back to me, and I was back to styling, with an occasional glance on references.

Time to discuss what the css must do:

The layout puts the header to the side, with the biggest(and for now, the only) splash image set as its background. The content panel is next to it, and the sidebar elements (which is the main navigation menu and the actual sidebar, inside a sidebar-specific wrapper) is underneath it. The footer remains in its standard position.

The elements are positioned using floats, lining them up together using the magic of negative margins. The content section actually overlaps the header.

To give the site a partial feeling of ‘solidness’, borders of varying thickness are active in a few corners. For the content area, I left one side open to give the site a open-ended feeling (even if it isn’t).

Since the floated elements collapse when empty, a trick using margin-bottom, padding-bottom, and overflow is applied in order to the columns to keep the border elements of the same height, and the border lines connected to each other. (It’s the flanking sidebars technique mentioned in the book THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN, published by friends of Ed/apress. However, I did not follow the instructions in its entirety.)

I favored this type of design because other than the humongous splash image and the patterned background, there are no other images required for the layout. In the case images don’t load, the default color scheme and the borders remains the same, albeit with a gap on where the splash image should be.

…well that’s it in theory. B actually suggested trying to style ‘in the dark’ for an extra challenge – compose the basic layout before launching it on a browser. Kinda like the exams where you write code in paper, forcing you to figure out how things will work only using your head. I prefer styling a single part first then looking at the result, but it couldn’t hurt to try.

…and oy. Look at that.

What is this?!?

As you can see, the things do not line up properly yet, but the layout is beginning to take shape.  Several elements are still missing crucial styles, and the borders (and the margin/padding/overflow trick) is not applied.

We’ll just have to see what happens on Day Two.

Day One experiments ended at 8:30 pm.

Html Hell Week: Day Zero

Every once in a while, I meet up with a colleague, B of The Workbenj,  an avid action figure collector like yours truly, and we go on a “toy run” of sorts- we hit the hobby shops(which is some distance away from our usual haunts) and see what’s new, that sort of thing- and by afternoon, with the collectible hunt pretty much done, catch up on what’s new on the comic books and such.

Yesterday was one such day, and over afternoon coffee, I showed him the basic layout of a site I’ve been working on  (in html form, since the I was past the graphical mockup stage by this time). During the discussion, he asked on how I did it, and I mentioned working on it using a WYSIWYG.

And chaos ensues.

You see, B firmly believes that excessively relying on WYSIWYG for such work can dull one’s mind in terms of code  familiarity (Of course, really relying on the WYSIWYG mode can, but he insists even working on the code view with context-sensitive popup assists can be also damaging). To prove his point that I have been relying on such a “crutch”, he suggests going on a “HTML Hell Week”- recreate the layout again, with only a screenshot, the image assets, and a text editor- no fancy tools. As the name suggests, I have a week, although in reality I only have a working week- five days starting tomorrow- until our next toy run this coming Saturday. His final piece of advice was that I keep after-action reports of the coding progress here on the blog.

I really don’t know what to say, since the challenge came from out of the blue, and I think the layout is quite barebones compared to most (I’ll try to post a pic later) but B has been sage-like when it comes to things like this, and most things I say come back to (pardon the term) bite me in the ass later.

So yeah, an early start tomorrow, and  I have the night to work on other things…