Hi Guys,

 

I'm experiencing differences to how the page is loading when this content is placed at the bottom of the page.

 

http://rcestimating.co.uk/index.php I have this content placed at the top.

	<h5 class="zoomout">Fast</h5>

	<h5 class="zoomout">Accurate</h5>

	<h5 class="zoomout">Reliable</h5>
 
	<h5 class="nofade">RC ESTIMATING LTD</h5>

http://rcestimating.co.uk/index2.php here I have this content placed at the bottom; which is ideally what I want as this text is quite irrelevant and I don't want it ranking high in seo. The problem is that when this content is placed at the bottom it does not load in the correct order and my css formatting as below does not work. This seems quite strange!

h5.zoomout {
	width: 100%;
	font-size: 4em;
	text-align: center;
	top: 45%;
	padding: 0;
	margin: 0;
	position: absolute;
	display: inline-block;
	opacity: 0;
	animation: zoomout 0.60s;
	-webkit-animation: zoomout 0.60s;
	-moz-animation: zoomout 0.60s;
	-ms-animation: zoomout 0.60s;
	-o-animation: zoomout 0.60s;
}

h5.zoomout:nth-child(2) {
	animation-delay: 0.60s;
	-webkit-animation-delay: 0.60s;
	-moz-animation-delay: 0.60s;
	-ms-animation-delay: 0.60s;
	-o-animation-delay: 0.60s;
}

h5.zoomout:nth-child(3) {
	animation-delay: 1.20s;
	-webkit-animation-delay: 1.20s;
	-moz-animation-delay: 1.20s;
	-ms-animation-delay: 1.20s;
	-o-animation-delay: 1.20s;
}

h5.nofade {
	width: 100%;
	font-size: 1.75em;
	text-align: center;
	top: 45%;
	position: absolute;
	opacity: 0;
	border-bottom: 5px solid Lime;
	animation: fade-addbottomborder 2.40s linear 1.80s forwards;
	-webkit-animation: fade-addbottomborder 2.40s linear 1.80s forwards;
	-moz-animation: fade-addbottomborder 2.40s linear 1.80s forwards;
	-ms-animation: fade-addbottomborder 2.40s linear 1.80s forwards;
	-o-animation: fade-addbottomborder 2.40s linear 1.80s forwards;
}

Why are you making this so complicated?

 

Forget all the zoomy fading stuff and and just put your tagline on the page. There are a zillion other things you need to get sorted before adding any effects either at the top or the bottom.

 

And don't worry about Google indexing things in a particular way. It doesn't work like that. Google will compare the content with the page title, H1, inbound link anchor text, trust marks and citations and from there determine for which keywords the page should rank for.

 

however to answer your question, it may not be working because you have you have extra closing divs and some weird positioning in the CSS

Edited November 4, 20178 yr by fisicx

Hi Fisicx, thank you for post, yes there are many things to fix however at this moment as the website is having changes left, right and center and I'm making it up as go - at this moment in time I'm concerned with what I posted about as this is fresh in my memory and it's natural to work in a sequence as I'm going to run into plenty more problems as I go.

 

'And don't worry about Google indexing things in a particular way. It doesn't work like that. Google will compare the content with the page title, H1, inbound link anchor text, trust marks and citations and from there determine for which keywords the page should rank for.' -

I've read many articles that contradict this, so things must've changed recently. Yes I've read many articles on strucutring headings, links with keywords so thanks for that.

 

You were right, I had a stray closing div where I was experimenting with microdata earlier but microdata makes it more difficult when identifying divs with the web developer tools as I'm sure you know.

I've removed that div and at least the completely seperate classes are working but the :nth childs are still not working properly. I really thought that would've fixed it as it's working fine in the first example so I would not think the problem would lie in it's css as that's exactly the same in both examples.

 

Thanks again.

Edited November 4, 20178 yr by Precise Formwork