As my spring semester of college draws to a close, I’ve overcome many projects in the areas of data abstraction, graphic design, and web development. The last great hurdle was associated with the third of that lot. I was required to write a four-page personal website that revolved around a subject of my choice. While many students chose more domestic settings such as hobbies and family, I found it to be a writing opportunity. If you follow my works on DeviantArt, you’ll probably know of my work-in-progress called Resonance, which features a character called Fauntleroy Ranvier. The website I wrote became that of his banking company, Ranvier Ltd.
Now, in my web design class, we’ve been working with two development environments for HTML and CSS. there was Adobe’s Dreamweaver, and the considerably less fantastical Crimson Editor, whose only real upside was that it was free. As the deadline came closer, I decided I would throw the site together over a couple days on Dreamweaver by staying at the lab late, but thanks to some kleptomaniacs in the building, the room that I was told would be open until as late as 10 at night, was locked by 4 o’clock and not accessible to the public. Thus, over the course of a weekend, I hammered through the antiquated Crimson at home, productivity and morale boosted by Kit’s graciousness to lend me a 17” Samsung he had laying around for dual-screening.
Development went rather well, my only real obstacles consisting of aesthetics such as rounding the corners of divs. One trouble, however, ended up being a stalking predator in the grass, waiting for the opportune moment to strike; I was having issues with my divs moving to where I wanted, and accidentally planted the seeds of woe by designating their position as “fixed” in the CSS.
The following day, I wrote the final few pages, and posted the link to my site on our class discussion boards. When I went to view the site and make sure the link worked, to my horror, I discovered that the “fixed” positions that had been defined to me as keeping a div in one spot, “even when scrolling,” had in fact removed the idea of scroll bars completely! Sections of the pages were cut off by the window borders with no way of viewing them. After researching the positioning system deeper, I was enlightened to the concept of absolute positioning with relative positioning for divs within divs.
One would think that this task would be simple to carry out, and for a seasoned web-designer, I’m sure this scenario is a non-issue, but this was hardly my case. Diving back into my code and changing the positioning caused my page to detonate beyond all readability. The following battle that lasted for 3 hours straight showed me just how much my page was a cobbled together catastrophe of ropes, crudely nailed wooden planks, and duct tape. divs, and classes were created and destroyed like the primordial matter in the early stages of planck time following the big bang. Phantom divisions shunted my text about on the page while I struggled to re-size images and rebuild navigation bars. At last, I emerged somewhat victorious, my mind flayed by the channel cast of HTML and CSS syntax. At a time during the war, I thought Dreamweaver, which I at last had access to, could prove a secret weapon, but by that time my code was so gnarled that Adobe’s interpretation of my code was unintelligible.
It was submitted at the eleventh hour, and is almost everything I wanted. Feedback is appreciated: