5 replies [Last post]
craigtaylor74
craigtaylor74's picture
Offline
Regular
Barcelona
Last seen: 17 years 37 weeks ago
Barcelona
Timezone: GMT+1
Joined: 2004-02-04
Posts: 31
Points: 0

Can anyone tell me how to place my javascript date securely in the bottom right of my page (opposite the bottom links)? I don't like using top: XXpx; cos that means adjusting it for every page. Any better ideas?
Have a look at www.glasgowapartment.co.uk or look at my code.

Ta,
Craig

http//www.ctam.co.uk

cvk
Offline
Regular
right behind you
Last seen: 17 years 50 weeks ago
right behind you
Timezone: GMT-5
Joined: 2003-11-06
Posts: 14
Points: 0

Have you tried bottom: 0?

Have you tried putting an absolutely positioned div containing a date in your page-container div, giving the container div "position: relative;", and giving the date div "bottom: 0;"?

Here's an example of a date div that's fixed at the bottom of a container div:

CSS:

<style type="text/css">
#content {
	width: 500px;
	position: relative;
	padding-bottom: 20px; /* gives the date some room to fit */
}
#date {
	position: absolute;
	bottom: 0;
}
</style>

HTML:

<body>
<div id="content">

<div id="date">2004-03-01</div>

<p>Lorem ipsum dolor ...</p>
<p>Pellentesque pede mi, ...</p>
<p>Fusce diam urna, tempus ...</p>
<p>Suspendisse potenti. ...</p>
<p>Maecenas ut mauris ...</p>

</div>
</body>

c v k @ z y b x . c o m

craigtaylor74
craigtaylor74's picture
Offline
Regular
Barcelona
Last seen: 17 years 37 weeks ago
Barcelona
Timezone: GMT+1
Joined: 2004-02-04
Posts: 31
Points: 0

bottom - left placement of date

thanks for that. it seems relative or absolute is my problem (one of them anyway!) ... i just don't get it. Do you have any suggestions for sites that explain this well? Also does bottom left work just as well as top right coordinates?

http//www.ctam.co.uk

cvk
Offline
Regular
right behind you
Last seen: 17 years 50 weeks ago
right behind you
Timezone: GMT-5
Joined: 2003-11-06
Posts: 14
Points: 0

bottom - left placement of date

An element with "position: absolute;" is positioned absolutely relative to the padded edge of the nearest ancestor (container) that doesn't use "position: static;" (which leaves position-relative, position-fixed, and position-absolute).

It's a bit confusing, I guess, but just remember that "position: absolute;" doesn't mean the coordinate system is the top-right corner of the browser window unless the body is the immediate container (or the nearest ancestor that doesn't use "position: static;").

I'm not sure where you could read more about this, but I'll Google a bit to see what I can find.

c v k @ z y b x . c o m

cvk
Offline
Regular
right behind you
Last seen: 17 years 50 weeks ago
right behind you
Timezone: GMT-5
Joined: 2003-11-06
Posts: 14
Points: 0

Eureka!

Here's some information I found on it at Stopdesign:

Making the Absolute, Relative

c v k @ z y b x . c o m

craigtaylor74
craigtaylor74's picture
Offline
Regular
Barcelona
Last seen: 17 years 37 weeks ago
Barcelona
Timezone: GMT+1
Joined: 2004-02-04
Posts: 31
Points: 0

bottom - left placement of date

thanks. that has helped me loads.

http//www.ctam.co.uk