Help with centering

sbuckler · Post by **sbuckler** » Sun 13 Jan 2013 2:35 pm

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

Post by **steve** » Sun 13 Jan 2013 2:42 pm

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>

sbuckler · Post by **sbuckler** » Sun 13 Jan 2013 3:31 pm

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

Post by **steve** » Sun 13 Jan 2013 3:39 pm

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.

sbuckler · Post by **sbuckler** » Sun 13 Jan 2013 4:27 pm

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

mcrossley · Post by **mcrossley** » Sun 13 Jan 2013 5:04 pm

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">

sbuckler · Post by **sbuckler** » Sun 13 Jan 2013 5:27 pm

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

Stan

sfws · Post by **sfws** » Sun 13 Jan 2013 6:19 pm

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

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

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:

Code: Select all

style="text-align: center;"

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.

beteljuice · Post by **beteljuice** » Sun 13 Jan 2013 11:09 pm

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 !

sbuckler · Post by **sbuckler** » Mon 14 Jan 2013 5:21 pm

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

gemini06720 · Post by **gemini06720** » Tue 15 Jan 2013 6:19 am

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...

sbuckler · Post by **sbuckler** » Tue 15 Jan 2013 12:23 pm

Thanks, Ray. I will follow your advice.

Stan

gemini06720 · Post by **gemini06720** » Tue 15 Jan 2013 12:35 pm

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...

sbuckler · Post by **sbuckler** » Fri 01 Feb 2013 2:43 pm

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

Cumulus Support

Help with centering

Help with centering

Re: Help with centering

Re: Help with centering

Re: Help with centering

Re: Help with centering

Re: Help with centering

Re: Help with centering

Re: Help with centering

Re: Help with centering

Re: Help with centering

Re: Help with centering

Re: Help with centering

Re: Help with centering

Re: Help with centering