Clock Replacement in Template

[krmidas]

I've been playing with different analog clocks that I've found online. I've found that by embedding the image and using html like "style="position: absolute; top: 10px; left: 10px;" I can size and position the clock perfectly...

...until I go to another computer that has it's screen resolution set differently. Then the clock will be in the wrong spot.  What's the proper way to accomplish what I'm trying to do?

-Tom

[Mr.Meteo]

Hi Tom,

HTML you mentionned: "style="position: absolute; top: 10px; left: 10px;"
effectively position things in an absolute place, but "top: 10px; left: 10px"
is not the same place for a 1024x768 then a 1900x1200 screen.
That is why by default (when not mentioned) position is set to relative!

Today array of resolutions are too wide, we can't use "absolute" position
as we have to rely on a left aligned position. But if we use left alignment,
we can't go farther then 1024px at max, for small screen... and on a big
screen we're positioned on half width... as we use only half screen!  ???

Better solution is always to be centered because "center" is a calculation
and on small or "huge" screens, center is allways... center! And unused
space is splited on both sides of the browser's screen... then less seen
as a lost space.

Then, the right way is to use the "russian doll" concept (small, smaller and
smallest dolls inside a bigger one). As you see in my templates, often you
have a "Div" inside a "Div", which is also inside an other "Div". These "Div"
sometimes seems empty or useless, but they define (or cut) space in the
way that we want:

1st Div - Cut screen space in "x" parts
2nd Div - Prepare space (alignment) for final Div
3rd Div - is the final container as small as possible to contain final object

Then, that way we divide screen space in big parts (1st), a smaller part (2nd)
is there to place roughly your final object and 3rd Div is intended to be the
final container to be as close to the object (clock) as possible; because often
that object contain its own position that we don't want to be bother by it!

Imagine a script contained in a <iframe....>...</iframe> that is "builded"
to be left positionned; a 100 x 100px left positionned clock has no effect
in a 100 x 100px div! 

I know, it's not natural for us Guys, to play with (Russian) "Dolls" but it
is so easier to position things like that!! 

Regards,
Jacques

[krmidas]

Can you give me an example in HTML of how I'd indicate the position within the <div>? What is the format of the position statement?

[Mr.Meteo]

Hi Tom,

As I told you, Position: relative; has not to be mentionned as it is default!
Then, in a Div structure, we could do that:

<div style="margin: 0 auto"> Is the way to center a Div inside an other (margin is for outside)
<div style="text-align: center"> To center text (and most objects) inside a Div. "left" and "right" exist.

Also, as I wrote, we can remember that by default, alignment is LEFT and kind of "top: 0 and left: 0"
then, we calculate to "push" objects from its position by using:

in your style="..":
margin-left: 10 px; (to push left 10 pixel)
or margin-top: 10px; (to push down 10 pixels)

Remember this: All Objects have;
- outer space controled by margin.
- Inner space controlled by padding.

you could controle all 4 "sides" of margin or padding with top, right, bottom, left.
You could specify 4 individual sides in one like this (always clockwise!)

margin: 0px 10px 35px 4px;

A little image to illustrate things:

Regards,
Jacques

[krmidas]

Got the positioning of the new clock figured out! Thanks!

http://krmidas.home.comcast.net/~krmidas/cumulus/index.htm

[Mr.Meteo]

Hi Tom,

Pretty cute this new clock! 
... as your autumn header images! 

Template coming real "personal"! 

Bravo!
Jacques

[krmidas]

Discovered that the clock I had only would display the time of the local computer, not MY local time, so it was back to work finding another clock.

I like my new one better, since it has the smooth second hand action. In addition, I was able to better capture the proper blue tones of your template.

http://krmidas.home.comcast.net/~krmidas/cumulus/index.htm

-Tom

[Mr.Meteo]

Hi Tom,

Pretty good looking clock!

I've searched quite a few to find this clock... it's not the most beautiful,
but it have many options on timezone and most important... not a Flash based
(as flash is hated by all iPhone, iPad and other iApple devices)
That is why I have lowered my "taste" for that clock.

Then, continue to take me informed of your searches if you become lucky! 

Best regards, 
Jacques

[avoorpool]

Hey Tom,

Since I didn't came any further than having my clock 'very' transparent on the main page, this is an awesome site to create exactly the right clock (for the right page  ....!!!!

Thanks for bringing it up!!

Cheers,

Arthur

[krmidas]

I like the way you sampled the colors from the surrounding image. Very nice!

I've been really curious about the flying seagulls that appear in the background of this page:

http://www.wheelocknet.net/ss/SS_New_1d.html

I reached out to the guy, but haven't heard back from him. I also haven't been able to find anything like it in my own searches. Might be nice to have some birds flying trough the clouds!

-Tom

[avoorpool]

Hey Tom,

Thanks for the comments.
Indeed, the clock 'blends-in' nicely with the Dutch Winter Wonderland scenery (actually taken not far from my 'old' home town!)

I checked the Spanish website, and it's very nice.
So far no luck from this side, searching for web-animations. Must be out there!!

Pls let me know when you get a response.

Cheers,

Arthur

[krmidas]

If you move your mouse toward the flock, they scatter!

[avoorpool]

Looks like a 'real' bird-hunting experience 

Great stuff!!!