This fortnight we were to create a resumé. The key change from previous assignments: the style sheet was now to be a separate document linked to the HTML file via link rel=”stylesheet” in the document head. This is of course the way most style sheets work, and I felt as if I were at last doing something I might do on a “real” web project.
My CSS is rusty and I did have several problems. The list of required style components made it harder to create a visually cohesive document. I would have left several things out if not for the assignment directions, including colored text and definitely the photo.
From a technical standpoint , the instruction to use <p></p> tags made for lots of white space, since most browsers add a blank line after each </p> I considered experimenting with unordered list elements and there is, it turns out a list-style-type: none attribute. I ended up not bothering, since the presence of the colored heading text and the photo made this a resumé I wasn’t going to re-use outside the class context.
The aesthetic challenge I decided to tackle was column width. Because the text lines were short, there was even more white space on the right hand side of the page. I “fixed” this by using nested <div>’s to create a two column layout, which made the page better balanced. The key attribute here is that you can make left: have a value of float rather than a set margin value. Using this I was able to put the second column next to the first. I could have used a <div> to make my heading wrap around the image, which was at the top left of the document, but I ended up brute forcing it by using negative top: values on elements that ended up in the header (top section- not <head> ) of the page. Columns via nested <div>’s was something I hadn’t done before.
I’m pondering how to move forward with an actual small website project I have to complete by the end of the year. I had planned to use a static site generator, but wonder if the relearning curve for CSS would be less than learning the new software. The problem is I don’t remember enough JavaScript to do things like menus that drop down onmouseover: which I’d really like to have. I need to decide soon.