Canvas Support

animated text placement within div

4 replies · opened Nov 21, 2016

IivanpossNov 21, 2016

I have animated text as per code below. I will be using a similar page title section on multiple pages but I would like to be able to maneuver the placement of the text within the container depending on the particular page and background image I am using. Right now the text is centering (top/bottom) within the div. I can control the left/right placement by adding padding to the H1, but when I try to use padding to change vertical placement it increases the background image too. If I try to add <br> as spacers it also increases the background image. What is the correct method to change both vertical and horizontal placement of the animated text? As an example I would like this text near the bottom of the background image. also where is the code that is placing this text currently in the center? animate.css?

&lt;section id="page-title" style= "padding: 125px 0; background:url('Grads_sil.jpg') center center no-repeat; background-size: cover;"&gt;

	&lt;div class="container clearfix"&gt;
             
                    &lt;h1 data-animate="fadeInLeft" data-delay="1200" style= "font-size: 60px; color: red; font-weight: bold;"&gt;CAP, GOWN & TASSELS&lt;/h1&gt;
                    &lt;br&gt;
            
                    &lt;p data-animate="fadeInLeft" data-delay="3200" style="font-size: 40px; color: red; font-weight: normal;"&gt;**  			
                        In Awesome Rich Colors**&lt;/p&gt;   
			
	&lt;/div&gt;
           
      &lt;/section&gt;&lt;!-- #page-title end --&gt;

Thank you

IivanpossNov 21, 2016

I think I got it- after a ton of trying different things:

I gave the div an id of "testposition"

then added to head

#testposition {
top: 160px;
}

seems to work -
is this correct?

SSemicolon WebSTAFFNov 21, 2016

Hello,

  1. The Solution you are using is Definitely Correct! You can modify the Relative Position of an Element by applying the Top, Left, Bottom, Right Values.

  2. The centering of the Titles are handled by the #page-title Block in the style.css File.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

IivanpossNov 22, 2016

Thank you- yes I figured it out - so my style in the head overrides the style.css file- no reason to ever look in there I guess since i can change on a page level or add a custom css file. Which is better or preferred - create a custom.css and link to css or add the css style to head?

SSemicolon WebSTAFFNov 24, 2016

Hello,

It is recommended to add the CSS to the Document <head> when you are just using the CSS for that particular page. However, if you need to use the CSS multiple times for different pages or if like to change the Default Styling of any element or add your Custom Classes, then it is recommended to use the css/custom.css File.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard