Solved

Positioning of an element a percentage from the top.

Posted on 2016-11-18
14
21 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 51

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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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 51

Expert Comment

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

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

759 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

20 Experts available now in Live!

Get 1:1 Help Now