Ogremindes.net » css

Link Cleanup

Ogremindes — Fri, 29 Sep 2006 07:25:32 +0000

I’m starting to get a mess of links on my desktop. They’re all interesting, so I’ll whack ‘em up here.

Five simple steps to better typography. Covers such things as line length and word spacing.
How to avoid activation of Active-X in IE. Due to recent changes, flash (and other things) have to be clicked before they work in IE. This is a workaround.
How to correctly insert a Flash into XHTML. A functional, valid way of inserting flash into a web page.
Architecting CSS. Techniques for organising CSS.
Gabbly. An interesting way to get chat on a website.

And a comic, too.

Centring Block Elements (Such as divs)

Ogremindes — Sun, 28 May 2006 21:04:23 +0000

As I recently saw that some members of the class were still interested in learning how to do this, I thought I’d post this link. In Bite Sized Standards recently posted a small piece about how to centre block elements, and also provides techniques for older-browser (such as IE5) support.

Bite Sized Standards: Centering block elements

Definition Lists

Ogremindes — Tue, 16 May 2006 00:17:07 +0000

Definition List: Definition lists are probably the least used of the three HTML list types. They are used primarily for things such as glossaries or other dictionary-type setups, but can be effectively used for anything where you need an expanded description attached to something.

Above was an example of a definition list. The words ‘Definition List’ was the term, and the indented text was the definition of that term. I will expand on these below.

Anatomy of the Definition List

The definition list has three tags:

The

tag goes around the outside of the list in the same way as

The

tag goes around the term that is to be defined

The

tag goes around the definition for the preceding term

An example of code for a definition list:


  
    HTML
  
  
    "Hyper Text Markup Language"
    used for writing web pages.
  
  
    CSS
  
  
    "Cascading Style Sheets"
    used for applying visual effects to web documents.

This code has the effect of:

HTML: “Hyper Text Markup Language” used for writing web pages.
CSS: “Cascading Style Sheets” used for applying visual effects to web documents.

What Fonts Should I Use?

Ogremindes — Tue, 25 Apr 2006 00:12:57 +0000

When Aldona posted asking for help on the google group, one snippet of code surprised me: font-family: "High Tower Text", "Balloon", "Arial", "Harlow Solid Italic", "Times New Roman" ;. What surprised me was how, well, wrong that font-family was, while being entirely correct code. In this post I will cover how the font-family property works, good practice for its use and what fonts are good to use for the web.

The font-family Property

As we know, font-family is generally given a list of fonts, separated by commas. So far so good, Aldona’s example is spot on there. However, correct use is not necessarily good use. Forthwith, I shall demonstrate what could be improved.

All Fonts in a Family Should be Similar

Looking into the various fonts Aldona chose, I found them to be quite the mish-mash. The majority are formal looking serif fonts, but Balloon is a ‘handwriting’ font and Arial, of course, is a clean sans-serif font. They should be removed, leaving us with: font-family: "High Tower Text", "Harlow Solid Italic", "Times New Roman" ;.
Go From Less Common to More Common

A browser will always try to use the first font in the list, failing that it will try each of the remaining fonts in turn until it finds one it can display. As such, having the highly common Arial in the middle of the list is pointless, as the following fonts will almost never be used.
End the List with a Generic Font

What happens if the browser cannot find any of the fonts you list? Unless you have a generic font to finish the list it’ll use it’s default font, and god knows what that’ll be. Generic fonts tell the browser to find any font from a given category. The categories are serif, sans-serif, monospace, cursive and fantasy. CSS tips & tricks: Font Families, on the W3C site, explains what each of the generic fonts are. In Aldona’s case we have serif fonts, so it becomes: font-family: "High Tower Text", "Harlow Solid Italic", "Times New Roman", serif ;.
Use Web Safe Fonts

There are only a handful of fonts can be found on users computers with any surety, and neither High Tower Text or Harlow Solid Italic are amongst them. I had to do a google search just to find out what they look like!

The font Georgia is similar in style to those two, and is commonly found on Windows and Mac systems, and according to Web Space Works, on about half of Linux systems(although with such a small sample these results must be taken with a grain of salt. Generic fonts are still important). With this change the code becomes: font-family: Georgia, "Times New Roman", serif ; and it will now reliably work on most systems.

If one must use a special font, it is better to make a graphic out of it that to rely on a user having that font. Just don’t use pictures for body text!

Web Safe Fonts

There are only 9 fonts that are commonly considered ‘web safe’ They are Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS and Verdana. These fonts were at one point shipped with Internet Explorer, and have since been taken up by both major OSs.

Additionally, Helvetica, Courier and Times are common enough to be considered part of this category.

Web Space Works has a survey of ‘web safe’ support. Design Tutor has examples of the 9 web safe fonts and examples of how to use them.

Clearing Floats: The FnE Method

Ogremindes — Mon, 27 Mar 2006 04:10:48 +0000

When styling the gravatars for comments I found I had a problem with the floated images ’spilling’ out from their containing

. This site has a solution.

The Quest for a Better Category List – Part the First: A Basic CSS/JavaScript Popup Menu

Ogremindes — Fri, 24 Mar 2006 04:15:11 +0000

One of the reasons I switched from Blogger to WordPress is wp’s category system, which would allow far easier access to anything of intrest I post. The category list is nice and all, and with a little tweaking displays in a nice hierarchal view.

However, a after a bit of thought I realised with my resolve to put everything in ‘child’ categories, the number of categories could rapidly rise. With that, the category list would become behemothian and as such all but useless. What I need is a way to restrict the categories shown, so that the user would only see what information they needed at the time.

Popup Lists

The Popup List technique allows for lists that display only when the ‘parent’ element is hovered over. In this example the parent shall be a

in another list that is id’d as ‘list’. The popup list will remain visible so long as the curser is over it, or it’s parent.

By default, the popup list will be absolutely positioned way off the screen, for, as we know, if it was set to display:none or visibilty: hidden the popup list mightn’t be read by screenreaders. Then again, maybe that would be preferable.

When the parent

is hovered over, the popup list’s position will be set to static, bringing it to it’s normal position in the document, shuffling other things out of the way to fit. The CSS is:

#list li ul {
  position: absolute;
  left: -5000px;
}
#list li:hover > ul {
  position: static;
}

The first rule states that a unordered list inside a list item inside the container ‘list’ should be positioned well away from the window. The second rule states that when a list item inside ‘list’ is hovered then an unordered list that is the direct child of said list item should be positioned normally, as opposed to absolutely, for example. These two together achieve the desired effect.

An example of the code in action.

There is a catch, however. Internet Explorer 6 doesn’t recognise :hover on anything but an , nor does it recognise any of the more contorted CSS selectors that would make it otherwise possible to use this technique. What to do, what to do… Ah-ha! JavaScript.

Add a little JavaScript

The JavaScript getElementById() method returns the HTML element of the ID given. I want to modify a HTML element â€” the child ul. As such, I examined the W3Schools HTML DOM Reference.

The DOM , or Document Object Model is a way of referring to many of the parts of the document object, such as the HTML elements within. We already use this to call up form inputs so we can get their value. However, we can do more than just read off data. We can acually change the existing elements on the screen. In this case I’ll change the style.

On W3Schools I found the code snippet:

document.getElementById("id").style.property="value"

This little piece of code would let me call up an element and change a property of it’s style. Using onMouseOver() and onMouseOut events would let me change the style to make it visible on the hover and then hide it again when the curser leaves.

The styles applied would be something like:

#hiddenlist {
  position: absolute;
  left: 5000px;
  margin-bottom:0px;
}

Again, this tells the popup list to hide.

then the javascript functions:

The first of these two function reveals the popup list, the second hides it again.

And the HTML:


  
    Hover Over Me
  
    Lookit Me!

The two JavaScript events in the HTML call the showList() function when the cursor is over the

and call the hideList() funtion when the cursor leaves. As the popup list is within the it stays open when the cursor is over it.

An example of the code in action.

The Road Goes Ever On

Well it looks like it works, so job’s done, time to apply it to the category list. All it would take is giving each of the lists a unique id and having a copy of each function to match. …or not. You see, the list is automatically generated by a wordpress function, so there is no easy way for me to add ids. And I dont wan’t to have repeated code apout the place and besides, if I add new parent categories in the future I don’t want to have to go back and edit the template again. Also, it may be more useful to have clickable toggles than roll over effects…

And so the quest continues. I’ll be looking at the hierarchy of the DOM in the near future, and maybe I’ll end up writing a custom category list function in PHP.

Fix the Basics First

Ogremindes — Thu, 23 Mar 2006 02:49:30 +0000

A new article on useit.com discusses the importance of ensuring that the basics of a website are as good as possible before messing around with fancy stuff.

Growing a Business Website: Fix the Basics First