Templatix Blog

Sometimes, as in the case of the graphically rich yet still editable buttons, you may need to use elements positioned ABSOLUTE in a context positioned RELATIVE.
We’re talking about the “position” CSS property, that can take one of 4 possible values: absolute / relative / fixed / static. I’ll leave aside fixed and static for now, and I’ll focus instead on those that interest us here: relative si absolute.

In this image I’m using as an example, the blue border represents the parent element (the context), the red border is an element positioned absolute, and the green border represents an element positioned relative. The red and green elements are included, code-wise, in the blue one, obiously.

Relative – using the position: relative; CSS property, we instruct the browser to position the element relative to its context, in a fluid mode. In other words, we force the relative element to depend, position-wise, on it’s parent, but also on the in-line flow of the other elements present in the same context. Put bluntly, we force the element to behave like a letter in a block of text.
Absolute - using the position: absolute; CSS property, we instruct the browser to position the element relative to its context, but independent of the in-line flow of the other elements in the context. In other words, we force the element to maintain fixed position coordinates, expressed in pixels or directions.

At least in theory. Continue reading ‘ABSOLUTE-positioned elements in RELATIVE context’

If you didn’t know it yet, there’s a little CSS “hack” that, properly used, not only passes all classic validation systems, but is also very useful. We’re talking about !important;.

Basic usage: instead of width: 300px; you can write width: 300px !important;. But, more important, what does it do? Let’s see…

The basic function of !important; is to priorotize/set an ierarchy among the CSS properties attached to a page (be those inline or linked in external css files). In this respect, it can be used for 2 main purposes: Continue reading ‘!important;’

I googled this shit till I saw green… Why? Because I wanted to get a simple thing: a DIV horisontally centered in the page. IE, simple and retarded as it is, worked. FF instead, with it’s purist pretentious flavour, refused. That is, until I found out why.

Saner browsers (FF included) don’t take things “for granted”. They don’t work user-friendly, but mathematically. To position an element in relative terms, the browser needs to know exactly what are the parameters needed for the calculation of that particular relative position. Since, in this case, we’re talking horisontal positioning, the browser needs to know the div’s horisontal margins (left and right). In other words, if I want a DIV to be horisontally centered, I MUST tell it to have:

margin-left: auto;
margin-right: auto;

Without these simple settings, FF would stubbornly position any non-floating div to the left margin of it’s holder/parent, irrespective of that holder/parent’s text-align.

All said and done, the problem is solved. Too easy? Doesn’t matter, what matters is that it helps you.

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’