Help with css



  • OK thanks it works, my mistake



  • למעשה It doesn’t help me, being I have animated text with one line and some with three lines I need the next p/div to adjust accordingly.
    in other words is there any way I can add to

    @keyframes anim-2 {
    	0%, 33.33% { left: -100%; opacity: 0; }
      41.63%, 58.29% { left: 25%; opacity: 1; }
      66.66%, 100% { left: 110%; opacity: 0; }
    

    height?



  • I’m not good in CSS… but why not add an absolute to the 2nd paragraph?

    Something like:

    .ex2 {
    	position: absolute;
    	display: block;
    	top: 15em;
    }
    


  • @Knaper-Yaden

    @marketingmaniac said in Help with css:

    The problem is that the items are all position absolute so they don’t ‘take up space’ on the page.



  • @Manual that was the issue. And the solution would be to put the 2nd paragraph also absolute.



  • @Knaper-Yaden said in Help with css:

    @Manual that was the issue. And the solution would be to put the 2nd paragraph also absolute.

    I don’ know why (I guess I am even worse at CSS 😊 ) but when I try it, the div just disappears somewhere.



  • @Manual said in Help with css:

    I don’ know why (I guess I am even worse at CSS 😊 ) but when I try it, the div just disappears somewhere.

    See this one.





  • That is not the result based on your initial example. If you want to add more text to the animated paragraphs, then you’ll need to change the Paragraph 2 CSS to 25em or so.



  • @Manual said in Help with css:

    למעשה It doesn’t help me, being I have animated text with one line and some with three lines I need the next p/div to adjust accordingly.
    in other words is there any way I can add to

    @keyframes anim-2 {
    	0%, 33.33% { left: -100%; opacity: 0; }
      41.63%, 58.29% { left: 25%; opacity: 1; }
      66.66%, 100% { left: 110%; opacity: 0; }
    

    height?


  • Business +

    @Knaper-Yaden
    you’ve essentially done the same thing I did but in a different way, you set it to absolute (which is absolute to the most recent relative in this case the top) and positioned it 15em down - so again it isn’t changing if the length of the paragraph changes.

    This is your exact example but with the third paragraph lengthened (change the view, it’s easier to see it this way)
    Capture.JPG

    @Manual , thinking about it - do you really want the next paragraph (and rest of the content on the page) to jump up and down as the slider goes through its slides? I think the best would be to change your animated paragraphs to be more or less the same length (a line or two either way is fine) and set the next paragraph to start below it - not absolute, because you’ll have the same issue with any content coming after it, the div solution will fix that. If you’re concerned it will look messy with some empty space for the shorter animated paragraphs, maybe make the whole strip a different colour.



  • @marketingmaniac said in Help with css:

    @Manual , thinking about it - do you really want the next paragraph (and rest of the content on the page) to jump up and down as the slider goes through its slides? I think the best would be to change your animated paragraphs to be more or less the same length (a line or two either way is fine) and set the next paragraph to start below it - not absolute, because you’ll have the same issue with any content coming after it, the div solution will fix that. If you’re concerned it will look messy with some empty space for the shorter animated paragraphs, maybe make the whole strip a different colour

    my real issue is the page responsiveness.


  • Business +

    @Manual
    I always use @media for those.
    the Emmet Re:view chrome extension is useful to see how you page changes as the screen width changes (use the Breakpoints view) and set the height of the div to change as necessary for different widths with @medias.
    I’m not actually a developer (just know some HTML and CSS) so there may be other more standard solutions, I have no idea. But this should work fine.


Log in to reply
 

Suggested Topics

1
Online

344
Users

246
Topics

1.3k
Posts

Copyright © 2020 | info@shutfim.com