MichaelF Posted September 16, 2020 Share Posted September 16, 2020 I have a conundrum in this web page: https://allenstown-alt.org/news-analysis/20200812-early-fall-concert.htm I created some CSS styles to overlap and rotate some photos but they result in a big empty space below the photos. I have to use <p style="margin-top: -350px"> to force the following paragraph upward. The top two photos are animated horizontally. The styles for the photos are of the form: .photo1 { position: relative; top: 10px; left: 0px; z-index: 1; transform: rotate(-10deg); } The photos are grouped in a DIV block and each photo references one of the three defined styles (photo1, photo2, photo3). The two animated photos are in separate DIV blocks because they reference the animation code in the HEAD section. Can anyone offer advise as to why the transform: rotate property seems to add so much space after the photos? Link to comment Share on other sites More sharing options...
MichaelF Posted September 22, 2020 Author Share Posted September 22, 2020 It has been several days since I posted this topic. Does anyone have any advice as to why the transform: rotate property seems to add so much space after the photos on the web page I referenced? Link to comment Share on other sites More sharing options...
dsonesuk Posted September 23, 2020 Share Posted September 23, 2020 (edited) I think you will find using position relative with top: -350px; causes its height to increase from its relative original position to its relative new position by the value used. Try using position: absolute; within a position; relative container element OR try using transform: translate(), you may need to change doctype though to html5 doctype. Edited September 23, 2020 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now