Highlighted

How to make elements NOT to affect each other

Community Beginner ,
Aug 16, 2017

Copy link to clipboard

Copied

Hey, I've got a very beginner question. I hope someone can help me with that, it drives me crazy. Let me explain it at first, an example on my website is given further below. I created two rectangle one below the other. In the upper rectangle I created a menu on the right side and in the other rectangle I added an image. It is a fluid design and every element is responsive in width and height, expect for my menu (it is greyed out for whatever reason [can some tell my why?]). Browser fill is pink. Now when I grab my browser and shrink it in width I get to a point where my menu is blocking my image and it will be pushed downwards which leads to a gap between my elements and you can clearly see my browser fill. What I want is that my menu (or any other element) does not affect any other element. I want it to float above any other elements. Working with layers does not work. I know there is a way to avoid that problem by creating breakpoints and optimize sizes but I rather would like to know how to do it correctly. I'm sure there is such a feature. Here is my website, try it for yourself: www.blasehasex.com

Thanks for any help!

Views

101

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How to make elements NOT to affect each other

Community Beginner ,
Aug 16, 2017

Copy link to clipboard

Copied

Hey, I've got a very beginner question. I hope someone can help me with that, it drives me crazy. Let me explain it at first, an example on my website is given further below. I created two rectangle one below the other. In the upper rectangle I created a menu on the right side and in the other rectangle I added an image. It is a fluid design and every element is responsive in width and height, expect for my menu (it is greyed out for whatever reason [can some tell my why?]). Browser fill is pink. Now when I grab my browser and shrink it in width I get to a point where my menu is blocking my image and it will be pushed downwards which leads to a gap between my elements and you can clearly see my browser fill. What I want is that my menu (or any other element) does not affect any other element. I want it to float above any other elements. Working with layers does not work. I know there is a way to avoid that problem by creating breakpoints and optimize sizes but I rather would like to know how to do it correctly. I'm sure there is such a feature. Here is my website, try it for yourself: www.blasehasex.com

Thanks for any help!

Views

102

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 16, 2017 0
Most Valuable Participant ,
Aug 16, 2017

Copy link to clipboard

Copied

daniels67290199  wrote

I rather would like to know how to do it correctly. I'm sure there is such a feature. Here is my website, try it for yourself: www.blasehasex.com

there is no correct anwser and your site has other codes but I can recommend some points;

  • set the top bar to responsive width only... that will fix the menu poping out of it

Screenshot (1302).png

  • a fixed menu that doesn't adjust should be pin [to browser] on the right hand side... the min page width in my example is 320 so that is what you design for i.e, a 300 point menu fits with 20 points to spare. Note that I placed a guide at 10 points in from the right of my design page and then butted the menu up to that.

Screenshot (1303).png

  • your image has a few options but I would start with a frame the exact same size then set it to "scale to fit" from the top left... that should play nice in every browser

Screenshot (1304).png

example demo = dragon

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 16, 2017 0