Weborum Webmaster Forum > CSS Float
Help - Search - Members - Calendar
Full Version: CSS Float
Weborum Webmaster Forum > Web Page Design > CSS
Willy Duitt
Mar 21 2005, 01:15 AM
If you run the below codes you will see that the top left of the picture has a black background including a date/time stamp... I did not think of it until I wrote these codes but I would like to move my "Next Reload in ?? seconds" directly beside it, matching the font-size/family as best I can... I think that black looks like heh and would like to blend everything together, but I had a heck of a time to get my spans floated, allowng me to set a width on the variable timer to keep it from collapsing and jumping around...

If any of you CSS Guru's would care to have a go...
I would certainly appreciate it, but it is no biggie...

CODE

<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/REC-html40/loose.dtd">
<html lang="en-US">
 <head>
   <title>Iditarod WebCam</title>
<style type="text/css">
<!--
 body{ background-color: #000000;
       font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 18px;
       color: #FFFFFF;
 }

 h1{   text-align: center;
       color: #0000FF;
 }

 div.center{
       text-align: center;
       clear: both;
 }

 div.center span.left{
       width: 50%;
       float: left;
       text-align: right;
 }

 div.center span.center{
       width: 35px;
       float: left;
       text-align: center;
 }

 div.center span.right{
       float: left;
 }

-->
</style>
<script type="text/javascript">
<!--//
 function refreshCam(speed,image){ // Written By: WillyDuitt@hotmail.com \\;
  var count = Number(document.getElementById('timer').innerHTML)-1;
   if(count < 0 && document.images){
      document.getElementById('webcam').src = image+'?'+new Date().getTime();
      count = speed;
   }  document.getElementById('timer').innerHTML = count;
      setTimeout(function(){refreshCam(speed,image)},1000);
 }
//-->
</script>
</head>

<body ######="refreshCam(10,'http://nomecam.iditarod.com/netcam/nomecam.jpg')">
<h1>Iditarod WebCam</h1>
 <div class="center">
  <img id="webcam" src="http://nomecam.iditarod.com/netcam/nomecam.jpg">
   </div>

 <div class="center">
  <span class="left">Next reload in</span>
   <span class="center" id="timer">25</span>
    <span class="right">seconds.</span>
     </div>

</body>
</html>


.....Willy

Edit: <body ######="refreshCam
Please note that the: ######
Should be: onload
leo
Mar 21 2005, 08:28 AM
i can do it no problem in firefox but it sits on the top in ie:

CODE

<body onload="refreshCam(10,'http://nomecam.iditarod.com/netcam/nomecam.jpg')">
<h1>Iditarod WebCam</h1>
<div class="center">
<div style="position:relative;top:20px;left:130px;">
 <span class="left">Next reload in</span>
  <span class="center" id="timer">25</span>
   <span class="right">seconds.</span>
    </div>
 <img id="webcam" src="http://nomecam.iditarod.com/netcam/nomecam.jpg">
  </div>



</body>
Willy Duitt
Mar 21 2005, 08:56 PM
Tanks for trying Leo..

I too had problems getting it to work in both IE and Firefox (what worked in one did not work in the other) and decided it would be more prudent to scrap that idea in the interest of using the script with other webcams that do not have that time stamp there... What I did was wrap the image with spans to create a picture frame type of effect...

CODE

 .border1{
 border: 2px solid #FFFF00;
 }

 .border2{
border: 6px solid #0000FF;
 }

 .border3{
border: 2px solid #FF0000;
 }


  <span class="border1"><span class="border2"><span class="border3">
   <img id="webcam" src="http://nomecam.iditarod.com/netcam/nomecam.jpg"></span></span></span>


This makes some seperation between the image and the background so that the time stamp and the background do not run together... After all, 'ya gotta keep it seperated... cool.gif

.....Willy
leo
Mar 21 2005, 09:16 PM
yeah i couldn't get anything that worked to work in both. Doesn't seem to work in firefox willy, the "frame" sits around the bottom for me:

Willy Duitt
Mar 21 2005, 09:51 PM
argh crap blush.gif
Willy Duitt
Mar 21 2005, 09:53 PM
Can you use CSS to put a border color on the image itself...
I'd try but, I don't like that script anymore...
Besides, the Iditatrod is over...
There's always next year...

......Willy
leo
Mar 21 2005, 09:54 PM
sure you can style an image border smile.gif


CODE
<img id="webcam" style="border:6px double red;" src="http://nomecam.iditarod.com/netcam/nomecam.jpg">
Willy Duitt
Mar 21 2005, 10:00 PM
Cheers, that'll work!! thumbsupsmileyanim.gif

Don't know why I did not think of that before...
Now I can dress up my pron collection... whistle.gif

.....Willy
leo
Mar 21 2005, 10:12 PM
hehe, you're welcome smile.gif
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.