Solved

Positioning of an element a percentage from the top.

Posted on 2016-11-18
14
36 Views
Last Modified: 2016-11-18
Hi experts,

Another re-re-re design!  The waste paper basket is full...!

https://jsfiddle.net/kw4oc099/1/

All comments appreciated but my main issue here is trying to make the menu the same relative height when the page is resized.  I have the menu as position: relative and top: 20% but when the page is shrunk the menu gets lower and lower in relation to the background image.  I expected it ro remain 20% from the top.

The parent is body which has a height of 100% as does the html.

(I know I have to put media queries in to shrink the menu with the page.)

Thanks for reading.

   Col
0
Comment
Question by:colinspurs
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 4
  • 2
14 Comments
 
LVL 3

Author Comment

by:colinspurs
ID: 41893104
I simplified the fiddle...

https://jsfiddle.net/1s5wh33y/
0
 
LVL 16

Expert Comment

by:SSupreme
ID: 41893140
There are two solution:  
https://jsfiddle.net/xv0894k6/   simple, instead of top on menu margin-top applied
https://jsfiddle.net/vy5mashn/  additional element applied to pull menu down, different position solution
0
 
LVL 3

Author Comment

by:colinspurs
ID: 41893169
Thanks but I think I am asking for something that can't be done.  I'd like the menu to stay in the same place relative to the background image when the page is resized.  If I take out "background-size: contain" then it is OK except that the background image doesn't resize.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 16

Expert Comment

by:SSupreme
ID: 41893183
Not sure what do you mean, but try to apply background to body instead of html. As I can see it stays in about the same place, isn't it?
0
 
LVL 3

Author Comment

by:colinspurs
ID: 41893209
No, here's the difference...

first screen sizesecond screen size
0
 
LVL 16

Expert Comment

by:SSupreme
ID: 41893222
Have you seen my solutions?
There are two solution:  
https://jsfiddle.net/xv0894k6/   simple, instead of top on menu margin-top applied
https://jsfiddle.net/vy5mashn/  additional element applied to pull menu down, different position solution
they don't do that. What is your browser and version?
previewbody width 756!
0
 
LVL 57

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41893230
The problem you have is by using a background image you are having to tell the browser the height of your container. It would be much easier if you made the image an <img> element in a container - made it width: 100% and then positioned the menu absolutely relative to the container. That way the image would create the height of the container for you and the 20% will work as expected.

This may not be ideal if you have other content - but it may work for you.

CSS
<style type="text/css">
html * {
  padding: 0;
  margin: 0;
}
.menu-container {
    padding: 0;
  margin: 0 auto;
  height: 100%;
  max-width: 1400px;
    background-size: contain;
  position: relative;
  z-index: 1;
}
.menu-container img {
  width: 100%;
  position: relative;
  z-index: 1;
}
#menu {
  position: absolute;
  top: 20%;
  width: 70%;
  left: 15%;
  background: coral;
  z-index: 1000;
}
</style>

Open in new window

HTML
    <div class="menu-container">
      <img src="https://s15.postimg.org/7hzcai50b/pitch02.jpg "/>
      <div id="menu">
        <p>Option 1</p>
        <p>Option 2</p>
      </div>
    </div>

Open in new window


Working sample here
2
 
LVL 3

Author Comment

by:colinspurs
ID: 41893237
Strange.  I'm using IE6...no, sorry, Chrome Version 54.0.2840.71 m :)

Also the same with Edge.

Yes, I took the screenshots from your solution.
0
 
LVL 3

Author Comment

by:colinspurs
ID: 41893250
Thanks Julian.  Using a large background image is new for me, I'm wondering how this kind of thing is usually done (or isn't it??).

I will check out your suggestion.
0
 
LVL 3

Author Comment

by:colinspurs
ID: 41893297
Thanks Julian, it works well.

The only other content I may have is the Wilgar ad being a link, so I'd have to remove it from the image and include it as an image with a link, presumably with the same rules that were applied to the menu?
0
 
LVL 16

Expert Comment

by:SSupreme
ID: 41893313
Stick with Julian solution,  otherwise you have to create media classes for different screen sizes for optimal view.

You have wider screen resolution something like 1600x900, mine is larger and more squire. I adopted to my view...
0
 
LVL 3

Author Comment

by:colinspurs
ID: 41893336
Ok thanks.  Wow, you went to Kingston too?  A few years after me...

Cheers
1
 
LVL 3

Author Closing Comment

by:colinspurs
ID: 41893337
Thanks Julian.
0
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 41893353
You are welcome.
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

696 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question