Known Participant

Answered

Div absolute/relative??

Forum|Forum|8 years ago
September 15, 2017
9 replies
730 views

Hi community!

EVISSI :: Natural Cactus Water On desktop version there is a movie behind the text, on phone/tablet the movie doesn't show but ever since I put the class="fluid Logo hide_mobile hide_tablet" the is a app. 20pixels space above the movie??

Also .... it's beautiful on big screen, but when I resize my screen smaller the div with movie/text/can goes over the bottom div. I can't seem to fix this (it surely must be easy ;o)

This topic has been closed for replies.

Correct answer osgood_

Mobos wrote
Hi community!
EVISSI :: Natural Cactus Water On desktop version there is a movie behind the text, on phone/tablet the movie doesn't show but ever since I put the class="fluid Logo hide_mobile hide_tablet" the is a app. 20pixels space above the movie??

The space is as a result of the top padding on .Logo - part of your class="fluid Logo hide_mobile hide_tablet"

.Logo {

text-align: center;

padding-top: 10px;

}

M

MobosAuthor

Known Participant

Wow, thanks, I didn't know.

I tried it today and I think I have to think about the pro's and con's (resizing the text and worse quality) .... and maybe I find something how to make a background div with video.

C

cdeatherage

Inspiring

If you have a full CC subscription, you may be able to use After Effects to create the animation.

Chris

M

MobosAuthor

Known Participant

Hi Nancy,

No I don't have. But isn't there an option in DW to have a video as a div-background?

Nancy OShea

Community Expert

Do you have Photoshop CC.? You can encode it as MP4 or make a smaller animated GIF as shown here.

Nancy O'Shea— Product User & Community Expert

O

osgood_Correct answer

Legend

Mobos wrote
Hi community!
EVISSI :: Natural Cactus Water On desktop version there is a movie behind the text, on phone/tablet the movie doesn't show but ever since I put the class="fluid Logo hide_mobile hide_tablet" the is a app. 20pixels space above the movie??

The space is as a result of the top padding on .Logo - part of your class="fluid Logo hide_mobile hide_tablet"

.Logo {

text-align: center;

padding-top: 10px;

}

M

MobosAuthor

Known Participant

Whahaha, how stupid of me, thanks!!

Nancy OShea

Community Expert

This is one of the main reasons I try to avoid position: absolute in responsive web design. Absolute takes content out of the normal document flow which can result in a collision of elements overlapping other elements.

If you remove position: absolute from movie-content, your product does not overlap the footer logo.

Nancy O'Shea— Product User & Community Expert

M

MobosAuthor

Known Participant

Hmmmmmm, that's right, but then the movie is just below and the whole effect of the movie behind the product is gone. Do you have an other suggestion how to fix that?

Nancy OShea

Community Expert

In my opinion, the MP4 video should be re- edited to include the product image and the text above. If you have cohesive media to work with, you don't need any positioning.

Nancy O'Shea— Product User & Community Expert

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.