How to center a tabbed horizontal CSS menu

This article shows and explains a different method for centering a horizontal aligned tabbed CSS menu without using any width at all on the menu. The menus demonstrated are using of unordered lists and background images.

Traditionally horizontally and centered aligned menus are using a fixed width in some way, like the horizontally and centered menu using fixed-width examples at the bottom of this article.

However, I got a question about how to center a horizontally CSS menu with tabs without using fixed width, and since I couldn’t find some information about it I came up with a solution I have called a Horizontally aligned menu with fluid width.  Both examples are using the “Fast rollover without preload” concept.

This horizontally and centered aligned  CSS menu is not using fixed width, no width at all is used. The tabs are also fluid, this is done by using two background images (see images below).

(more…)

Continue ReadingHow to center a tabbed horizontal CSS menu

The only CSS layout you need

One of the arguments for switching from the table-based layout into CSS-based layouts is the flexibility CSS gives us. However, despite the flexibility, you have maybe experienced that the CSS layout you normally use didn’t handle a specific case so you still had to edit, or perhaps totally restructure your HTML?

In this article, you are presented with ten different layouts with example pages, all based on the same HTML. The most popular layout is a two-column CSS layout – top and right menu.

This layout fits educational and news-related websites such as educatetheusa.com. On the other hand, a three-column CSS layout is popular between the webshops.

This article and the example pages are perhaps not the universal answer so the title is maybe a little bit overstated, but hopefully, they can make it easier for someone.

Furthermore, all the pages are also experiments in how to change a layout without having to use absolute positioning since this takes the element out of the page flow. The changes in layout are made by changing mainly floating, margin and padding – no absolute positioning is used.

(more…)

Continue ReadingThe only CSS layout you need

Unfollow Anti-Social Media Policies

It irritates me when I hear Twitter, Facebook et al, blamed for the loss of productivity and foot-in-mouth faux pas by employees. That inevitably leads to the discussion regarding banning the networks from the workplace or the introduction of a lengthy social media policy within the business. Stop blaming the tools – it’s the people using them.

Extra Thick Crust, Hold the Common Sense

As Scott Stratton (@unmarketing) put it at Jobsite’s FreshThinking seminar, “Stop hiring morons”. That may seem a little harsh, but let’s look at an example.

Dominos staff filmed themselves doing disgusting things to food in the kitchen before serving up to customers. They posted it on Youtube and were promptly fired and arrested for their endeavors. That wasn’t Youtube’s fault, it was the morons messing with the pizza.

(more…)

Continue ReadingUnfollow Anti-Social Media Policies