Making pop-up image always appear within browser window

In my CS3 CSS site I want to have images which are only revealed when the user runs their mouse over a photo icon. I've worked out how to make the AP div, which contains the show-hide image, appear in the same position relative to the left margin of my text container div but can't seem to control where they are vertically. As they are absolutely positioned, I know that they will, in theory, always remain in the place where I have positioned them (although this appears to vary greatly from browser to browser) but this causes problems if, for example, I place them above the icon and the viewer happens to rollover the icon while it is near the top of their browser window - the photo can't be seen. Can I make the image's vertical position relative to the browser window, whatever its size, or make sure it always appears within the browser window?! I've tried setting margin top and bottom to auto but that doesn't seem to work in the same way that it does for margin right and left. An example is on this page http://www.ernestcooktrust.org.uk/Contact_biogs/biogs_trustees.html . At the moment the images are set to appear above the icon of the person they are referring to. Or is there a better way then show/hide AP divs to achieve this? Many thanks in advance for any (not too technical please) help.

Learn CSS positioning in 10 steps - with visual examples of Static, Relative, Absolute, Fixed, Floats
http://www.barelyfitz.com/screencast/html-training/css/positioning/
CSS Positioning explained
http://www.brainjar.com/css/positioning/
CSS Positioning tutorials - w3schools
http://www.w3schools.com/Css/css_positioning.asp
Why  do APDivs move?
http://forums.adobe.com/message/2181263#2181263
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media  Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Similar Messages

  • Help with image placement in new browser window.

    I need help trying to position images that are being opened
    in a new browser window. I have created a photo gallery with
    thumbnails that are links to the larger image. Ive used the
    behaviors panel to open the new image in a new browser window but
    the image is always shown at the top left margins of the new
    window. Is there a way to 1. center the image in the new window, 2.
    change the background color of the new window that opens.
    Any help would be appreciated.
    Stu

    If, as I read it, you are simply opening the image, it will
    always be upper
    left and cannot be changed. IF you wnat to position it, you
    will need to
    create a new html page and position your image on that page,
    then call the
    page, not the image from your thumbnail link.
    In Dreamweaver in the command menu try the "Create Web Photo
    Album" command.
    It will create all of your pages, links and thumbnails for
    you. (requires
    Fireworks)
    Michael Hager
    www.cmhager.com
    "Stu127" <[email protected]> wrote in
    message
    news:eo70n5$qo5$[email protected]..
    >I need help trying to position images that are being
    opened in a new
    >browser
    > window. I have created a photo gallery with thumbnails
    that are links to
    > the
    > larger image. Ive used the behaviors panel to open the
    new image in a new
    > browser window but the image is always shown at the top
    left margins of
    > the new
    > window. Is there a way to 1. center the image in the new
    window, 2.
    > change the
    > background color of the new window that opens.
    >
    > Any help would be appreciated.
    > Stu
    >

  • Template Images Move w/ Different Browser Window Sizing

    I need to know if it is possible to "lock" the images I have
    in my template so that when the browser window is resized the
    elements do not move and relocate themselves. If the window is
    sized down I just want it to cut off the images. Anyone have any
    suggestions? The help is greatly appreciated.

    Did you see my previous extensive reply?
    Suggestion 1: it's a bad idea to use file/pathnames that
    contain spaces (or
    any punctuation other than hyphen or underscore) like this -
    background-image: url(../images/IW%20background%20file2.jpg);
    ../images/top row/toppic3.jpg'
    -----------------^
    Suggestion 2: The indent icons are NOT appropriate for
    general layout. The
    have a SEMANTIC meaning (what is contained within them should
    be quoted
    material)....
    <blockquote>
    <p><a href="#" onmouseout="MM_swapImgRestore()"
    Suggestion 3: When you want help with a layout problem, the
    best bet is to
    upload the offending page and post a link to it, rather than
    to just paste
    the code into a reply.
    Suggestion 4: All layout problems are related to a) the HTML
    markup you have
    on the page, and perhaps b) the CSS that cascades into that
    markup. Most of
    the answers given here will be given referencing HTML/CSS
    markup. To
    understand the answers that are given, you will need to have
    some
    understanding of HTML and CSS (and you will *definitely* need
    this to work
    effectively with DW). So -
    The images across the top of your page are simply adjacent
    image tags
    contained within anchor tags, which are all contained within
    a single
    paragraph tag, within a blockquote tag, directly within the
    body of the
    page, e.g.,
    <body>...<blockquote><p><a><img></a><a><img></a><a><img></a><p>
    The <blockquote> tag is a block tag. A block tag fills
    the width of its
    container, whatever that might be. This <blockquote>
    tag, therefore, will
    therefore reach from the left page margin to the right page
    margin, because
    it is only contained within the <body> tags - i.e.,
    there is no container
    wrapping the <blockquote> other than the
    <body></body> tags. As the browser
    viewport width changes, the space between the page's left and
    right margins
    changes concommitantly, reducing or enlarging the amount of
    space in which
    the <blockquote> tag sites. Thus, the effective width
    of the blockquote tag
    is affected immediately by the browser viewport width. In a
    similar
    fashion, the <p> tag, also a block tag, changes its
    width to accommodate the
    flexing of the viewport window. Since the images are just
    arrayed in
    adjacent locations within that <p> tag, if the width of
    the <p> tag is less
    than the aggregate width of the images, then the images will
    wrap to the
    next line.
    Is that the "motion" you are seeing? If so, it's unrelated to
    the
    incidental fact that the page is also made from a Template.
    You can fix this with a bludgeon or a scalpel.
    Bludgeon: Use CSS to give that <p> tag an explict
    width, and to set overflow
    to hidden, e.g.,
    <p style="width:969px;overflow:hidden;">....
    Scalpel: Redesign the page layout....
    Hope that helps.
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    ==================
    "dbodrero" <[email protected]> wrote in
    message
    news:[email protected]...
    >I posted the code from one of the pages having the
    problem above. Is this
    >what is needed to look at or do we need to look into the
    code for the
    >template page? Thanks.

  • Open a meeting in a pop-up rather than in main browser window

    Hi,
    I used to be able to open all my Connect meetings in a pop-up window (in fact this opened automatically), I was on XP.
    I just switched to Win7 (don't know if this is relevant) and now every time I open a meeting it opens within the browser window (In Firefox or IE).
    The pop-up was much more useful to me, does anyone know if/how I can force my Connect meetings to open that way?
    Thanks!

    You need to install the Connect Add-in. You can find it here: http://www.connectusers.com/downloads/

  • Proportionaly scaling down background image when restoring down browser window

    Hi all, i need some help, i want to minimize(scale or restore down) window to not-fullscreen browser window (and ajusting size of window manually over arrows in the corners of the window) and retain background picture full size (i need to picture proportionally follows screen scaling).
    I`m new into flash stuff, so please tell me if it is the code or what, and if you know part of code that will do the job, write me down!
    Thanks!

    I take it you want a liquid effect.  I wrote a site that does that or rather the background of this site does that http://www.droolpigs.com/ .  It's fairly simple just tell the backrgound to change width and height on stage resize.
        public class NuPigs2 extends MovieClip
            var holder:btnHolder; // container for nav buttons
            var onStage:*;     // this can be anything
            var ratio:Number;
            var rRatio:Number;
            var newRatio:Number;
            var com:FLVPlayback;
            var bkg:*;
            public function NuPigs2(){
                com = new FLVPlayback();
                setCom("droolPigsWrestling.flv");                     // set the video for player com
                addChildAt(com, 0);
                stage.align = StageAlign.TOP_LEFT;
                stage.scaleMode = StageScaleMode.NO_SCALE;    // this is needed for resizing to work
                onStage = com;                                                   //  the video player is assigned to onStage
                ratio = onStage.height/onStage.width;
                rRatio = onStage.width/onStage.height;
                addHolder();
                fillBG();
                stage.addEventListener(Event.RESIZE, fillBG);
    ////////////////////// FILL BG ////////////////////////   
    // this code makes the video resize with the stage
            function fillBG(evt:Event = null):void {
                newRatio = this.stage.stageHeight/this.stage.stageWidth;
                holder.x = this.stage.stageWidth - (holder.width +25);    // position the buttons on the right
                holder.y = 50;
                if (newRatio > ratio){
                     onStage.height = this.stage.stageHeight;
                     onStage.width = (this.stage.stageHeight * rRatio);
                    else {
                      onStage.width = this.stage.stageWidth;
                      onStage.height = this.stage.stageWidth * ratio;

  • Need help flushing background image to top of browser window

    OK, this may be a very common problem, I'm just an idiot. In
    Dreamweaver I have a background image in a centered div on the
    page. Can anyone help me get that div to the absolute top of that
    screen? I've already set the body tag to 'margin=0 padding=0' but I
    don't know what else to do. Now when I look at it it's fine on my
    pc but the mac is the one that displays the space....Help!
    -Thanks, Nathan
    Website in question:
    www.stormsheltersdirect.com

    Your site is asking for a user name and password?

  • New tabs always appear in new window--how to change back?

    Just upgraded to FF4. Now, when I try to open links in a new tab (by Ctrl-clicking), they always open in a new window. Subsequent links also open in the new window, so I'm forced to have two open windows, rather than just have all tabs in one window.
    SOLVED after reboot. I couldn't mark my own reply as a solution, for whatever reason.

    # Press Alt+T
    # Click Options
    # Click Tabs category
    # Check the option "Open new windows in new tabs instead"
    <img src=http://dl.dropbox.com/u/7456129/Firefox/tabcat.jpg>
    <hr>Note: If anyone's reply has solved your problem, then please mark that reply as "Solved It" to the right of that reply after logging in your account.
    Its because so that we can concentrate on new questions.

  • Pop-up images appear as thumbnails

    Today while accessing the help from my hard-drive, I noticed that when I clicked on a link to open a pop-up image it appeared as a thumbnail.
    The pop-up is supposed to appear as a full-sized image, and not a thumbnail.
    When generating the layout, in the multiscreen HTML5 properties, under screen profiles - desktop - optimization, I have Convert absolute image size to relative image size selected.
    When this option is cleared, the pop-up image opens normally.
    However, I would prefer to keep this option selected so that large images are converted to relative image size, and fit on the page.
    What is weird to me, is that when accessing the latest version of the help online through my company's system both pop-up images open normally, and absolute images are converted to relative size so possibly some other setting is causing my pop-up images to become thumbnails?
    Suggestions are welcome,
    Yehoshua

    Interesting. This is a consequence of the optimization setting. What method are you using for the popups? If you’re using autosize popups, try converting one or two to fixed size popups to see whether that helps.
    Greet,
    Willam

  • Export applet Image to a browser window

    Hi folks,
    I have an applet that creates an organization chart loaded from xml:
    http://www.easypay-group.com/Flowchart/bin/test.htm
    Now I want to export my Image (BufferedImage) to a browser window.
    I think by doing that I don't need to sign my applet, the only problem is that I don't know how to do this.
    Thanks in advance,
    Pieter

    You've gone down the wrong path here by using Photoshop or
    any graphics app
    to build your html code for you. It's fragile, dodgy and
    really only
    intended for quick prototypes; not full production sites. As
    soon as you
    start adding content to this layout, it's going to blow up on
    you.
    Recommendation: Use Pshop to optimize image slices. Use DW to
    build the
    HTML code by inserting images into a pre-made CSS layout like
    this one.
    CSS Liquid Layout, Centered on page.
    http://alt-web.com/TEMPLATES/CSS2-Liquid-Page.shtml
    Also, read this tutorial:
    Taking a Fireworks (or PhotoShop) comp to a CSS based layout
    in DW
    http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html
    Nancy O.
    Alt-Web Design & Publishing
    www.alt-web.com

  • Cache problem for servlet opening new browser window

    Requirement:
    I have JSP page say summary.jsp with link "print account summary"
    When user clicks on this link, new browser open with PDF document of summary.jsp
    This new browser window should not have address bar and toolbar.
    Solution:
    Servlet called PrintSummary which sets contenttype=application/pdf and sends the data to outputstream.
    href of link is
    Java script function is:
    function openWindow(url){
    window.open(url,'blank','toolbar=no')
    Problem:
    Since the URL of this new window is
    http:// host:portnumber/PrintSummary
    Even if I click the "Print summary" link for account2,
    being the same URL (http:// host:portnumber/PrintSummary) it accesses the existing page in the cache which is created for account 1.
    In href if I just use servlet url as
    I get the expected behaviour but then I don't have control on browser appearance and browser window will be with address bar and toolbar.
    The only option I could think of was changing URL as follows:
    <% String url ="javascript:openWindow('PrintSummary? var1="+ Math.random()+"')";
    So that URL is different all the time
    Is there any way to solve this problem?
    Thanks in advance
    M.

    I'd definitely try to use a Flex popup... but the
    flash.net.navigateToURL method is a simple way to open a popup
    window in a new browser. You can pass any data needed by the new
    page using the URLRequest and/or URLVariables. The URL you navigate
    to could, of course, be another Flex application if necessary. I
    use this only when I need to open a popup window on another site,
    or an HTML formatter report or something similar.
    Concerning yourself with the size of the popup window may be
    a bad design choice also. I, for example, have my browser
    configured to open all popups in a new tab regardless of sizing
    constraints imposed by the designer. If it is absolutely necessary
    for you to have control over the size of your popup window, you
    should follow the advice given by others and use a Flex
    popup.

  • Jpg opens new browser window

    I am trying to drag and drop a scanned image into a website. The website application has java and is supposed to load the image into it.
    What happens instead is that the image opens its own browser window as if I am just trying to look at the image. I've downloaded and installed the Java Runtime Environment for Mac as requested by the website.
    I am guessing that it is a browser setting that I am missing as I noticed that a draged and droppped Jpeg will do this other open browser windows also.

    Hi,
    What is this mysterious website?

  • Flash file in browser window

    I have a couple of pages that I am currently working on with
    links to browser windows with single images in them. These work
    fine, but I recently tried to create a link to a page with a single
    flash .swf file in it which I would like to open in a browser
    window. However, when I click on the link, nothing opens. Looking
    at the code view, it looks similar to the other pages where the
    single image opens in the browser window. Are Flash files not able
    to open in browser windows? If not, is there some other way to
    control the size and toolbars of the window?

    Got a URL to show us?
    Regards
    John Waller

  • Text link and open browser window

    Hello
    I have successfully done this clicking on an image using
    behaviours 'open browser window' to open a larger version of the
    image and I would like to do the same with a text link eg 'click
    here for Terms and Conditions' and have that web page open in the
    same way setting the width, height etc. I can't seem to do it. Any
    help gratefully accepted!
    Thank you very much in advance.

    James Shook wrote:
    > ... Search this newsgroup's archives for the way to do
    this so it will
    > work well in browsers with JavaScript turned off.
    An easy way to do follow James sage advice, once you've added
    the Open
    Browser Window behavior to your's link, is to run the free DW
    Extension
    divaFreeTools on your page. It will update the DW
    OpenBrowserWindow
    Behavior to work properly when javascript is off and help
    Search Engines
    find your linked page/image.
    http://divahtml.com/products/divaFreeTools/free_dreamweaver_tools.php
    E. Michael Brandt
    www.divahtml.com
    www.divahtml.com/products/scripts_dreamweaver_extensions.php
    Standards-compliant scripts and Dreamweaver Extensions
    www.valleywebdesigns.com/vwd_Vdw.asp
    JustSo PictureWindow
    JustSo PhotoAlbum, et alia

  • Scaling to fit browser window?

    Hi Everyone; I'm new to Captivate (specifically Captivate 4) , and I have what I know must be a rather dumb question, but I've spent two hours looking for the answer, and I can't find it. I have my project scaled to a custom width of 768 wide by 576 tall. How in the heck do I set the publish settings so that the output HTML knows to scale the darned browser window to exactly fit my output (no empty space around it)? I know I can go in through HTML and probably fix it there, butI'm just not that old school anymore. I expect the darned app to do that for me in the publishing process. Help.

    Hi there
    Although it isn't exactly recommended, one way to make things always fit the browser window is to simply link to the SWF and not the associated HTML page.
    If you open the SWF it will simply scale to whatever dimension is largest to fit the browser. (If it's taller than wide, it will always fill the browser from top to bottom but not left to right. Or if it's wider than tall, the opposite. There isn't a way I'm aware of to coax it to simply fill the entire space.)
    Cheers... Rick
    Click here for Adobe Authorized Captivate and RoboHelp HTML Training
    Click here for the SorcerStone Blog
    Click here for RoboHelp and Captivate eBooks

  • When browsing a new library that I created, the browser shows dotted lines around grey rectangles, no images. When I double click on a rectangle the image appears. How do I get images to appear in the browser rectangles?

    When browsing a new library that I created and exported onto an external hard drive, the browser shows dotted lines around grey rectangles, no images. When I double click on a rectangle, the image appears, but all the other rectangles remain empty - no image. How do I get images to appear in the browser rectangles? I am viewing this on a second computer (an older intel duo iMac), not the one I created the library on (a MacBook Pro). Both computers have Aperture 3.2.4 installed. When I return the external to the MacBook, all images appear in browser rectangles. What's happening on the iMac?

    You may have a problem with the permissions on your external volume. Probably you are not the owner of your library on the second mac.
    If you have not already done so, set the "Ignore Ownership on this Volume" flag on your external volume. To do this, select the volume in the Finder and use the Finder command "File > Get Info" (or ⌘I).
    In the "Get Info" panel disclose the "Sharing & Permissions" brick, open the padlock, and enable the "Ignore Ownership on this Volume" flag. You will have to authentificate as administrator to do this.
    Then run the "Aperture Library First Aid Tools" on this library and repair the permissions. To launch the "First Aid Tools" hold down the ⌥⌘-key combination while you double click your Aperture Library. Select "Repair Permissions" and run the repair; then repeat with "Repair Database". Do this on the omputer where you created the library and where you can see the thumbnails.
    Then check, if you now are able to read the library properly on your iMac.
    Regards
    Léonie

Maybe you are looking for