• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 58
  • Last Modified:

Positioning of an element a percentage from the top.

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
colinspurs
Asked:
colinspurs
  • 8
  • 4
  • 2
1 Solution
 
colinspursAuthor Commented:
I simplified the fiddle...

https://jsfiddle.net/1s5wh33y/
0
 
SSupremeCommented:
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
 
colinspursAuthor Commented:
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
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

 
SSupremeCommented:
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
 
colinspursAuthor Commented:
No, here's the difference...

first screen sizesecond screen size
0
 
SSupremeCommented:
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
 
Julian HansenCommented:
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
 
colinspursAuthor Commented:
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
 
colinspursAuthor Commented:
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
 
colinspursAuthor Commented:
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
 
SSupremeCommented:
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
 
colinspursAuthor Commented:
Ok thanks.  Wow, you went to Kingston too?  A few years after me...

Cheers
1
 
colinspursAuthor Commented:
Thanks Julian.
0
 
Julian HansenCommented:
You are welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

  • 8
  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now