Let us backtrack to a post I thought I would have posted before the rationale.

Okay for this post I am going to majorly backtrack to the process of creating my website: more specifically the exact processes that I used and what effect that they had on the appearance or aesthetic of my page.

I’m mostly doing this to demonstrate what I have learnt exploring html and more or less a vague insight into my process, and because I believe that it will make a substantial post to submit when the time comes to send this space of the web to marking.

WARNING: A trek of a read ahead. May damage eyes, and/or brain.

In building my website I really learnt the benefits of the ID tag. Writing this now, I realize that I have come a long way in understanding its properties and purpose since it’s introduction. When Michael first mentioned the ID tag back in week 3, I admit that its full potential didn’t quite register until I was able to put it into use. It is a prominent feature in the CSS of my web page.

When we look at the layout, we can see that it is comprised of “blocks.” Each block has a separate ID. So, the header, sidebar, main navigation bar and footer are all blocks with according IDs. Each ID or block has specific attributes, heights, background colours (specifically black) or background images (the main header). The characteristics are identified in CSS and ‘applied’ to the main document (index.html) by linking to the CSS through the html document.
I.e.
style/type=css….h ref=“CSSurl”…

In firefox if we apply the “margin:auto” tag to the entire page or in CSS id “page container”; the content, or in this case the content blocks will be centered. This is because both the right and left margins will “push” against each other and the content will be centered. This technique was an easy way of centering the layout in a way that applied to all screen resolutions. I found in later construction (specifically for aligning the ‘floating’ iframe) that specifying widths and heights with pixels or “px” would warp the layout for those with a lower or smaller screen resolution.

Although a margin had to be placed over my entire CSS to align it, margins had to be placed to contain each box also. In most browsers default padding is placed underneath under each specified block of CSS, so a custom CSS rule has to be written and applied to both ‘html’ and ‘body’ tags to override it. This means that each block fits together snuggly, or to address the specific problem encountered: there is no gap existing between the main navigation bar and the side bar. Thanks to the “god like tutorial” that I specified in an earlier post, I learnt that you can write a single rule and apply it to two areas of html with the use of a comer. I.e. to apply a rule to both html and body, the rule would be written as:

Body, html { CSS: Rule; }

The comma between ‘html’ and ‘body’ (which are called selectors) means “or”, but because both are written on the core html document it will be applied to both.
Height was specified for all content blocks, except for the sidebar and main content block whose heights and overflow were set to auto. With auto height the content block will be as tall as the browser allows, fitting within the constraints of both the layout surrounding it (in my case the header and the footer) and the browser window itself. Any overflow of content or information is contained within the content box with a scroll bar. The information retains it’s form without a horizontal scroll bar because the width of the content box is specified, though this only applied to the main content Iframe. Content was kept from stretching out other blocks through the use of overflow:hidden. This was specifically applied to the main (horizontal) navigation bar.

Without a specified height of overflow function, the content block will, by default, stretch to accommodate the content. This is a different layout effect entirely, still nice, but not the one that I was searching for.

Constructing this layout I also learnt of something that I wasn’t aware of prior. The float function, which in truth is actually both incredibly useful and incredibly nifty. I can only really parallel the float function to a layer in photoshop. Like adding a layer to a photoshop image, adding a float will place whatever you have assigned the function to above the existing content. It is now “on another layer” separate from the rest of your layout. By default floated elements do not push elements that surround it. It can’t effect, or effectively warp the elements that are around it. A float tag was placed on the main content space, where it was aligned and given a margin the width of the sidebar. Previous to this section of code each content block was aligned vertically, the sidebar and main content block were not placed side by side as intended. The float function essentially allowed the layout to become more conventional in its design.

A side note: later on in the layout I gave the main content Iframe the float function, and could not align it properly within my layout without encountering the resolution problem. After a good few hours of attempting to correct the problem I found that the Iframe could be placed within the constraints of the mainframe CSS block, which retained it’s place throughout the entire ordeal. I learnt the hard way that the most simple solution is probably the best attack tactic when it comes to html. I also learnt that trial and error is an incredibly tedious process, especially on a webserver that does reloads its directory every time save a file.
And back to it: A “clear” property has to be assigned to the footer, because otherwise the float manages to overlap it. When clear is assigned, the float element will come to an end when it comes into contact with the footer.

At this point (because I’ve been writing in vague chronological order) I had a basic layout. I’m sitting on page seven of the Subcide Tutorial. Styling and further solidifying the layout was next on the agenda. At this point the realization slapped me in the face: I would have to employ the Iframe for my main content box. The tutorial fails to mention how the main navigation will link to the body, so using my prior knowledge of html and past experience I utilized the Iframe. Due to the issues it has in Internet Explorer, for me this was a last resort. I attempted other methods of linking using the “target link” technique, but learnt that the main content CSS box that I had created was not a legitimate enough “target” for links.

I explained in an earlier post the function and use of the Iframe, but here here explains and understands it better than I do. The Iframe was the last piece of html to be completed and put into the layout. As I explained previously, it was aligned into the layout by taking the space of the main content “box” that had been specified and created in CSS in the preliminary construction of the layout. I have to reiterate that it took me over 9000 attempts before I realized that html works off simplicity and that fancy floating and margin/align tags were only ruining my layout.

On a similar note I also learnt that failing to close a bracket in CSS will kill your layout or render it void, while leaving our a comma will drive you insane, writing and rewriting code trying t figure out why an image won’t show up. The conclusion: screwing up the HTML or CSS coding process will waste hours of your time. So a piece of advice to myself; or anyone who is reading this, make sure you’re actively functioning when you code, or you are going to end up with one killed headache.

Okay, that may or may not have been stray tangent. Back to the layout. At this point we moved on to making everything pretty. I fired up the Sims 2 and photoshop to take some screen shots and put together my main banner. Yeah, that was my Saturday night. The background image was also constructed with photoshop, as was any the main headers within my content as well as the ‘buttons’ on the main navigation and sidebar.

The construction of the main navigation bar, and the rollover effect I attribute wholeheartedly to the tutorial. I understand that each link was given a “background image” which is the button that can be seen, and was commanded to slide up 50 pixels upon rollover. An image 150 pixels tall was created, the first fifty pixels was the ‘unactive state’ – the white text, while the middle 50 pixels were the ‘cursor state’ (roll over) – coloured text, and finally the bottom 50 pixels were comprised of the “active state” which was a coloured button that would correspond with the open window: altering the viewer as to what section they are viewing. I couldn’t get that final state to occur. That was an incredibly poor explanation, but if we reference the tutorial once more, my explanation might become a little clearer.

(Another realization slapped me, maybe I can’t really explain it because I don’t particularly understand it as well as I like to think I do.)

Within the content box, further styling occurred by placing margins or padding around the headers and the paragraphs. To be more specific, by default there is no space between paragraphs or content placed within the p tag. My layout contains a rule that puts 15 pixels between paragraph tags and gives 20 pixels padding between headers and paragraphs. This ultimately avoids the need for the break tag, which would achieve the same effect, and makes coding content cleaner and more efficient.

So this is generally what went into the construction of the basic layout. After the external graphics were placed in the layout further basic styling was done to change the colour of the content blocks, and footer text. When it comes down to it, the layout created is quite simple and can be built by anyone (as long as you’ve got some good old internet support). I’ve definitely learnt that html is easy to learn when you can type what you want you want to achieve in a search engine and get pages of results, or alternatively view the source of a page that has done a similar thing.

A large portion of the coding was written in PS pad, before it was uploaded onto webs.com which I chose as my free webserver. There was no real reason why I chose this specific host, it was the first one that I encountered. In retrospect webs has it’s cons, which included an advertising bar placed at the very bottom of the page (this can also be considered a pro compared to other free hosting sites which force ridiculously large advertising banners onto a free page – one example of this is free webs.), the directory is incredibly slow and tedious to dig through, and like other free hosts it withholds benefits for paying or donation memberships. I do believe that webs.com was the best choice though out of the other options I have experienced in the past (yeah, I’m talking about you free webs, tripod and geocities.)

Anyway, nearly 2000 words later, this explanation is done, and fortunately so is another weekly blog post.