Cumulus Support

Can someone help me with my new webcam page? I am trying to learn html and cannot figure out why my station name, location bar and navigation bar do not stay centered when using fullscreen. Driving me nuts! Did I not close something properly?

http://harwichweather.com/webcam.htm

Thanks,
Stan

You've got an unclosed <img> element, and an unclosed <a> element, but I can't say whether that is actually affecting your centering.

<img src="http://3cares.dyndns.org:8080/video4.mjpg" name="CameraImage" width="1024" height="634"

<p><a href="http://www.wunderground.com/webcams/sbu ... o.html"</p>

Thanks Steve. Closed those elements but that was not the cause of the centering problem. What better way to learn than to keep digging......so off I go.

Stan

This is incorrect:

<img src="http://3cares.dyndns.org:8080/video4.mjpg" name="CameraImage" width="1024" height="634"</img>

It needs to be

<img src="http://3cares.dyndns.org:8080/video4.mjpg" name="CameraImage" width="1024" height="634">

But I suspect that still won't fix your centering.

Thanks. You are also correct about the centering. I'll keep trying to figure it out, but it's not a big deal.

Your tag
<a href="http://www.wunderground.com/webcams/sbu ... video.html"

is not formatted or terminated properly.

The Title is centred - but left justified with the centred <h1>

You menu <table> tag is missing some parameters, it should be:
<table width="100%" border="0" cellpadding="0" cellspacing="0">

Thanks Mark and Steve. I'm slowwwwly learning. Appreciate the help.

Stan

steve wrote:It needs to be

<img src="http://3cares.dyndns.org:8080/video4.mjpg" name="CameraImage" width="1024" height="634">

But I suspect that still won't fix your centering.

I think with the declaration at the top of the webpage, the correct syntax is actually

<img src="http://3cares.dyndns.org:8080/video4.mjpg" name="CameraImage" width="1024" height="634" />
(the space and slash are I believe required by XHTML).
Someone who actually uses XHTML will no doubt confirm this, I use HTML5 which accepts either format.

However, my quick guess is the CSS: is causing the non-centering, as that is determining the position of any text, and would push the image out of the way. Again somebody who has better expertise than me can probably comment. I don't have time to look this up, due to serious family issues, but I think specifying a margin-left and margin-right of equal amounts together with 'clear: all;' would ensure an image was centred.

Incidentally, I'm using my Mum's Firefox and its Tools - 'web developer' - 'style editor' to experiment with your page.

After a quick look-see the only page I saw behaving itself is the gauges page. Have you been modifying weatherstyles.css ?

The main problem with your streaming cam page is the physical width of the image which will 'break' any css boundaries in nearly every PC monitor I know !

Thanks for the replies. I fixed the /> and compared the original CSS to the one I am using. All I did was modify the colors and background image. My background is 1280x1024 and I changed the background position from:
background-position: left bottom; to:
background-position: center;

I also changed my streaming image size to a manageable 640 x 480. My camera feed is a native 1280x800 so I tried to use a smaller size while maintaining the aspect ratio.

I see that only my gauges page is functioning properly now that you point it out.

Could my background be causing an issue? Is there a minimum/maximum size allowed?

This is a lot to learn for a 56 year old carpenter and I appreciate all of your help.
Stan

Stan, may I recommend that you take some time off from modifying the templates of your site and you look at the tutorials available at the W3Schools site, such as the HTML Tutorial and the CSS Tutorial - going through the tutorials will, at the very least, give you a basic idea on how to work with HTML and CSS.

Oh, by the way 56 is not that old - I started learning HTML at the age 50 (about 15 years ago) and PHP about 6-7 years ago...

Thanks, Ray. I will follow your advice.

Stan

Stan, if you have any questions while reading the tutorials, just send me a private message with your questions and I will try my best to explain in an easy to understand language...

Thanks Ray, I followed your advice and used the tutorials. Lots of head scratching but I have a little better understanding now. Got my webcam page working as I wanted now.

http://harwichweather.com/webcam.htm

Stan