0

I am trying to place a wooden display board on the top of menu bar at http://offbeatdestination.com. I have successfully done this by using the following code:

<div style="position:relative;min-width:960px">
    <img src="http://i43.tinypic.com/16nkvl.png" style="position: absolute;left:145;top:140" />
</div>

The problem I am facing with the above code is that I am using a modal to display pictures on the pages (for example http://offbeatdestination.com/infinity-resort/), but the modal window is showing far below the visible portion of the screen, and I have to scroll down which is not user friendly.

If I remove the above code everything is fine. How can I place my image without affecting the popup screen.

Joshua Dwire
  • 5,415
  • 5
  • 29
  • 50
Bhumi Pujan
  • 1
  • I am slightly confused but you may need to set the DIV to position absolute. Do you have a test page? – ClosDesign Oct 02 '13 at 20:22
  • I am using wordpress interface for it so i don't have the test page. I tried doing it absolute but no effect. I have now placed the above code on my website so please check this link ( http://offbeatdestination.com/infinity-resort/ ) by clicking on the image in the content area – Bhumi Pujan Oct 02 '13 at 20:30

2 Answers2

0

Use position:absolute and left, top to set x, y coords based on the top left corner

<div style="position:absolute; left:100px; top:150px;">
    <img src="http://i43.tinypic.com/16nkvl.png" />
</div>

To position it at 100,150 from the left corner

Gustavo
  • 531
  • 6
  • 20
  • I tried doing it absolute but no effect. I have now placed the above code on my website so please check this link ( offbeatdestination.com/infinity-resort ) by clicking on the image in the content area – Bhumi Pujan Oct 02 '13 at 20:36
  • thank you @Gustavo Suarez your code deems to work correctly for me thank you very much – Bhumi Pujan Oct 02 '13 at 21:13
  • Just to clarify, the position, left and top values are not supposed to be on the image style but in the div – Gustavo Oct 02 '13 at 22:40
0

There are possibly 2 things wrong. The Javascript you are using is calculating the position wrong. A very easy way to fix this would be to put some overtaking styles in your CSS sheet. Might not be the greatest because you images are different heights but it may work.

#colorbox{
top: 50% !important; /*50% from the top and using !important overtakes any inline styles*/
margin-top: -196px; /*Negative margin of the half the height of the largest image in the slideshow.*/
position: fixed; /*fix the position in the browser*/
}

If anything you will actually need to go in and fix the Javascript so that it does not look at the height of the layout or the 'body' and instead looks at the height of the browser window size.

ClosDesign
  • 3,894
  • 9
  • 39
  • 62