Templatix Blog

Back in the day, when TABLES ruled the world, getting a layout compleely centered in the page was relatively easy: you’d just insert a one-cell table, align that table to the center both horisontally and vertically, and then you’d insert yet anothr table in that cell. That was it, plain and simple. But this would never work in NS, for the simple reason that NS would only observe the first table’s height – the rest of the tables’ heights being totally disregarded. Well, that was back in the day, when not only did people know what NS was (Netscape, for younger kids), but NS was the buzz-word of the day and everybody used it. Not anymore.

But the problem stays. Why? Because verical-aligning is only specific to certain HTML elements, and DIV isn’t one of them. So what then?

Well… it depends. You have not one, but two solutions, depending wheather you want your DIV to have a fixed height, or you want it to have a height relative to the height of the page. In either case, the basic principle is that your DIV must be placed into a context clearly defined position-wise, be it relative or absolute. Let’s take them one at a time…

Simple You set the din in the CSS, with the following parameters:

position: absolute; height: x%; top: ((100-x)/2)%;

Well, what I just wrote is an EXAMPLE, not to be taken literally, but to be interpreted. Don’t just copy-paste, cuz it won’t work. See it “translated” into usable code, in this example:

position: absolute; height: 40%; top: 30%;

If you have any questions, please leave a comment and we’ll sort them out

Continue reading ‘DIV vertically centered in the page – no tables’

SIMPLY PUT: menu with submenus, CSS-only (no JS)

Any modern browser (implicitely excluding all versions of IE), if is playing by the CSS book, has support for the dynamic pseudo-class “:hover” on ALL tags, not just on the lonely sad pathetic < a >.

Note: As you may already know, in CSS there’s a series of dynamic pseudo-classes (:hover, :active si :focus) that traditionally get associated with “a” in order to create different styles for the 3 possible different states of a link, as in a:hover, for instance.

Modern browsers, as I was saying, having implemented the support for this, allow for the association of the pseudo-classes with any HTML tag. In other words, you could very well define something like:

td       {background-color: #cccccc;}
td:hover {background-color: #336699;}

which would result in a background-color change on those td-s, on roll-over, without any need whatsoever to use HTML-bloating javascript code.

Continue reading ‘:hover’

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…

Yep, I know – yet another tutorial on how to extract an image from its background.

Only this time, It’s about extracting images with sensitive areas (such as shadows, hair etc.) from relatively uniform backgrounds. We’re going to use for this example a human face, taken, with thanks, from imageafter.com.

OK, let’s get to it.

1. Open the image

Continue reading ‘Easy image contour extraction’

I needed, at some point, a “fire animation” that would be:
1. looping seamlessly
2. horizontally tile-able

I googled and I googled, in vain – I couldn’t find anything but a small tutorial about blending modes. So I took on doing it myself and with some Photoshop scribbling, I got what I wanted – something like this:

How can you too do something like this? Perty simple, just follow the steps in my tutorial:

(Romanian version here)

Continue reading ‘Fire in Photoshop – seamless animated loop’