- This topic is empty.
June 15, 2009 at 2:44 pm #25159
Below you will find a PhotoShop mockup of what I am trying to accomplish:
I essentially have created three unique files: home.html, about.html, and contact.html to load into a #container within index.html. Each of these three files, has the HTML structure and CSS for the modal window as well as the content (text, images, etc.).
I would like to be able to standardize the size of the modal-window. So in other words as the PhotoShop mockup depicts, I would like the green modal-window to stay consistent in size/dimensions. In effect, areas: A, B, C, D should always retain the same margin of 2em. Right now I am able to get the top (A), right (B), and left (D) to consistently retain a margin of 2em; however, the bottom dimension of the modal window conforms to the size of whatever content is in the modal window. For example, my About page content is much more than my Contact page content. In effect, About pushes the modal window down further, whereas the Contact modal window has a smaller height.
I hope you understand my explanation. Please let me know if you need further information or code (HTML, CSS, etc.)
Regards.June 15, 2009 at 6:42 pm #59102
Setting a height for example: height: 500px; for the modal window wont exactly fulfill my request as I am trying to achieve a 2em margin between the modal window and the bottom of the browser window…?June 16, 2009 at 9:08 am #59105
Really? Nobody has any ideas on how I can achieve this?June 16, 2009 at 9:27 am #59115Chris CoyierKeymaster
Sounds like you need to not use height and width with margins, but use Top, Bottom, Left and Right values.June 16, 2009 at 9:43 am #59116
What might something like this look like?
Should the #container that has content loaded into it be the one that gets the top, right, bottom, and left values of 2em?June 16, 2009 at 9:18 pm #59242
Got it working… I put the 2.6em value on top, right, bottom, and left. I set position to fixed. I did this on the <div> that contains the content
Do I need to duplicate and/or use any other CSS on the container I am loading the content into?
- The forum ‘CSS’ is closed to new topics and replies.