Templatix Blog

For the sleepless… a page built exclusively with CSS… even though it doesn’t look like html… guess how they did it.

For those using Firefoxe’s Firebug, inspecting DOM elements is already a breeze. But what about Internet Explorer? The guys at slayeroffice have created a new DOM inspector that works on any browser, which is easy to install, by simply bookmarking it. It’s not as advanced as the Firebug, but it can prove extremely useful sometimes. See here

…or “Building An Expanding DHTML Menu With CSS and JavaScript – revisited”.

What’s this all about: a vertical menu with submenus which are hidden initially and show on rollover.

Requests:

1. On roll-over over a zero-level element, the corresponding sub-menu must appear
2. On roll-over over another zero-level element, besides the effect from point 1. any other secondary menu must hide, only the the submenu corresponding to the active roll-over must remain visible

The most elegant solution I found is in the page linked at the beginning of the article, but it was a bit too long for what I needed, so I took it, adapted it, and I got exactly what I need (see here a functioning example, with all it needs to understand it, if you look in the source).

Later edit: for a more elegant menu version (in terms of coding and approach), but less functional and without JS, read here (in Romanian).

Versiunea in Romana a acestui articol aici.

I used to write some time ago about the possibility to create graphically rich and yet still editable buttons.

The first problem with tha approach was an optimisation issue: foe each button you’d have to use 2 images, hence 2 different requests on the server. In time, and on a crowded server, any problem of this nature begins to show, and to ask for optimisation.

Second problem: on top of that, our buttons lacked any roll-over effect.

This made me re-think the approach of this problem:

1. Before, I used to use 2 tags, like so:

A)
<li>
  <a>button here</a>
</li>

The new approach still uses 2 tags, but this time in a bit different manner:

B)
<a>button here<div class=end></div></a>

The new DIV, marked by the class “end”, has the precise role of defining (graphically speaking) the right end of the button. I’ll just go ahead and enter below an explanatory graph, followed by, well, explanations:

As you can see in the image above, instead of using more images, we’re just going to use a single image, long enough to cover any scenario* and double in height: one row for the normal state and one row for the “over” state.

Continue reading ‘Graphically rich yet still editable Buttons (and/or tabs) (optimised and now with roll-over)’

I wrote, some time ago, about how to solve this problem with min or max dimensions in more retarder browsers.

The solution proposed was to use conditional javascript expressions inside the CSS file. Not very elegant, and quite limited.

Meanwhile I found a much simpler, more elegant and better validating solution. Let’s say we want to get a min-height of 400px. How do we go about it? Easy enough, we use 3 CSS properties instead of just one, like so::

min-height: 400px;
height: 400px;
height: auto !important;

And, miracle! It works! In every browser that I always test against: IE6, IE7, FF, Opera, Safari. Enjoy…