Known Participant

Answered

Div absolute/relative??

9 replies
737 views
Translate

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 is closed to new replies. Start a new post to keep the conversation going.

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

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.

Translate

C

cdeatherage

Inspiring

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

Chris

Translate

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?

Translate

Nancy OShea

Community Expert

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

Translate

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;

}

Translate

M

MobosAuthor

Known Participant

Whahaha, how stupid of me, thanks!!

Translate

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.

Translate

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?

Translate

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.

Translate

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.