Solved

Positioning of an element a percentage from the top.

Posted on 2016-11-18
14
30 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
  • 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
 
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 52

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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 52

Expert Comment

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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

929 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now