Positioning relative to image

I have produced a home page which contains a large image
which is set to increase its size to fill the width of the users'
browswer window.
Ideally, I would like to have a caption positioned a little
way below the image, which maintains postition relative to the
bottom edge of that image. However, because the image maintains
aspect ratio, (ie can get taller even though window stays the same
height) I am having difficulty coming up with a way of achieving
this using any of the positioning aids I have some across.
Is anyone able to tell me how, or even whether, I can do this
?

I would think that a VBox would allow you to do this. If the
horizontalAlign="center" and the caption is the second child, it
should stay centered right below the image, separated from it by
the value of the verticalGap style property.

Similar Messages

How do I copy clipping masks including relative positions for multiple images?

I have a number of microscope images of the same subject that were taken under three different conditions. I'd like to use clipping masks to crop the images in the same way (the same size but also the same positions relative to the corners/sides of the images. In case that was incoherent, I made an image to try to explain what I'm trying to achieve (the same portion of each image for each set):

condor,
You may, with one image in the set masked:
1) Direct Select the Clipping Path and Ctrl/Cmd+C+F+X+F, then move it by the distance between the centres of the images; you may do that for the whole set by repetition;
2) Select the/each image and path and Object>Clipping Mask>Make.
Alternatively, in 1), you may select the Clipping Path (Mask) in the Layers palette, within the Group.
The Ctrl/Cmd+C+F+X+F is to get the path out of the Group.

Tooltip position relative to browser window

Hi -
I have a repeating region of left-floated divs that works
like a horizontal looper for my data set - items repeat
left-to-right, then start a new row. I have a tooltip on the div to
pop up a large-scale image of the underlying repeating data.
The problem is that on the rightmost column, the tooltip
image runs off the right edge of the browser window (causing the
horizontal scrollbar to appear). The bottom row does the same with
the bottom edge of the window - you have to scroll town to see the
entire tooltip, rather than the tooltip adjusting for the bottom of
the window. Does the tooltip widget have a setting that will change
its position relative to the mouse if you are up against the edges
of the browser window?
Thanks,
Rod

I have this same question. Can the tooltip flip horizontally
when it touches the browser edge?

Why Position:Relative from CSS doesn't work at Safari 5.03?

If you watch my web page: http://clubdeleonesst.tk
I designed a ComboBox and have some problems with position relative. I used jQuery to create it, you could watch the original example here:
http://www.marghoobsuleman.com/jquery-image-dropdown
And I have been watching that the transparency from Flash doesn't work too. I hope you can solve these bugs.
Message was edited by: FANMixco
Message was edited by: FANMixco

The "disappearing" affect you describe is not normal. You may need to reinstall Safari.
First, try removing the Apple cookies from your Safari Preferences>Security>Cookies panel. Also, go to your Safari Menu and Empty cache. Then try to log-on to Apple Discussions.
Also, regarding the "disappearing" effect, try Safari from another User Account.
Here is guidance from Apple on how to set up the account. You can ignore step 7 in the article.
Also, on the system preference>Accounts panel, click on "log-in" options. There, select "fast user switching". This allows you to go back and forth between user accounts via an icon in your Menu Bar at the top of the computer screen.
Log-on to the new account and start Safari. If Safari is stable in the new account, then your problem is specific to your regular user account. Otherwise, similar response means a system-wide problem.
Post back with results.

How to adjust the position of an image in a full screen slideshow

Hi I'am using a full screen slideshow composition on my page and muse is not letting me adjust the position of the image to the top, middle or bottom of the frame under the fill option when the image is selected in the slideshow.
I also find it very buggy when previewing the page in a browser, some time it re-sizes the image only larger but never scales down proportionately, only on rare occasions. Why does this happen?
Can someone please help ASAP I need to get this site done by tomorrow.
Thanks,
Gary

Welcome to Apple Support Communities.
The effect you're looking for is 'Scale'
In Keynote '09, 5.1.1 select the graphic.
Click Inspector in the tool bar, Build Inspector (3rd icon from the left), (Build In and Build Out are both set to None for this step) Effect, Action, and then Scale.
It rescales ('zooms') the selected item (image) up or down from 0% to 200%
Clicking on the More Options button at the bottom opens a drawer to the left, and gives you more control over how the build occurs, whether they happen automatically, timed, or when you click, and re-order build steps.
At 200%, double the original size, resolution could be a problem. There is a workaround, because it also scales smaller, down to 0%. So I would scale the graphic down 'small' as the first step to fit at the bottom, (even hide it behind a background-colored box) as you scale it down, and then at the end, scale up to full size to fill the screen at 'normal' resolution.
In the attached example, I use a 'scale' up to go from 100% to 130% on a map, and use arrows and a flashing line to point out the road where a specific business is located with 12 steps. Some elements in my slides have been intentionally obscured. For simplicity, I've eliminated showing any steps but the initial title and the scale.

Difficulty positioning drop zone images

I have carefully and repeatedly read the sizing and positioning instructions for images in iDVD drop zones. I am just not "getting it". There must be more info. somewhere about putting predictability into this process. The photo does not appear in the desired size and position.

My apologies to the person I got this from—cannot find it now. But, OT, here's what works great:
1) Open a new Appleworks (or Word) word processing document. I know this is unsophisticated, but this standard 8 1/2 x 11" document seems to be the key to the process.
2) Set the document margins to very thin. like 1/10".
3) Place (paste) your photo into the document.
4) The portion of the picture that you want to show in the drop zone—place it at the top of the document and slightly to the right.
5) Use the "create pdf" function within the print dialog box to create a pdf document.
6) Drag the resulting pdf document into the drop zone well.
7) Look at the results. In the original word processing document, adjust the photo size and position as desired. Then, make another pdf.
8) Drag your adjusted pdf into the drop zone well.
As I said before, this worked great for me after spending a whole day trying to find a solution. I feel liberated. Thanks to the original author, whomever it may be.

"position:relative" in jsp

I have a html file in which I have a scrolling table with a fixed header. I achieve this by CSS and adding the attribute "position:relative" for the table header. I open it in IE6 and I have my functionality with the table body scrolling and the header fixed.
Now I have the same html code in my jsp and the whole table including the table header scrolls. it takes the value "overflow:auto" which allows scrolling, but it somehow doesnt take the value "position:relative" , which, results in my header to scroll.
Why is my jsp not respecting the "position:relative" attribute?
Raghav

I have done this in my JSP. To freeze header you have to use the following code in your THEAD (css),
top: expression(document.getElementById("mytable").scrollTop-1);
z-index: 10;

Editing XMP data related to image files.

Dear members:
While working on organizing my photo library I have encountered a problem.
How can the XMP data file related to image files be edited in a way that the file info panel can see these changes ?
I made a mistake while saving the current filename as part of my file renaming scheme and need to have the XMP data edited so that it reflects the right (original) filename. I tried using the Mac's TextEdit application but it doesn't seem to have worked properly. Although the file was edited and then re-saved when I use the file info command to look at the data the old filename still appears under the raw data tab instead of the new, revised one.
What is the best way to edit this information ?
Any help will be appreciated as this is a semi-urgent matter.
Thank you in advance,
Joseph

So I was missing something. Thank you Hal.
I had not realised that XMP goes inside of actual image files with those file types. Obviously my new backup routine spotted that, as I was on backuping only modified/new files.
I would much prefer that also with above mentioned file types XMP-data would be stored in sidecar files instead of modifying the original file. To support this there are two arguments that I think are valid:
1) modification of the file is always risky (and spesifically, with image originals I prefer to avoid that),
2) modification leads to the fact that "smarter" backup strategies relying on "full backup" supported with differential or incremental backups lead to unnecessary long backuptimes and media consumption.
That said, I prefer to have XMP-data also outside of the catalog so that other tools can also utilise it (further, in addition to the catalog with sidecars I have sort of failover approach, and some of you may now say "belt and syspenders" after mentioning backups...).
Is there a way to have all file types to utilise sidecars rather that modifying original file?

Overlap 2 Images and Make Their Positions Relative?

I need to essentially make a hotspot on an image that is another image.
I know how to make hotspots. I know how to overlap images. But I need the overlapping image's position to be relative to the image beneath it.
How can I do this?
I have tried searching for Overlapping Images (answer: CSS)
I have also tried searching for Mapping Images to Images (no luck, just brings up info on mapping images, period)
I'm not sure what to search for to get this answer. That is why I am posting.
I am using Dreamweaver CS3. I am a total n00b but if you point me in the right direction I can figure out the rest with research.
Thank you in advance for your time.
PS- Please don't say, "Why not just merge the 2 images with an Imaging Program?" I need to do this with hundreds of images, AND I need the images available separately on my site. This would create hundreds of additional images that I need to upload.

Ignore this. I lost over half my post somehow. I'll try again. -.-
<!Session data><input id="jsProxy" type="hidden"/></p><div id="refHTML"> </div><p></p><p><input id="gwProxy" type="hidden"/>

Dynamic position of an image at the right bottom of the browser window

Dear Dreamweaver-community,
I'm trying to have an image positioned at the bottom right of a html-page. It is embedded in a table so that it doesn't interfere with the rest of the site's content (which it would if I simply used an absolute position). The height of the table is height=100% and I thought that this would make sure that if the browser window is being dragged smaller or bigger the image stays at the bottom right (just as the content stays centered if you set the width of a table to 100% and center it). But if you make the browser window higher the image won't keep sticking to the right bottom but will stay in one place while the rest of the page (bottom) is simply filled with the black background color. Do you have any ideas what I'm missing out on? Is there something like a valign-tag for a table or the page's body that dynamically keeps the image at the bottom right position no matter how you change the size of the window? I hope you can help me. Thank you!
Missy
Here's the code:
<body bgcolor="#000000">
<center>

<TABLE BGCOLOR="#000000" BORDER=0 CELLPADDING=0 CELLSPACING=0 width=100% height=100%>
     <TR>
          <TD width=100% align=center valign=top>
               <p> </p>
            <IMG SRC="images/kopf.jpg" width=300>
          </TD>
     </TR>
     <TR>
          <TD width=100% align=center valign=top>
               <IMG SRC="images/text.jpg" width=394>
          </TD>
     </TR>
     <TR>
          <TD width=100% align=center valign=top>
               <a href="mailto:[email protected]"><IMG SRC="images/post.jpg" border=0 width=269></a>
          </TD>
     </TR>
</TABLE>


<TABLE BGCOLOR="#000000" BORDER=0 CELLPADDING=0 CELLSPACING=0 width=100% height=100>
     <TR>
          <TD width=100% align=right valign=bottom>
               <IMG SRC="images/wuerfel.jpg" width=200>
          </TD>
     </TR>
</TABLE>

</body>

Below is your complete page. Copy all, paste into a Dreamweaver document, save and view in browser.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="Mario, Klingeberg, Mario, Klingeberg, Grafik, Illustration, Design, Grafikdesign, Grafik-Design, Illustrator, Bachelor, Medienmanagement, Mediendesign, Medien, IJK, Hannover, Bauch Beine Po, bauchbeinepo, Adobe, Photoshop" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Mario Klingeberg</title>
<style type="text/css">
html, body, #container {
height:100%;
margin: 0;
padding: 0;
border: none;
text-align: center;
background-color: #000;
table td {
vertical-align: top;
text-align: center;
</style>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-15622817-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</head>
<body>
<table id="container" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/kopf.jpg" width="300">
</td>
</tr>
<tr>
<td><img src="images/text.jpg" width="394">
</td>
</tr>
<tr>
<td><a href="mailto:[email protected]"><img src="images/post.jpg" border=0 width=269></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="vertical-align: bottom; text-align: right;"><img src="images/wuerfel.jpg" width="200" height="90"></td>
</tr>
</table>
</body>
</html>

Go to a position RELATIVE to the current

Hallo,
For the Homepage of my School I have to make a Page-Overview.
I use many
(this time 20) different, but same sized, images. These
should stay 10 sec.
and then should come the next one. If you click (on.Press) at
the image,
the page should be opend. How you can see at
http://www.dreieichschule.de/
I was able to do so. But know I have a problem: I have to put
the arrow to
skip through the images on every layer. So I have to write
many codes and I
have to put the in the correct position. And here is my
question: Is it
possible to make one layer on which you can find the arrows
with *one* code
to skip (for each arrow) through the timeline. I would like
to go to the
next ore the previous keyframe. But at the moment, every
Image is in an own
layer. Do I have to change this? I hope you can help me and I
hope you
understood what I tried to say. If not, write a message to me
Kai
.-. .-. --..::==

thank you for the AS but it doesn't work. You can see the
finished file at:
http://kaithater.ka.funpic.de/flashtest.html
You can only go one image backwards and then to the first
image. If you
want to look at the whole project, visit
http://cid-7fcb77842e92dd88.skydrive.live.com/self.aspx/%c3%96ffentlich/Kopie%20von%2030.1 2.2008.zip
(I think you need a windows liveID to see the files. But I
don't know for
sure).
Kai Thater
.-. .-. --..::==

How to generate formated (defined position) text and image using pl/sql and

Hello,
I need to use pl/sql to create a dynamic html page (or image , if possible) with defined positions for text and bar code. It is necessary because the page will be printed and it should be able to be read by one other process , OCR, that needs to have all the data in defined positions.
Any suggestion are welcome.
Thanks in advance,
Emilio

I don't think it's that easy. Notice that if you put the insert into an actual pl/sql block, you don't get the correct column pointer anymore.
BEGIN insert into bob(col1, col2) values (123.12, 12345.12); END;
ERROR at line 1:
ORA-01438: value larger than specified precision allows for this column
ORA-06512: at line 1
Richard

How to retain zoom position of an image using Adobe Flash Builder?

Hi,
I have created an Adobe Flash Builder Mobile App. I placed an image in the Homeview. I allow the user to zoom out or zoom in the image using GestureZoom.
The problem is each time the user zooms, it does not retain the previous position.
For ex., If I have a map image, I zoom the Bangalore area. After the zoom, I don't see the Bangalore area in the visible portion of the device screen.
Can anyone help me in this? I feel this is a very basic requirement of zoom but I am missing something really.
I have seen few samples of this requirement in Adobe Flash which does not work for mobile apps.

I don't understand what you mean, but to give you a sample file so you can see what I am talking about:
link to fla file: http://dl.dropbox.com/u/48932382/Untitled-1.fla
link to swf file: http://dl.dropbox.com/u/48932382/Untitled-1.swf
As you can see in this file, I am turning the green page, but when you should be seeing behind the page, it's actually transparent and you end up seeing the page underneath it.
Here is a picture of it: (if your wondering, the pages have the same text, it's just the color of the pages are different)

Related product images too large

When I add relatedproducts data tag to the product large module or productlarge.htm, the heading and images for the related products are way too large. I need to know exactly where and what code I need to change to edit their size. any help would be greatly appreciated. thanks. example: 1932 Ford Car billet aluminum dash insert w/ Auto Meter Arctic White gauges

Dude, Get yourself Firebug for starters then you can see exactly what code you need to change.
Its the css, currently all your big text is h3 in the div class "title". You could target this and change the font size or use other tags in the template

How to resize layer in percentage relative to image size?

Hi,
Say I have an image that is 100x100 pixles. And I want to take one of the layers and resize it to 50% of the image size, so that it is 50 pixles. How can I accomplish that?
The reason I ask, is that have multiple images all with different size. But I have a signature (ie. watermark) that is always the same size. I want to be able to place this signature, and then resize it to XX% of the image it was placed on. That way, it should always have the same proportions.
Thanks in advance!

You can scale by percentage of the original layer size going to Edit > Transform > Scale. In the transform options menu, there is an option to scale by percentage - just make sure that you click on the link icon between the Height and Width fields to maintain the aspect ratio of your layer.
However, if you wanted to scale a layer relative to the canvas size, I think you would need to do some scripting or use actions... you might want to ask around on the Photoshop General Discussion or Photoshop Scripting forums to see if anyone has a solution.
Kendall
(Edited - misinterpreted original question)

Positioning relative to image

Similar Messages

Maybe you are looking for