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.
StuIf, 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.comYour 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,
YehoshuaInteresting. 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,
PieterYou'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. -
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? -
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 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
-
when I play songs on my itunes account, they stop after about one minute and itunes goes on to the next song. This is happening with songs on albums I have purchased direclty through itunes
-
Having issues finding out how many bytes are sent/recieved from a socket.
Hello everyone. I've searched the forums and also google and it seems I can't find a way to figure out how many bytes are sent from a socket and then how many bytes are read in from a socket. My server program accepts a string (an event) and I parse
-
Will the iPhone 3Gs 32 GB slower than the 16 or 8 GB 3Gs models
i just want to know that will the 32 gb iphone 3gs will be slower than the mobels with less storage as i had a n97 32 gb wich was slower than the 16 gb n97 mini
-
Connection to Oracle XE via IIS/ASP app was working then stopped
I am prototyping an application for my new management here so that I can recommend they use Oracle XE. The connection to the Oracle XE database appears to have stopped working, via an IIS/ASP application I wrote. I can still connect through ODBC usin
-
No weblogicoci36 in java.library.path