Locating a popup 2/3 of the way from the top of the window

I'm revising an online reservation program, and having a little difficulty positioning a calendar which pops up on the page. The styling of the calendar is controlled with the attached file. I'd like the calendar to appear centered horizontally, and 2/3 down the page, regardless of the window size or screen resolution, if possible.calendar1.css

Thank you. I visited the page with that discussion and demo, but it's a little above my comprehension level. I also found that the class which needs to be positioned is .calendar table, not .calendar. It seems that the popup is positioned with respect to the calendar button which triggers it.

So, if I wanted the popup to be centered over the icon, regardless of the viewer's device specifications, could you suggest code for that part of the style sheet?

Change the button to a div and style it like a button and give is a position:relative property.
then put the calendar element inside of the button-styled div tag with a high z-index. The you can set position:absolute on the calendar and it will be offset (positive or negative) from the top left corner of the button. the relationship to the button will always be the same no matter what the resolution is.

Thank you. I'm a beginner at writng code, and so far I can't even get a div button to appear on a page I'm experimenting with. I think I need to be spoon fed this code. If there's too much effort involved in that, I'll understand. I'm continuing my trial and error in the meanwhile.

I wasn't successful with implementing that approach, due to inexperience.

I did find a satisfactory workaround, by removing the .calendar table specification in the style sheet, inserting it into each page with a calendar popup, and styling it uniquely in each case. There are four pages which feature that popup, and the table with the calendar buttons is positioned differently in each case. Adjusting margins for the calendar table class allows some consistency of behavior for the popup.

Thanks for your input, and I appreciate your patience with my learning curve.

0

Featured Post

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

When writing CSS, there are a few simple rules that will make your life easier.
1. Using ‘* {box-sizing:border-box;}’.
Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …

In this Micro Tutorial viewers will learn how to create a CSS image sprite
(In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite)
Open a new Photoshop document with a width of (Icon width)x(N…

The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors.
Create your external css file by saving it as style.css then set up your style tags:
(CODE)
Reference the nav tag and set your prop…