Jump to content
Sign in to follow this  
alexb

Text Box Animation

Recommended Posts

alexb

Hi folks

 

I've created a temporary landing page and dragged a text box into the template. In order that the elements are always centered in every browser (tablets also - landscape and portrait) I've used the following code in the text box text field:

 

<p style="position: fixed; top: 50%;  left: 50%; margin-top: -130px; ;"><a href="http://alexbulgo.net/wp-content/uploads/2013/07/logo-gold.png"><img class="size-thumbnail wp-image-62" alt="logo-gold" src="http://alexbulgo.net/wp-content/uploads/2013/07/logo-gold-150x150.png" width="100" height="100" /></a></p>
<p style="position: fixed; top: 50%;  left: 50%; margin-top: -15px; ;">I'm just putting the finishing touches to my little online extravaganza.
I'll be with you shortly!</p>
 
I'd like to make use of the viewport animation feature, but while I can see that giving the elements a fixed position may interfere with the animation effect for 'scroll up, left, down etc', I can't see why when I select 'fade' for instance why it messes with the positioning. If I select any animation effect all the elements shunt up to the top of the window.
 
Would appreciate any thoughts!
 
Site: www.alexbulgo.net
 
Cheers
 
AB

Share this post


Link to post
Share on other sites
Rob

Alex, look at your code. It's incorrect.

 

<p style="position: fixed; top: 50%;  left: 50%; margin-top: -130px; ;">  You have two colons at the end of almost every style tag. 

 

It would be more appropriate, I think, to create custom classes or IDs rather than using inline CSS.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob

A pleasure!


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×