PDA

View Full Version : <div> and triple centering over the same spot


nNemethon
05-30-2004, 05:40 AM
Hello and welcome once again to my "Oooh my grey cells hurt" page. ;)

Upon discovering the <DIV> command, I became over the moon with the absolute; function. Wonderful way to chuck anything pretty much anywhere. Though, now I begat a problem...

I have implemented a (yawn) random-quote thingy in one of my page-frames. It all works rather well and I am impressed at the simplicity of it. But here is where the dilemma starts... I am trying to center the quote on the screen (accomplished), but I am also attempting to blur it slightly by using <div> commands to offset the same quote 1 pixel to the left and one pixel to the right of the orig quote (Using diff colours of course). I can do this easily by using absolute;, only I am unable now, with the centering code, to align all three quotes on the same pixel height.

In short: I am after a little help to get all three quotes on the same pixel height (non-centered), horizontally centered, and 2 offset by a pixel each way of original.

My page code is as follows:

<HTML>
<HEAD>
<META NAME="Author" CONTENT="nNemethon">
<style>
#quot {text-align: center;}
#quotl {text-align: center;}
#quotr {text-align: center;}
</style>

</HEAD>

<script language="JavaScript">
<!-- Hide from old browsers
// Copyright © 1999 Doug Popeney
// Created by Doug Popeney (easyjava@easyjavascipt.com)
// JavaScript Made Easy!! - http://www.easyjavascript.com

var a = Math.random() + ""
var rand1 = a.charAt(5)
quotes = new Array
quotes[1] = "MESSAGE #1"
quotes[2] = "MESSAGE #2"
quotes[3] = "MESSAGE #3"
quotes[4] = "MESSAGE #4"
quotes[5] = "MESSAGE #5"
quotes[6] = "MESSAGE #6"
quotes[7] = "MESSAGE #7"
quotes[8] = "MESSAGE #8"
quotes[9] = "MESSAGE #9"
quotes[0] = "MESSAGE #10"
var quote = quotes[rand1]
// -- End Hiding Here -->
</script>
<BODY BGCOLOR=black BACKGROUND="bottom.jpg" NOSAVE>
<font color="white">

<div id="quot">
<script language="JavaScript">
<!-- Hide this script from old browsers --
document.write("<b>" + quote + "</b>")
// -- End Hiding Here -->
</script>
</DIV>

<div id="quotl">
<script language="JavaScript">
<!-- Hide this script from old browsers --
document.write("<b><font color=lime>" + quote + "</b>")
// -- End Hiding Here -->
</script>
</DIV>

<div id="quotr">
<script language="JavaScript">
<!-- Hide this script from old browsers --
document.write("<b><font color=red>" + quote + "</b>")
// -- End Hiding Here -->
</script>
</DIV>

</BODY>
</HTML>

The colours do not matter at the moment, they are just for testing purposes.

Another (hopefully easy) query, is how do I get the random quotes to go above 10? I would like to be able to go unlimited, tho I dont have that many quotes. =D

(Insert quote from Einstein's Relativity and of Improbability in the Infinity) ;)

Thank-you if you are able to help on this one. I have toyed away approx 8 hours now on changing variables, tags, code and trauling msg forums all over, and my head really hurts a lot now. ;)

nNemethon

agent002
05-30-2004, 06:01 AM
Ok, this looks pretty good to me, it doesn't even involve absolute positioning, just some negative margins. I implemented a slightly other random quote picker that lets you add as many quotes as you want:
<HTML>
<HEAD>
<META NAME="Author" CONTENT="nNemethon">
<style>
#quot {text-align: center; height: 15px; line-height: 15px; z-index: 3; }
#quotl {text-align: center; margin-top: -15px; margin-left: -1px; line-height: 15px; z-index: 2; }
#quotr {text-align: center; margin-top: -15px; margin-right: -1px; line-height: 15px; z-index: 1; }
</style>

</HEAD>

<script language="JavaScript">
<!-- Hide from old browsers

var quotes = new Array(
'Message #1',
'Message #2',
'Message #3',
'Message #4',
'Message #5',
'Message #6',
'Message #7',
'Message #8',
'Message #9',
'Message #10',
'Message #11',
'Message #12');

var quote = quotes[Math.floor(Math.random() * quotes.length)];

// -- End Hiding Here -->
</script>
<BODY BGCOLOR=black BACKGROUND="bottom.jpg" NOSAVE>
<font color="white">

<div id="quot">
<script language="JavaScript">
<!-- Hide this script from old browsers --
document.write("<b><font color=yellow>" + quote + "</font></b>")
// -- End Hiding Here -->
</script>
</DIV>

<div id="quotl">
<script language="JavaScript">
<!-- Hide this script from old browsers --
document.write("<b><font color=lime>" + quote + "</font></b>")
// -- End Hiding Here -->
</script>
</DIV>

<div id="quotr">
<script language="JavaScript">
<!-- Hide this script from old browsers --
document.write("<b><font color=red>" + quote + "</font></b>")
// -- End Hiding Here -->
</script>
</DIV>

</BODY>
</HTML>

coothead
05-30-2004, 07:02 AM
Hi there nNemethon,

You might to try this variation also.
It removes the 'untidy' scripts from the body section..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>random quotes</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta name="Author" content="nNemethon"/>
<style type="text/css">
<!--
body {
background:url(bottom.jpg) black;}
.quotes {
width:100%;
position:absolute;
top:100px;
text-align:center;
font-size:24px;
font-weight:bold;
}
#quot {
color:white;
position:absolute;
left:2px;
z-index:0
}
#quotl {
color:lime;
position:absolute;
left:0;
z-index:2
}
#quotr {
color:red;
left:4px;
z-index:1
}
//-->
</style>

<script type="text/javascript">
<!--

// Copyright © 1999 Doug Popeney
// Created by Doug Popeney (easyjava@easyjavascipt.com)
// JavaScript Made Easy!! - http://www.easyjavascript.com

function randomQuote() {
quotes = new Array();
quotes[0] = "MESSAGE #0";
quotes[1] = "MESSAGE #1";
quotes[2] = "MESSAGE #2";
quotes[3] = "MESSAGE #3";
quotes[4] = "MESSAGE #4";
quotes[5] = "MESSAGE #5";
quotes[6] = "MESSAGE #6";
quotes[7] = "MESSAGE #7";
quotes[8] = "MESSAGE #8";
quotes[9] = "MESSAGE #9";
quotes[10] = "MESSAGE #10";
quotes[11] = "MESSAGE #11";
quotes[12] = "MESSAGE #12";
quotes[13] = "MESSAGE #13";
quotes[14] = "MESSAGE #14";
quotes[15] = "MESSAGE #15";
quotes[16] = "MESSAGE #16";

var rand1=Math.floor(Math.random()*quotes.length);
var quote = quotes[rand1];

document.getElementById("quot").innerHTML=quote;
document.getElementById("quotl").innerHTML=quote;
document.getElementById("quotr").innerHTML=quote;
}
onload=randomQuote;
// -->
</script>
</head>
<body>


<div class="quotes" id="quot"></div>

<div class="quotes" id="quotl"></div>

<div class="quotes" id="quotr"></div>

</body>
</html>

coothead
05-30-2004, 07:12 AM
Hi Jere,

Did you not notice that the main script
in your modification is entrenched in
'No man's Land' between...
</head> and <body> :D

nNemethon
05-30-2004, 07:53 AM
You're an absolute champ 002 ;) That's 3 times you've now helped me.... What would this place do without you? :D

Cheers

Oh and Coothead. TY too. I was gonna mention that i dumped the main script after </head> LOL and yes. I was also gonna mention the fact to ignore the wonderful shabbiness of the coding. I knew there would be a cleaner way, but, *sigh* it takes a while to get the ephemerel around these things.

So thank-you as well for the clean code :)

nNemethon
:D

agent002
05-30-2004, 08:05 AM
Thanks Coothead, no, I didn't notice that... and I'm supposed to be young and alert to everything :D

No problem, nNemethon, I'm glad that I was able to help... and hoping to see you around here in future too :)

nNemethon
05-30-2004, 08:05 AM
Both versions work wonderfully, so I do not know to whom I shall pay tribute to for the use of thiers. BUT - I will put credit notes in the main index framework and also in the quote page within the coding.

And Coothead, either you are rather bored, or you are a genuinely helpful person. That's a bit of work to re-translate that mess I made ;)

So thank you both. If interested, I can send you the website address once it's in place permenantly, but it's just a thing I made for a game I play rather a lot. mainly for my and a few friends use.

TY again all

nNemethon

coothead
05-30-2004, 08:25 AM
Hi there nNemethon,

quote:

'Coothead, either you are rather bored, or you are a genuinely helpful person.'

I cannot explain why, but I have this overwelming compulsion to convert all code into....

XHTML 1.0 Strict

My doctor tells me that this is a terminal condition and unfortunately - for me - irreversible :supereek: