So I'm an old-school website designer. I write my website in Notepad and often upload files through the command prompt FTP program. Simple. Easy. Works for me.
Doesn't mean I only do old-school HTML though. I love CSS. CSS (Cascading Style Sheets for those not in the know) is a method of designing which allows one to create a palette of styles to create a uniform look. It means that I don't have to specify style attributes for each element within the page, and it means that I can do fancy tricks like image positioning, fancy links, and other fine tuning to make the page look exactly as I want. I also maintain my CSS stylesheets as separate files, referenced within each page both to save file size and to avoid copying, pasting, and maintaining each page's styles separately. I highly recommend the W3Schools tutorials.
With great power comes great frustration, however. Today for example, I redesigned the navigation bar on my website, changing from a flat panel with links to buttons.
First, I created simple buttons in Photoshop using an inner glow to separate it from the background. I created two sizes – one for the header and one for the entries – and used these as background images for the various elements: <h1>, <h3>, <a>. Simple enough, right?
No, not really. Browsers automatically put white space after the end of headers and paragraphs, and the formatting can be slightly different in each browser. Furthermore, this trailing space can't be controlled via CSS. Solution? I made use of CSS classes applied to <span> tags, which don't have an automatic line break afterward and hence don't run into that same formatting issue.
Okay, that done...however, I still had to get them to display properly. First, I had to make sure I was using the proper font size, which took a few adjustments. Secondly, I had to find a way to make the "button" display completely. By default, text, links, and even spans only take up as much space as necessary to display their characters. Manually adding trailing spaces would be difficult, messy, and wouldn't completely work. Had to find another way.
Solution: the CSS "display" property. This property tells the browser how to display an object. The common options are "inline," which makes it display pretty much the way a <span> tag would display anyway, or "block," which makes it display somewhat like a <p>, or paragraph, tag, with space afterward, etc, and also forces it to fill up its line. This latter one would ensure that the whole "button" displayed, but I didn't want the white space afterward (I was going for a connected look). Classic trade-off, or so I thought.
Fortunately, it turns out (as you will see if you follow the link at the beginning of the previous paragraph) that there are other options, among which is "inline-block," which combines the lack of extra space of the "inline" version with the line filling of the "block" version. Took me quite a while to figure it out, but I was glad I did. I had tried everything I could think of, from fiddling with the line height to changing the dimensions, but nothing worked. This was but one of many times the W3Schools site has helped me out of a jam.
While I was working on getting the buttons to display properly, I ran up against some trouble with the links themselves. In CSS, you can define different properties for normal links, visited links, links when the mouse is placed over them, and links when they are clicked. I had initially set every property for each of these individually, since the old design was more text- than image-based, and had fewer settings to manage. As I added on more properties (height, width, background image, etc.), it became more and more cumbersome to change them individually, so I moved all of the properties that would remain the same for all of them to a style which would be applied to links overall.
At the same time, I realized that it was probably a mistake to use the <a> (hyperlink) tag as the button building block, since I now have an icon next to the "Blog" link which leads to the RSS feed, and I need them on the same line. So I took all the block-level formatting (background image, display style, etc.) and set them under a CSS class which I'd apply to <span> tags. Quick fix.
Since I wanted to retain the effect of links inverting colors when the cursor is placed over them, I created inverted buttons. In the old days, this would have to be done with a JavaScript onMouseOver() function, but CSS provides an alternative (thankfully, as I've forgotten more JavaScript than I think I ever learned): the pseudo-class that defines styles for hyperlinks on mouse hover can be applied to any element. Furthermore, classes and pseudo-classes can be nested (I'd done so already to make sure that these styles would only apply to elements within the navigation bar, which is a <div> tag with a special CSS class), so I set up the stylesheet such that elements in the "link" class in the navigation bar, when hovered over with the cursor, have the inverted button as the background image.
I still wasn't done yet, of course. since the mouseover change was conditioned on the cursor being over the <span>, not the hyperlink, it would display properly only when the cursor was directly over the link (the link text would disappear if the cursor was not directly over it, being black text on a black background...this caused double trouble for the Blog link and RSS feed icon). Adding a text-color property in addition to the inverted background image wouldn't solve it, as text color is separate from link color. I had to go a level deeper and create another sub-sub-sub class (I may have one too many subs in there) for links (<a> tag) under the hover pseudo-class, under the link span class, under the navigation bar class. A bit like Inception.
Anyway, it was a fun adventure which no doubt improved my skills, but there was constant testing and re-testing, which was an aggravation. I also probably should have tested on my local version of the files instead of uploading to the server each time, but due to my webfont installation, the fonts don't display properly when viewed as local files. I could also make up an excuse that I just like the whole world to see my creative process, but likely as not it went un-noticed by anybody but me.
Peace,
JT
No comments:
Post a Comment