Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Setting Style properties 1

Status
Not open for further replies.
rdrunner40

rdrunner40

MIS
Apr 25, 2002
156
0
0
GB
Hello all,

Really simple but it seems to be elluding me....

this is what i currently have

div id='status' style="color:#FF0000;width: 704; height: 50"></div>


What i am wanting to do is this.... i want it to read as below ....

THIS PAGE will CLOSE IN 'STATUS' seconds and for it to be in red and the font size to be around 14point bold

But i cannot get it to work

regards

Murray
 
Sort by date Sort by votes
It looks ok... make sure you put your text you want styled between the <div> tag's.

Code: 
<div id="status" style="color: #FF0000; width: 704px; height: 50px">THIS PAGE will CLOSE IN 'STATUS' seconds</div>

Peter Leing
Web Programmer
Cenlar FSB
 
Upvote 0 Downvote
Even better, since you have an id on that div, you could move all the styling into the head of the document or even a separate .css file:
Code: 
<style type="text/css">
 #status {
  color: #ff0000; /* red colored text */
  width: 704px; /* always remember the units */
  height: 50px; /* always remember the units */
  font-size: 14pt; /* define the size of the text */
  font-weight: bold; /* make the font bold */
 }
</style>

<div id="status">THIS PAGE will CLOSE IN 'STATUS' seconds</div>
If you want to make a countdown of seconds for this text, you will have to use Javascript:
 
Upvote 0 Downvote
Hi again,

I have done as suggested and it still will not display properly....

I get the message "This page will close in 'STATUS' seconds for about 1 sec and then i just get the numbers counting down

see below

<html>
<head>
<title>Unauthorised Access</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#status {
color: #ff0000; /* red colored text */
width: 704px; /* always remember the units */
height: 50px; /* always remember the units */
font-size: 14pt; /* define the size of the text */
font-weight: bold; /* make the font bold */
}
</style>


</head>

<SCRIPT>
TimeAvailable=10 //seconds
timer=setInterval("countdown()",1000)
function countdown()
{
TimeAvailable--
status=TimeAvailable //Remaining time available will be shown in the status bar...
document.getElementById('status').innerText=TimeAvailable
if(TimeAvailable==0)
{
window.close()
}
}
</script>


<body bgcolor="#FFFFFF" text="#000000">

<table width="518" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center">
<h1>Unauthorised Access</h1>
</td>
</tr>
</table>
<div align="center">
<h3><br>
<br>
Sorry, you are not authorised to enter the secure area of our intranet.</h3>
<p><br>
If you try again make sure check that your login details are correct.<br>
</p>
<form method="POST" action="--WEBBOT-SELF--">
<!--webbot bot="SaveResults" startspan U-File="_private/form_results.txt"
S-Format="TEXT/CSV" S-Label-Fields="TRUE" --><input TYPE="hidden" NAME="VTI-GROUP" VALUE="0"><!--webbot
bot="SaveResults" endspan -->
<p><input type="button" value="Back to Intranet Start Page" name="B3" onclick="self.close()"></p>


</form>

<div id="status">THIS PAGE will CLOSE IN 'status' seconds</div>

</div>
<p>&nbsp;
</p>
</body>
</html>

regards

Murray
 
Upvote 0 Downvote
Your code is replacing the content of the element with an id called 'status' with the decreasing numbers. Change parts of your code accordingly:
Code: 
<style type="text/css">
 [b].[/b]status {
  color: #ff0000; /* red colored text */
  width: 704px; /* always remember the units */
  height: 50px; /* always remember the units */
  font-size: 14pt; /* define the size of the text */
  font-weight: bold; /* make the font bold */
 }
</style>

...

[b]<p class="status">THIS PAGE will CLOSE IN <span id="status">10</span>&nbsp;seconds</p>[/b]
The bottom part is used instead of <div id="status">THIS PAGE will CLOSE IN 'status' seconds</div>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

notsoevilgenius
  • Locked
  • Question
CSS Precedence - Can I override the CSS Style Sheet
Replies
6
Views
76
notsoevilgenius
notsoevilgenius
c0deM0nK424
  • Locked
  • Question
Mozilla Firefox Style - New Tab Controls - Thumbnail Images for 'recent websites' viewed ?
Replies
3
Views
56
ChrisHirst
ChrisHirst
PCHomepage
  • Locked
  • Question
Applying Tag Style Only Within DIV 1
Replies
2
Views
40
PCHomepage
PCHomepage
tshad
  • Locked
  • Question
Class Style order
Replies
3
Views
36
ChrisHirst
ChrisHirst
Solojer
  • Locked
  • Question
Is Math in Style attribute posible?
Replies
3
Views
32
feherke
feherke

Part and Inventory Search

Sponsor

Back
Top