Solved

Positioning of an element a percentage from the top.

Posted on 2016-11-18
14
33 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
ScreenConnect 6.0 Free Trial

At ScreenConnect, partner feedback doesn't fall on deaf ears. We collected partner suggestions off of their virtual wish list and transformed them into one game-changing release: ScreenConnect 6.0. Explore all of the extras and enhancements for yourself!

 
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 54

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 54

Expert Comment

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

Featured Post

ScreenConnect 6.0 Free Trial

Discover new time-saving features in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

809 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