The menu uses the ultra efficient Nekkidblogger menu framework, the same as I used for the horizontal CSS drop menu. It uses an accessible, standard UL (unordered list) classed with classes for the levels of the menu. The CSS is light, simple and very fast.

Here it is. It only uses three "structural" CSS-rules for a multi-level menu (no javascript):

It is the most efficient menu there is: no complex CSS rules with long lists of descendant selectors and a clear separation between presentational and structural elements.

The menu has been tested extensively and works well in all modern browsers: Chrome, Firefox, Internet Explorer from IE 7 and up, as well as Safari and Opera. For IE6 some fixes are required. You can find these, along with the markup and CSS for this menu, in the online demo.

©2012 nekkidblogger. All Rights Reserved.

Introduction

Over the last couple of years there has been an increasing focus on Web page speed. Partly this is due to initiatives by Google and Yahoo, partly it is due to the explosive increase in web browsing on devices such as iPads and advanced cell phones (iPhone, Androids, etc).

Gradually, the focus on speed has also resulted in increased attention being devoted to more efficient CSS. Efficient HTML and CSS can help improve rendering speed significantly, not least on mobile devices with slower processors. I have done a lot of work to speed up web sites lately, and in the process I have noticed that menu systems is an area where there is a lot of inefficient CSS floating around. It turns out there is lots of room for improvements.

Markup (HTML)

What we want is a HTML/CSS menu with very efficient CSS. In the example I use a horizontal 4-level dropdown menu.

The markup is basically a standard unordered list (<ul><li>). I have highlighted the non-standard features. It has id="nekkidblogger" and each of the sub-levels (nested lists) have classes describing the level: level2, level3 and level4.

Usually lists used in menus are not styled with classes like this. However, doing it this way has some great advantages: It makes it easy to build a CSS menu with very few style rules; it allows for very efficient CSS; and provides (as a kind of bonus) convenient "hooks" (i.e. the "level" classes") for styling if one wants to style the dropdown levels differently from the top level.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<ul id="nekkidblogger">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a>
  <ul class="level2">
    <li><a href="#">Link 2-1</a></li>
    <li><a href="#">Link 2-2</a></li>
    <li><a href="#">Link 2-3</a></li>
  </ul></li>
<li><a href="#">Link 3</a>
  <ul class="level2">
    <li><a href="#">Link 3-1</a></li>
    <li><a href="#">Link 3-2</a>
       <ul class="level3">
         <li><a href="#">Link 3-2-1</a></li>
         <li><a href="#">Link 3-2-2</a>
            <ul class="level4">
              <li><a href="#">Link 3-2-2-1</a></li>
              <li><a href="#">Link 3-2-2-2</a></li>
            </ul></li></ul></li>
  </ul></li><li><a href="#">Link 4</a></li>
</ul>

On the right it is shown without styling. This is a standard unordered list. The <ul> for the overall menu has id=”nekkidblogger”. It has four top level links, and under Link 3 there are three dropdown levels. This is more than sufficient for a demonstration – there is no need to fill it up with lots of dropdown elements.

So now we are ready to give it structure and style!

CSS for the Nekkidblogger menu

One of the keys to efficient CSS is to use the "cascade" as much as possible – to allow "child-elements" to inherit as much as possible from "parent" elements. So here I don’t define selectors to the extent that I can avoid it. Also, I try to only style elements once, and then let inheritance take care of as much as possible.

In the following I mark the rules that are structural (makes the menu work as it should) as “Rule” and the presentational style rules as “Style” in order to clearly separate the two.

#nekkidblogger ul {padding:0;margin:0;} (Style 1)

This isn’t really part of the menu, but useful for setting the context. If you use a CSS reset, you don’t need this. Also, you may prefer simply ul, li {padding:0;margin:0;}. I use the more specific reset here (for the "nekkidblogger"-id only) since this is a blog where the general rules have been set for other purposes.

The Top level

#nekkidblogger li { list-style:none; position:relative; float:left;
    text-align:center; margin-right:5px; font: 10px verdana,
    sans-serif; } (Rule 1)

This is the first structural rule of the menu. Here "list-style", "position" and "float" are necessary structural elements, while "text-align" and "margin" are presentational. Note that I style the a-selector, not the <li>. The <li>-element adapts to its content – so we don’t need to define a "width" here for example.

#nekkidblogger a { display: block; width: 8em; color: black;
     line-height: 30px; text-decoration: none; background: silver;
     border:1px solid #fff; margin: 0 -1px -1px 0; } (Style 2)

Here everything is presentational. "display:block" is important in order to display the links as boxes. "width", "height" and the rest is styling. I set the properties of the links here, and then they are inherited by the sub-levels. In your own menu, you may want to style the dropdowns as well.

#nekkidblogger :hover > a { background:#7B7B7B;
         color:yellow } (Style 3)

This is a presentational element only – we don’t need to set different properties for the hover state – but most often one does that in menus to make them look better. Here I style the hovered link as well as the whole hover path instead of just the hovered link (one usually uses simply "a:hover"). I picked up and adapted this neat little trick from the excellent CSS experiments by Stu Nicolls.

What we have done so far (we have also "set the stage" for the lower levels):

• Link 1
• Link 2
• Link 3
• Link 4

Second and lower levels

The rest is purely structural – no presentational elements, as I simply let the lower levels of the menu inherit everything, including the hover state (see Style 3). However, I will show you how you easily can style the lower levels yourself if you want to:

A. Style the boxes

The classes ".level2-.level(n)" provide "hooks" that you can easily use to format the lower levels.

We could, for instance, give a different style to level two and the lower levels – just style ".level2" and let the lower levels inherit. Or we could style each level separately. For instance:

#nekkidblogger .level2 a { background: #FFF; height: 25px; etc .. }

And/or, we could style the lower levels like so:

#nekkidblogger .level3 a { ... }

#nekkidblogger .level4 a { ... }

OK. Back to the nekkidblogger menu:

B. Position the dropdown boxes

The top level is horizontal. We want to drop the second level down vertically from it. We have defined the <li>’s to be relative, so now we position the dropdown (.level2) in relation to them:

.level2 { position:absolute; top:30px; left:0;  }  (Rule 2)

Here "left:0" is default in the good browsers, so we should not need to specify it, but as it for some reason is not so in IE (surprise?), we still must. 30px is the line-height – see Style 2.

The next two levels – level 3 and level 4 – we want to fly out to the right of level 2. 8 em is the width of the a-element (see Style 2). I add .08em (about 1px – the width of the border) for good alignment. So:

.level3,.level4 { position:absolute; top:0; left:8.08em; } (Rule 3)

C. Dropdowns: Hide and make visible when hover

.level2,.level3,.level4 {visibility:hidden} (Rule 4)

We need to hide all levels separately – if we let "hidden"-property be inherited, then the "visible"-property will be too, and all levels would show up when we hovered a given level. Also note that if you want to add another level or two to the menu, all you need is to insert the correct classes in the HTML for the list and then add ".level5, .level6" in Rules 3 and 4. So adding N more levels, using the Nekkidblogger menu framework, does not add to the complexity of the CSS.

#nekkidblogger :hover > ul { visibility:visible; }(Rule 5)

Makes the child elements of a <ul> visible when <li> is hovered (but only the child-elements, not the "grand-children"). And that’s all!

Here is the menu:

Final remarks

So, that’s it. Five "structural" CSS-rules for a multi-level menu (The “Style”-rules are purely presentational). The rules are also comparatively very simple, mostly very short, and computationally effective (good for fast page rendering) with minimum use of descendant selectors.

If you examine the live demo with Google’s Page Speed (using Firefox), and look at the use of efficient selectors, you will find that it has "0 very inefficient rules, 0 inefficient rules, and 2 potentially inefficient uses of :hover". The "potentially inefficient ones are Style 3 and Rule 5, but they are as simple as can be.

If by comparison you run Page Speed on the Son of Suckerfish menu with three dropdowns, which is a very widely used menu and which was published in A List Apart, you will find that it has "7 very inefficient rules, 5 inefficient rules, and 5 potentially inefficient uses of :hover". So, there is a difference. And if Google’s Page Speed is worth anything, and if page rendering speed matters, it may well be a difference that matters.

The Nekkidblogger menu has been extensively tested, and works in all major browsers: Chrome, Firefox, Internet Explorer from IE 7 and up, Safari, and Opera. In the demo I give some more detail and show the fixes necessary to make it work in IE 6.

See Copyright and Terms and Conditions, on demo page, sidebar 1.

PS: In later posts I’ll show how to make the rightmost flyouts fly left and how to convert this horizontal menu into a vertical CSS menu by changing only tiny bits of CSS.

©2012 nekkidblogger. All Rights Reserved.

I have just completed a new three column CSS layout designed to be extremely robust and flexible. The major DIVs are build outside in to prevent column overflow, and the layout is designed to degrade very gracefully in narrower viewports. Give it a test by clicking the demo (below is just an image) – see how the header splits and the sidebars fold under one another as you make the viewport narrower.

It’s designed for ads in the header and 25o px wide ads in the middle sidebar. Have fun!

You can get the markup and the CSS by viewing the source of the demo!

©2012 nekkidblogger. All Rights Reserved.

Introduction

The Suckerfish menu, first published in A List Apart in 2003, was a major achievement. The authors, Patrick Griffiths and Dan Webb, showed how to build a horizontal dropdown menu with very efficient CSS. It is often referred  to as a CSS-only menu. For browsers that didn’t support the “li:hover” (Internet Explorer – IE – 6, of course), the authors provided a JavaScript that made the menu work even there.

Markup (HTML)

A standard unordered list (<ul><li>). It has class="barmenu".

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<ul class="barmenu">
	<li><a href="#">Link 1</a></li>
	<li><a href="#">Link 2</a>
<ul>
	<li><a href="#">Link 2-1</a></li>
	<li><a href="#">Link 2-2</a></li>
	<li><a href="#">Link 2-3</a></li>
</ul>
</li>
	<li><a href="#">Link 3</a>
<ul>
	<li><a href="#">Link 3-1</a></li>
	<li><a href="#">Link 3-2</a></li>
	<li><a href="#">Link 3-3</a></li>
</ul>
</li>
</ul>

CSS (with comments)

The Suckerfish

The logic of the Suckerfish menu has since been used widely to build menus for web pages. The core of it was provided by the authors in a barebones version. The Suckerfish dropdown menu uses the following 5 rules to do the job (I have included their original comments as well):

ul { /* all lists */
    padding: 0; margin: 0; list-style: none; } (Rule S-1)

li { /* all list items */
     float: left; position: relative; width: 10em; }(Rule S-2)

li ul { /* second-level lists */ display: none;
     position: absolute; top: 1em; left: 0; }(Rule S-3)

li>ul { /* to override top and left in browsers other than IE,
  which will position to the top right of the containing li, rather
  than bottom left */ top: auto; left: auto; } (Rule S-4)

li:hover ul, li.over ul { /* lists nested under hovered list items */
     display: block; } (Rule S-5)

That’s it. Five CSS rules for a dropdown. This was a major achievement at the time it was published – neat, simple, orderly rules and very cross-browser compatible. The question is: Can it be improved on now, almost ten years later, with more standards-compatible browsers and with IE 6 more or less out of the picture? As of July 2011 IE6 is used by 2.3% of users. And IE7 is used by a little more than 4%!

Modern CSS dropdown – barebones

In the following rules you can take out the “.barmenu” if you want – I just need to use a “class” here because I have other menus and other unordered lists in this blog, so that I need to use more specific rules.

.barmenu ul, .barmenu li { /* all lists */
	padding: 0; margin: 0; list-style: none; } (Rule 1)

.barmenu li { position:relative; float:left; width: 5em;
    padding:0 0 1px; } (Rule 2)

I usually style the link element rather then the <li>, but since I don’t style I simply give the <li> a width here. This should go out when the menu is styled. The strange padding is explained below (under Rule 4).

.barmenu li ul { position:absolute; visibility:hidden;
      top:20px; left:0; }(Rule 3)

I usually use use “visibility: hidden” and “visibility: visible” to hide and unhide the dropdown. “Visibility” was introduced in CSS2 and is well supported today. I could also have hidden the dropdown outside the viewport, positioning it absolutely at -999em, which today is another standard method. Or, I could have used “display:none”. As it turns out, all the three ways of doing it encounter similar problems in IE7 and IE8.

“top” and “left” above are needed for IE7 and IE8, the modern browsers (Opera, Chrome, Firefox, and Safari) do not need them. The modern browsers seem to assume “left:0″ and a vertical offset equal to the current line height – both reasonable assumptions. IE, on the other hand, assumes 0 vertical offset and a default margin <ul> or <li> offset, which simply is odd.

.barmenu :hover > ul { visibility: visible; margin-top:-1px;
  background: #FFF; }(Rule 4)

(PS 9/23/2011: I have revised and changed .barmenu li:hover > ul to .barmenu :hover > ul.) This rule makes the child elements of a <li> visible when <li> is hovered. Note that “visibility:hidden” reputedly leads to “performance problems” in IE7 and IE8, while the modern browsers seem to handle content hidden with “visibility: hidden” quite well.

However, it also contains two “fixes” for IE7 and IE8. The first is “background: #FFF”. This is not included to give a background (I use white – #FFF – here anyway, so the menu inherits that) – it is there to make the display of the dropdown stable and scrollable in IE7. Without background the submenu appears as long as the mouse hovers over the parent menu item, but once you move the cursor down over the submenu, the submenu disappears. This is not what we want.

I have spent many hours tesing various fixes to this. The usual fixes for IE problems, such as “zoom:1″ or “height:1%” don’t work here. But background does – either a color or a background image. Omer Greenwald at webtechwise.com uses a transparent background image as a fix, and that seems to work just as well.

The other fix used here, which also seems to be required for IE7, is to make certain that the top menu and the dropdown actually “touch” one another. If there is a one pixel gap, the dropdown will disappear when you move the cursor down and over the “gap” to click the submenu items. The fix for this is to include a padding of 1px at the bottom of the <li> (Rule 2) and then use a negative margin of 1px to move the dropdown up into the top menu (Rule 4).

It is somewhat interesting to note that if you move the dropdown a little too far down – for instance “top:25px” – the problem returns.

Note that most of the fixes for IE used here are specific to a barebones menu. Once you style the menu, the dropdown is likely to actually touch the top level menu, so that problem disappears. And when you give color to the background – which you probably will – you take care of that issue too. (To the right is the list before we apply CSS and turn it into a menu.)

OK. That’s it. One rule less than the Suckerfish menu, and we don’t need any java if we don’t support the soon to be gone IE6. It works as intended in all major browsers as well as IE8 and IE7. To make it work in IE6 will require rewrites, as IE6 does not support the child selector > that I use here. It will also require JavaScript as IE6 only supports the hover property on links, not on lists and other elements.

Here’s the menu:

So that’s it. Four CSS-rules for a dropdown menu – and one of the rules a reset rule (Rule 1). If you have resets in place in your CSS, you probably don’t need it. So, three rules really. That’s all we need with modern browsers! But then, of course, lots of fixes for the older versions of Internet Explorer. What a huge waster of web designer man hours those browsers have been.

Basic styling

Usually one styles the links rather than the <li>-items. The advantage is that  by doing it this way, one increases the clickable area of the menu. The <li>-items don’t need styling – they simply adapt to the space required by the content.

.barmenu2 a { display: block; width: 5em; color: black;
  line-height: 25px; text-decoration: none; background: silver;
  text-align: center; } (Rule A)

I need to use a different class, as I display both menus here.

.barmenu2 a:hover { background: #7B7B7B; color: yellow; } (Rule B)

If you want to style the dropdown (I don’t do it here), you can use:

.barmenu2 li ul a { something .. }, and
.barmenu2 li ul a:hover { something else } (for the hover)

And that’s all. So now I can remove the various fixes (in Rules 2-4) from the barebones example. The only ones I still need are “top:25px” (adjusted to 25px as that is the height now) and “left:0″. I’ve also taken out the width in the <li>-rule:

.barmenu2 li{ position:relative; float:left; } (Rule 2)
.barmenu2 li ul { position:absolute; visibility:hidden;
    top:25px; left:0;  } (Rule 3)
.barmenu2 :hover > ul { visibility: visible; } (Rule 4)

A useful tip on styling menus with hidden dropdowns or flyouts is to simply comment those parts that hide it out and style the menu with the whole menu visible. Here that would simply mean to comment it out like so /* visbility: hidden; */ in Rule 3. When done, you simply remove the comments.

OK. Here is the menu:

So there it is with some basic styling. Now it works just fine in all browsers, including IE7 and IE8. See the demo with source and CSS.

Stay tuned for much more on menus!

©2012 nekkidblogger. All Rights Reserved.

I’ve been looking into forum software lately. I want to set up a couple of discussion forums. It seems to me that the most highly recommended among the free, open source bulletin boards is phpBB, now in version 3 – phpBB3.

So I’ve installed it on a test site and have started to work with it. And, so that it’s said, the core functionality of phpBB3 is excellent! Really outstanding. It’s an excellent bulletin board. And there are a lot of good folks in the community doing an excellent job in developing good mods. However, being used to working with WordPress, I have to say I was shocked. Completely. WordPress is so geared towards making it easy to use. By contrast, with phpBB3 everything is so 1980s: Installing it is OK, not as easy and quick as WordPress, but still not too complicated either. But there it stops.

First of all, the whole attitude surrounding phpBB, including the new phpBB3, is old fashioned: It’s made by people who can write programs using HTML, CSS, PHP and MySQL for people who can do all the same things. The attitude seems to be that if you can’t do that, you shouldn’t be using the software. Very little is done, compared to WordPress, to make is easy to use.

In WordPress, we have become accustomed to automatic upgrades – just click a button for upgrade, and the system upgrades itself, including the databases. Same thing with themes and plugins: Search for a theme or plugin, find it, read the docs and user reviews, decide you want it, click install, and once installed click “activate” and it’s up and running. Smooth. Nice. Easy for people who can’t program in PHP and/or don’t want to mess with MySQL.

With phpBB3 it is still 1980-something. There are mods. But you have to either download them to your PC, unpack them, upload them to the site, and install them manually or use something the good folks at phpBB call a “mod-manager”, called “Auto-Mod“. Now, manually really means going in and manually changing PHP-files and into MySQL and running scripts or instructions to create new tables, alter existing ones and the like. Very tedious. And you can make mistakes that may have serious consequences and can cause lots of grief.

But the mod-manager is tedious too! If you are patient and finally manage to find the instructions for installing it, you will find that they are OK for programmers but make no sense for non-programmers. They say, for instance: “After uploading the files, you need to run the install script.” Which script? They don’t say precisely. How do you run it? They don’t tell. Lots of people will give up at this point. Why isn’t it simply integrated in the install of phpBB3? If the plugin and theme installers hadn’t been integrated into WordPress, they probably would have had tens of millions fewer users.

I actually installed it, and used it to install another mod. Even with the auto-mod installer in place, the instructions still said I had to download and unzip the mod and then upload it to my server. Did all that, navigated though poor instructions again, installed a mod and ended up with more than a screen-full of so-called “do-it-yourself”-instructions, which required me to move files, edit PHP-code, and run MySQL-script. What’s wrong with these folks? Auto-installation and auto-upgrading is expected by everyone everywhere these days. No only does WordPress do it – even Microsoft and Adobe manages that! This really sucks big-time!

Using the auto-install was scary business as well. I’ve tested it out with two mods. The first one crashed my board – I just got a white screen and could not get into it even through back-doors, so I had to wipe and re-upload all system files. The second time I tried, I got the message that the install was “successful”, but every time I wanted to go back to the forum I got messages that files were missing, so I ended up having to upload 10 or so files manually before it started to work again. Not so good!

There is no objective reason why phpBB3 couldn’t be as easy to use as WordPress. WordPress plugins and updates overwrite and install new PHP-files and modify the MySQL database. It’s quite possible – as WordPress demonstrates – to do it. But the emphasis on user friendliness is not nearly as high among the good people developing phpBB, so the standards for it have not been developed and aren’t pushed as they are with WordPress. Another sign of the same lack of standards for user friendliness is that many mods conflict with one another: It’s a big mess for people running the boards, but quite easy to avoid if you devote attention to it.

I was also shocked by the lack of emphasis on SEO in phpBB3. It writes URL’s like this: “http://example.com/viewforum.php?f=3&sid=f00744bc867aec5bc739f4ee59364726″ (NB: Not a working URL). Not a very search engine friendly URL, if you ask me. Totally 1980s and totally bad from a Search Engine Optimization (SEO) point of view (also a dimension where WordPress really excels, by the way). Using URLs like that is almost like telling Google “I want to be invisible” or “Please don’t list me on any of the first 20 pages of search results”. To most webmasters today, being found in by the search engines is imperative. In the 1980s it wasn’t.

For sake of comparison, on another test site I installed WordPress with the bulletin board plugin bbPress. A few clicks, and there it was, up and running. And right out of the box it produces URLs that look like this: http://www.examplesite.com/forums/forum/recent-seo-software-news/ (NB: Not a working URL). The core functionality is not nearly as good, but it will get traffic from the search engines.

Also, if you want to change something, like put in place a new header image or alter the layout, it’s a lot of work. The system more or less forces you to do the changes online, while logged in, in a pretty poor editing window without, for instance, search capability. A couple of days ago I sat for hours editing a CSS-file more than 2500 lines long. Without a file-search facility available, that means scrolling up and down hundreds of lines to find the class or id one wants to modify, finding perhaps the color definitions at line 2300 or something and other styles for it at line 350 or whatever – that’s bad. And it’s boring too. And it could have been easy to fix – if user friendliness was a concern, that is.

Of course and predictably, I ended up scrapping the header that came with the system and creating my own from scratch. It simply was easier – but that’s not how it ought to be.

So, there you have it, an excellent program that has a long, long way to go in terms of user friendliness and that has been built with an old-fashioned and out-dated philosophy, so that the platform in reality is its own worst enemy. From the outside it looks like a project and community in need of a clearer vision, better prioritizing and improved leadership.

©2012 nekkidblogger. All Rights Reserved.

HTML & XHTML DeMYSTiFieD is an excellent book for people wanting to learn the basics about how to build web sites by self-study. It is a well designed book that starts right at the beginning – with what HTML and XHTML is – and quickly moves on to show readers how to build their first web pages.

The author, Lee Cottrell, is a computer teacher at the Bradford School. He has been creating Web pages with HTML since 1993 and teaching it to students for more than 12 years. Throughout this time, Cottrell has learned how to effectively describe HTML’s core elements.

The book is a practical, self-paced guide to HTML and XHTML. It is hands on from start to finish and gives thorough and more than sufficient guidance on required Web design techniques and technologies. The step-by-step approach is well thought out, and the sequence and progression in this nice little course book seems very appropriate. It shows first how to build a simple web page, and then it teaches you the use of various important yet basic HTML elements like hyperlinks, lists, tables and forms.

The book also takes some steps beyond the pure HTML and teaches you how to layout and format pages and page elements with CSS, and some neat small Javascript utilities to spice up and make your HTML-page become more interactive and live. Also, Learning HTML and XHTML is full of smart and very useful advice that teaches you to do things the right way from the start, and that – if you follow Cottrell’s advice – will save you a lot of time and worry later one.

• The book covers Covers HTML, XHTML, HTML5, and CSS
• Develops two stand-alone examples per chapter: one created by the author; the other for you to practice
• Helps you recognize and resolve common HTML errors
• Is an excellent book for self-study

At the end of each chapter are review questions and at the end of the book is a final exam– with well-considered questions that provide excellent tools for revealing whether you have digested the materials the way you should or not. In my opinion this is a great book for self-study or for use in a class room for students learning HTML and the basic techniques of web site building for the first time! HTML & XHTML DeMYSTiFieD is a book with hard stuff made really simple!

Links to books by Lee Cottrell on Amazon US, Amazon UK, and Amazon CAN.

©2012 nekkidblogger. All Rights Reserved.

This is the second – and substantially revised and expanded – edition of Dan Cederholm’s best-selling Web Standards Solutions. Web Standards is a movement that is gathering strength among Web designers, and is increasingly embraced as the standard technology specifications enforced by the World Wide Web Consortium (W3C) to make sure that web designers and browser manufacturers are using the same technology syntax. Dan Cederholm, a very well-known and excellent CSS guru, has long been in the forefront of this movement.

Standard solutions improve consistency, make redesign and changes of web sites easier and add robustness to web sites. Increasing adherence to standards also makes possible a smoother transition to new types of screen and viewing devices, such as screen readers for people with vision impairments, cell phones, PDFs, e-book readers, and what not. HTML, XML, XHTML and CSS are all such technologies.

This is a truly excellent book written by one of the best programmers and designers out there. I have used the previous edition of this book for a long time, and often gone back to it to find inspiration or solutions. A very useful book! And the new version is even better!

Web Standards Solutions is a great guide to understanding the advantages you can bring to your web pages by implementing web standards and precisely how to apply them.

Cederholm shows you how can use CSS to lay out your pages in excellent, solid designs that are flexible and look good across viewing platforms, as well as a number of smaller, neat and efficient techniques for producing great looking elements that go into the layout, all equally scalable and easily revisable as the layout itself.

• The Expanded edition contains great bonus material.
• Teaches how to use Web Standards effectively to build better web sites.
• Cederholm’s “solutions style” promotes learning.

Web Standards Solutions has 16 short chapters, each covering the theory and practice of different web standards concepts and showing multiple solutions to given problems for easy learning. You’ll learn about multi-column layouts, using image replacement techniques to your best advantage, making the best use of tables and lists, and many more. Cederholm gives you advanced web design techniques and discusses important caveats.

This is a great book for people wanting to learn how to use CSS the right way, who wants good, solid workable and pretty looking solutions, and Web developers and designers wanting to learn standards-based techniques to improve their sites. Web Standards Solutions is very good investment, in my opinion!

Links to books by Dan Cederholm at Amazon US, Amazon UK, and Amazon CAN.

©2012 nekkidblogger. All Rights Reserved.

1. Stockholm, Sweden

I am floating all the pictures to the right, just for fun. You can easily change that. All the pictures have the caption neatly underneath, set in a smaller font and in italics.

The first is an image without borders. To see the CSS and markup, view the source code in the demo. Here’s the basic CSS-code for the floated image with caption:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

div.imgcapture {
  float: right; clear:right;
  width: 257px;
  margin: 5px 0 5px 15px;
}
div.imgcapture p {
  padding:0; margin: 3px 0 0 0;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}

2. Stockholm, Sweden

Then, picture two has a thin black border (you can alter the thickness and color easily). In my opinion, this makes the picture stand out a little, and is prettier. But this, of course, is a matter of taste. Here’s the CSS for that:

1
2
3
4
5

img.fixed {
  border:1px solid black;
  width: 250px; }

3. Stockholm, Sweden

In my opinion a little shadow makes it stand out even more. So in the third example, the same picture has been given a discrete little box shadow effect. This effect is part of the CSS3 specification and supported by most browsers (but not IE 8 and earlier). It has the same border color and thickness. If you don’t see the shadow, you’re using the wrong browser.

Here’s the code:

1
2
3
4
5
6
7
8
9
10
11

img.fixed2 {
  border:1px solid black;
  width: 250px;
  box-shadow: 3px 3px 3px #818181;
  -webkit-box-shadow: 3px 3px 3px #818181;
  -moz-box-shadow: 3px 3px 3px #818181; }

The “box-shadow” property is defined by 3 lengths and a color as attributes. The first length is the horizontal offset of the shadow, (positive means the shadow is on the right, a negative offset will put the shadow on the left of the box). The second is
the vertical offset; a negative value means the box-shadow will be on top of the box and a positive means the shadow will be below the box. Finally, the third number is the blur radius. If this is set to 0 the shadow will be sharp; the higher the number, the more blurred it will be.

4. Stockholm, Sweden

In the fourth (and final) example I use slightly thicker shadow (4px) with twice as much blur (6px).

And that’s it! Go ahead and use the code if you like it. The full code, including markup, can be found in the demo. Link to me if you feel like it – it’s appreciated!

And, seriously – if you can’t see the shadows, it’s time to get rid of IE and get a browser that shows you the net in all it’s glory! Here’s the download sites for Opera, Chrome, Firefox (a tad buggy for the moment) and Safari (unfortunately wants to grab you email address).

©2012 nekkidblogger. All Rights Reserved.

This is a comprehensive reference which covers all versions of HTML and CSS, including HTML5 and CSS3. It is written by a Web development expert who has participated in the development of the new standards, and who is very knowledgeable. I was very impressed by this book, which I think currently is the most comprehensive, complete and up to date reference book for CSS and HTML available. The book is an outstanding go-to guide for both for beginners and professional Web developers as it is fully updated for the latest CSS and XHTML standards and provides clear and concise examples.

The author, Thomas A. Powell, is president of PINT, Inc. (pint.com), a nationally recognized Web agency. He developed the Web Publishing Certificate program for the University of California, San Diego Extension and is an instructor for the Computer Science Department at UCSD. He is also the author of the previous bestselling editions of this book and Ajax: The Complete Reference, and co-author of JavaScript: The Complete Reference. This broad expertise and background has clearly been important in the writing of HTML & CSS: The Complete Reference.

This excellent book covers all the elements supported in today’s Web browsers–from the standard (X)HTML tags to the archaic and proprietary tags that may be encountered. HTML & CSS: The Complete Reference, Fifth Edition contains full details on CSS 2.1 as well as every proprietary and emerging CSS3 property currently supported. I was positively surprised by the width of the coverage of CSS3. It also has good annotated examples of correct markup and style which show you how to use all of these technologies to build impressive Web pages.

Also, CSS and XHTML: The Complete Reference, Fifth Edition covers the newest browser versions including Firefox 3, Internet Explorer 8, Safari and Opera, and contains much updated information about the browser and cross-browser compatibility of the various HTML and CSS elements. In addition, helpful appendixes cover the syntax of character entities, fonts, colors, and URLs.

I was very favorably impressed by this book. It is well written and well organized, and even though it is has more than 800 pages, very little space is wasted. CSS and XHTML: The Complete Reference, Fifth Edition also contains good examples of useful Java. Overall the book is very up to date and so comprehensive that I think it will be useful for a long time, even though things change relatively fast as far as CSS and HTML is concerned. If you, like me, like to have a good reference book that is well organized, contains information on browser implementation and even some good examples, this is a very good choice which I strongly recommend!

Links to books by Thomas A. Powell at amazon US, amazon UK, and amazon CAN.

©2012 nekkidblogger. All Rights Reserved.

This is a big and thick book – 740 pages including appendices. It is marketed as a beginner to intermediate book on HTML, XHTML and CSS.

The book provides coverage of these three Web authoring standards, and also gives some coverage of the upcoming releases of HTML 5 and CSS 3. The book also explains the basic structure and necessary formatting to create static and dynamic web pages. What it does is the following:

• Explores the basics of HTML such as tags, attributes, and how to structure content to create specialized document formatting
• Shows how multimedia and scripting can be used to make your content dynamic
• Author, validate, and troubleshoot your coding and documents
• Enable content for multiple devices—from the standard PC browser to various mobile devices
• Understand values, lists, colors, fonts, and other CSS metrics and formatting basics

The HTML, XHTML, and CSS Bible is relatively comprehensive, but not nearly as comprehensive as the size and thickness of the book indicates. Once you start reading it, you will find that it wastes space on every page: irrelevant code is included in virtually every example, and sometimes lots of it; the illustrations show irrelevant stuff – like for instance 1 inch of the top of the browser for most web pages shown; there are endless listings of irrelevant stuff that should only have lived with fine print in the appendices.

So, despite its thickness this book never goes deep into any subject, and the coverage of most subjects is, in fact, very thin and, to my mind, not very helpful. It is not good at covering the emerging Web standards. And the CSS part of the book is especially thin and at times somewhat misleading. It doesn’t even give the basics for the simpler of the tableless CSS layouts.

So, I would suggest you move on to other titles if you’re looking for a good reference book or a book that can teach you (in a good way, including teaching you to start doing things right as early as possible) how to build web pages if you are a beginner. This is not a book I recommend.

Links to the HTML, XHTML and CSS Bible at Amazon US, and Amazon UK.

©2012 nekkidblogger. All Rights Reserved.