Problem with vertical-centering of header

  • 1
  • Question
  • Updated 3 years ago
  • Answered
  • (Edited)
I requested help with a problem a couple of days ago, and got a response from Laura. I replied to this but my question had been tagged as "Answered" so appears to have been closed. My response was this:

"Thanks for the response Laura.
I overcame the problem by adding a couple of breaks before the heading on those pages. But I'm still at a loss to know why those two pages are different from the rest. I'll remove the breaks from the "Farming" page in a moment, so would you mind having another look please?"

The page is http://theoldendays.yolasite.com/farming.php
Could someone please take a look and see what they think is the problem? The breaks have been removed from the page.
Photo of Philip Taylor

Philip Taylor

  • 355 Posts
  • 66 Reply Likes

Posted 3 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Philip,

I've been looking into this. There are a couple of things going on.

First of all..  all your pages except for the farming page actually have an incorrectly added code:

<style>
h1 { font-size:32px; font-weight:800;margin-top::0;margin-bottom:0; text-align: center; padding:0; color:#4444ff; }
h2 { font-size:24px; font-weight:500;margin-top::0;margin-bottom:0; text-align: center; padding:0; }
h3 { font-size:16px; font-weight:450;margin-top::0;margin-bottom:0; text-align: center; padding:0; }
p, li { font-size:16px; font-weight:400; }
a:link {color:blue; text-decoration:uline; }
a:hover { color:red; }
a:visited: color:blue; }
td {vertical-align:top; }
.centred { text-align:center;;margin:auto; }
.ads { background-color:lightgray;}
</style>

The a:visited is missing the initial curly bracket. It should be a:visited: { color: blue; }

Since that curly bracket is missing, it's causing your next line of code to not work td {vertical-align; top;} This is why your page heading is not moving to the top.

However, on your Farming page, your code looks like this:

<style>
h1 { font-size:32px; font-weight:800;margin-top::0;margin-bottom:0; text-align: center; padding:0; color:#4444ff; }
h2 { font-size:24px; font-weight:500;margin-top::0;margin-bottom:0; text-align: center; padding:0; }
h3 { font-size:16px; font-weight:450;margin-top::0;margin-bottom:0; text-align: center; padding:0; }
p, li { font-size:16px; font-weight:400; }
a:link {color:blue; text-decoration:uline; }
a:visited { color:blue; }
a:hover { color:red; }
td {vertical-align:top; }
.centred { text-align:center;;margin:auto; }
.ads { background-color:lightgray;}
</style>

As you can see the a:visited has the curly bracket. Since that is coded correctly, this means the next line code will work. This is why your page heading is now pulling up to the top. This is the correct behaviour for that code.

What you should do is go to every page and add in the missing curly bracket for a:visited.

Then, to make the page heading stay in the middle, you should remove this line: td {vertical-align:top; }

I hope that helps!

Please let me know if you have any further troubles.
Photo of Philip Taylor

Philip Taylor

  • 355 Posts
  • 66 Reply Likes
This reply was created from a merged topic originally titled How do I change the position of the page title.

I recently edited a page and added another page to my website, http:theoldendays.yolasite.com but the page headings for "cars" and "farming" (the new page) are  not centred vertically as the others are. Where do I access the settings for this? (strangely, I answered this question some time ago for another Member but I don't see the editing handles now).
Photo of Philip Taylor

Philip Taylor

  • 355 Posts
  • 66 Reply Likes
Hi Sanja.
Thanks a MILLION! Your comments were spot on, as usual.
That was a brilliant pick-up, considering there was no obvious connection between the a:hover and the header!  
I will do as you suggested. Have a great day.