Adding links to all pages on a site using CSS

OK, I named this post that so that perhaps google will pick it up and those new to CSS will find this post.

There is a really good reason that there are no tutorials on the internet concerning how to add content (a site menu is the most common request) to all the pages on your web site using CSS. That’s because CSS doesn’t control content. It controls styling and nothing more. You don’t use styling to add content.

Why not look into some sort of server side includes. PHP includes will handle the situation. ASP.old can handle it but don’t use it unless you have no other choice (and you do). If you’re really fancy and modern and handsome and awesome you can just use ASP.NET MasterPages and/or User Controls. ๐Ÿ™‚

To wrap it up, CSS doesn’t do that. Stop asking about it! Thank you.

Firebug primer by Hugo

For those that are not aware Firebug is a add-on for Firefox, and is essentially a development debugging tool, that allows you to inspect various aspects of a web page.

It has become – for those that have used it for a while – one of those indispensable tools that make day to day coding life that much more productive.

This post is by way of introducing those unfamiliar with it to it’s most basic functionality, I do not attempt to explore any of the deeper functions but concentrate on the HTML / CSS tools available.

The image below shows the Firebug console on initial activation.

The HTML tab is selected and this shows an initial view of the pages markup in the panel to the left hand side at the bottom. To the right is a view of the CSS rules that apply to this page and to this element specifically in the initial view and is selected using the tab above marked ‘CSS’ (more about the other views later).

The image above shows the options selectable for the HTML markup view.
The important options are the three bottom ones:

  • ‘Highlight changes’ this will place a background to the element being viewed or that is receiving focus and helps greatly when the markup dynamically changes
  • ‘Expand changes’ this feature will automatically reveal collapsed branches in the markup (note the plus sign against the element nodes in the makup view which are clickable to inspect nested detail) when the page refreshes or one inspects an element in the main viewport (see later explanation on ‘inspecting’)
  • ‘Scroll Changes into view’ very useful as this moves the html view to the element in question rather than you have to find it in a large and complicated page

Next is where Firebug starts to get interesting!

The image below shows a view when one uses the ‘inspect’ button whilst in html view

Note the blue bounding border around the text in the viewport; when you click the ‘Inspect’ button you can then move your pointer over any portion of the rendered viewport display, as you highlight elements they will be demarcated by the blue border, as this happens you will notice two things occurring firstly the html markup view will be scrolling to the element that you have hovered over and the CSS view in the right hand pane will jump to the specific CSS rulesets that style this element.

When an element is highlighted you may click on the element and this will ‘fix’ this element in the two view panes in Firebug allowing you to further inspect aspects without loosing the focus on that element.

The image above shows a further method to inspecting elements and one that provides a further level of detail that is extremely useful. By clicking on any element in the left hand Firebug pane showing the page markup you will be able to highlight the elements padding and margins, this can be seen as the yellow highlight which represents the margins of the element and the purple highlight which represents the elements padding applied.

Moving on to the CSS aspect of Firebug demonstrates some invaluable tools and information that make dealing with CSS cascade and inheritance much easier and is perhaps is a feature above all others that would justify installing and learning to work with Firebug.

Looking at the right hand pane showing CSS rulesets shows us some very important information firstly it show us all the rulesets and properties that have been applied to the element highlighted in the left hand pane but much more than that it shows us specifically the specificity order of those rulesets in other words it shows us those rules that carry the heaviest most important weight first it then shows rulesets of a lesser value but that have been applied to the element, and thirdly it shows us properties that have been inherited by the element from parents or ancestors, note the “Inherited from div.content” heading, this is telling us that there was a font-size applied to any div with a class ‘.content’ and that as .submit and/or a paragraph was a child element of that div.content it had inherited that font-size; which brings us to the final feature of this CSS view, note the strikethrough on that inherited ruleset font-size, Firebug is telling us that in actual fact although this property was inherited in reality it was overwritten bu a more specific font-size described on the child element.

This set of features and information make debugging CSS problems extremely fast and far easier than having to wade through the stylesheet trying to understand where there might be an inheritance or specificity issue. On a final note please observe the line numbers to the right of the rulesets these correspond to the actual line numbers in your stylesheet which further speeds up locating specific rulesets; In the examples I have used grabbed from the forum It went unnoticed until too late that cetain styles/stylesheets appear to be ‘packed’ or ‘minified’ and thus all rulesets are in fact collapsed to a single line to preserve space and reduce file size, hence we mainly see ‘(line 1)’ normally this would show as mentioned earlier, an example of actual line numbers can be seen if you look further down at the third rulest that has a file name html.css and a line number of ‘(line 65)’

A further aspect of the right hand view can be seen in the image below where the ‘layout’ button has been selected. This speaks for itself but briefly it shows the aspects of the elements box model.

Lastly in either viewing pane one can edit in real time either the markup or, as shown in the image, the CSS rulesets, you can add new properties, delete existing ones or simply modify existing ones.

Conclusion:

Firebug is a very powerful tool and one that simply increases ones productivity; I can’t stress enough though that I have only scrapped at the surface of what it can show and do and concentrated on the basic HTML/CSS features, if you’re working with client side scripting Firebug becomes equally indispensable in allowing you to observe in real time dynamic changes to the page.

There are other aspects that I leave to the reader to discover but once you do you’ll realise why you can’t really do without this tool ๐Ÿ™‚

Let me check my calendar

OK, this is 2008. I know there are tons of hack web designers out there that bought a copy of dreamweaver but please give me a break. Hey, I’m not against hacks, I mean someone’s got to do pages for $10 or else the bait shop won’t ever get a web site. I just want to help you not look completely incompetent.

I have my speakers on because I sometimes like to listen to music when I’m working. A lot of other people do, too. When I go to a web page I. DO NOT. WANT. The accursed thing to scream at me or play me a flourish or orchestral hit. Sometimes I have my speakers on at night when others in the house are sleeping and that’s not only unprofessional, it’s just not courteous.

So please, since for some reason you refuse to do away with your stupid, worthless, out of date since 1997 splash pages at least get rid of the idiotic automatic sound. That is, of course, unless you enjoy being a laughing stock and enjoy your marvelous hit counter to remain at one visit (from your mother, she’s the only one that would bother to look).

I was going to post links to offending pages but the last 5 I ran across have been from the same “web design” company. ๐Ÿ™„

Third annual CSS Naked day

April 5th, 2008 is Bette Davis’ 100th birthday and it is also the third annual CSS Naked Day. If you are viewing this on April 5th then you will see no styling. Any other day it will look normal. A properly written web page should fail gracefully and still be useable by browsers that do not understand CSS. It is the web standards way. ๐Ÿ™‚

The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and; well, a fun play on words. I mean, who doesn’t want to get naked?. Feel free to see the original reference article for more information.

Second annual CSS Naked Day

April 5th, 2007 is the second annual CSS Naked Day. If you are viewing this on April 5th then you will see no styling. Any other day it will look normal. A properly written web page should fail gracefully and still be useable by browsers that do not understand CSS. It is the web standards way. ๐Ÿ™‚

The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and; well, a fun play on words. I mean, who doesn’t want to get naked?. Feel free to see the original reference article for more information.

April 5th is CSS Naked Dayรขโ€žยข

April 5th, 2006 is the first annual CSS Naked Day. If you are viewing this on April 5th then you will see no styling. Any other day it will look normal. A properly written web page should fail gracefully and still be useable by browsers that do not understand CSS. It is the web standards way. ๐Ÿ™‚

Welcome to the first annual CSS naked day which will be happening April 5th, 2006. The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and; well, a fun play on words. I mean, who doesn’t want to get naked?. Feel free to see the original reference article for more information.

Please visit my friends at:
Third World County
Diane’s Stuff

A gift from Mom

Today day my Mom gave me a nice present. She let me upgrade her iMac from OS 9 (with IE/Mac as her default browser) to OS X (with Safari).

Mom and change do not go together very well but she took to OS X quite well. That 400MHz G3 was partying like it was 1999. Yeah, the old Lime Green is kinda old but it’s served her well (it served me well, too, before it was her’s).

Now that she’s using Safari everyone around the world can stop hacking their web pages to work for IE/Mac. I’m pretty sure she was the last person on earth using it.

If anyone out there is actually still using IE/Mac please read this.

Thanks Mom. I’m proud of you.

Camino 1.0 Stable release

Camino is a Mac only browser (that’s the way to stick it to the man). After trying it out is seems much snappier than both Safari and Firefox. It comes with “Web Standards” links in the bookmarks (always a good sign). It handles javascript that Safari chokes on (such as the buttons in WordPress’ Write Post panel and the buttons in all the major forums post pages).

I do believe this is going to become my default browser.

Download it here.

Trackbacked to:
MacStansbury
The Liberal Wrong Wing
Those Bastards!
History Mike’s Musings
Common Folk Using Common Sense
Right Wing Nation
The Conservative Cat
Diane’s Stuff

Updated IKM Standards forums to simple machines

Like many I have grown weary of the constant updates and security holes in phpBB and having to constantly hack the templates to make them comply with W3 standards, I decided to give Simple Machines a try.

I like it.

I like it enough to replace the forum I have on this site. This forum is for the discussion of web standards. All are welcome to join.

Simple Machines uses valid markup and css right out of the box. I’m quite impressed by this as it seems to be a non-issue to the phpBB community.

I’m now working on figuring out the template system on Simple Machines so that I can make some adjustments.

More to follow.

Internet Explorer 7: Beta 2 Preview available

Get your copy of Internet Explorer 7: Beta 2.

You can check out all the new bugsfeatures and then learn how to uninstall it. ๐Ÿ˜†

Make sure you leave Microsoft some feedback at their discussion group. Hopefully, we won’t need to design a new series of hacks and fixes for this new browser. Maybe M$ will come to terms with web standards. Maybe monkeys will fly out of my butt.

From the reports I’ve read so far it overwrites IE6 so if you need a reliable browser (well, I don’t know that you can consider IE6 reliable but I digress…) then IE7 beta should only be placed on a spare computer for testing and swearing at.

Trackbacked to:
The Land of Ozz
Those Bastards!
Right Wing Nation
MacStansbury