Layering Images & absolute position

Anyone know a good method for creating a GUI that has background image positioned at an absolut x,y and then placing multiple images over that image, also at an absolute x,y?

Extend JComponent (or possibly JPanel) and override paintComponent.

Similar Messages

Can Layers be given RELATIVE, rather than ABSOLUTE position

I'm having no luck finding an answer to this in HELP. I place
the layer's anchor in a table, then position the layer. If I
subsequently add (or remove) any lines above the anchor, everything
on the page moves down (or up), but the layer stays where it was,
relative to the page, not the anchor.
If there are several layers on the page this means a wholeot
of repositioning every time I do an edit up-page.
Any advice?

This may help you understand positioning a bit -
There are 4 different types of positioning:
Absolute
Relative
Fixed
Static
Here is a brief explanation of each kind of positioning (with
regard to
placement of elements on the page only)....
Position:absolute (or A/P elements)
This does several things -
1. It 'removes' the element from the flow of the code on
the page so that
it can no longer influence the size or position of any other
page element
(except for those contained within it, of course).
2. The absolutely positioned element takes its position from
the position of
its closest PARENT *positioned* element - in the
absence of any explicitly
positioned parent, this will default to the <body> tag,
which is always
positioned
at 0,0 in the browser viewport.
This means that it doesn't matter where in the HTML code the
layer's code
appears (between <body> and </body>), its
location on the screen will not
change (this assumes that you have not positioned the A/P
element within
a table or another A/P element, of course).
Furthermore, the space in
which
this element would have appeared were it not positioned
is not preserved
on the screen. In other words, absolutely positioned elements
don't take
up any space on the page. In fact, they FLOAT over the page.
Position:relative (or R/P elements)
In contrast to absolute positioning, a relatively positioned
page element is
*not* removed from the flow of the code on the page, so
it will use the
spot
where it would have appeared based on its position in
the code as its
zero point reference. If you then supply top, right,
bottom, or left
positions
to the style for this element, those values will be
used as offsets from
its
zero point.
This means that it DOES matter where in the code the
relatively positioned
element appears (, as it will be positioned in that location
(factoring in
the offsets) on the screen (this is true for any placement in
the code).
Furthermore, the space where this element would have
appeared is
preserved in the display, and can therefore affect the
placement of
succeeding elements. This means that the taller a relatively
positioned element is, the more space it forces on the page.
Position:static
As with relative position, static positions also "go with
the flow". An
element with a static position cannot have values for
offsets (top, right,
left, bottom) or if it has them, they will be ignored. Unless
explicitly
positioned, all div elements default to static positioning.
Position:fixed
A page element with this style will not scroll as the page
content scrolls.
Support for this in elements other than page backgrounds is
quirky
There are several other things you need to know:
1. ANY page element can be positioned - paragraphs, tables,
images, lists,
etc.
2. The <div> tag is a BLOCK level tag. This means that
if it is not
positioned or explicitly styled otherwise, a) it will always
begin on a new
line on the screen, and b) it will always force content to a
new line below
it, and c) it will always take up the entire width of its
container (i.e.,
width:100%).
3. The placement of A/P elements *can* affect the BEHAVIOR of
other
elements
on the page. For example, a 'layer' placed over a hyperlink
will mask that
hyperlink.
You can see a good example of the essential difference
between absolute and
relative positioning here -
http://www.great-web-sights.com/g_layersdemo.asp
You can see a good demonstration of why using layers for a
page layout tool
is dangerous here -
http://www.great-web-sights.com/g_layer-overlap.asp
Based on this, a static div (no longer a 'layer') would be
what you want.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"bwilsonduncan" <[email protected]> wrote in
message
news:[email protected]...
> I'm having no luck finding an answer to this in HELP. I
place the layer's
> anchor in a table, then position the layer. If I
subsequently add (or
> remove)
> any lines above the anchor, everything on the page moves
down (or up), but
> the
> layer stays where it was, relative to the page, not the
anchor.
>
> If there are several layers on the page this means a
wholeot of
> repositioning
> every time I do an edit up-page.
>
> Any advice?
>

Positioning an Image absolute

Hello,
currently i am designing my website with fireworks cs5.i want to position a big image on the right side on top of my layout.In fireworks this doesn't work and i get "overlapping" issues so my question is how do i position my big image manually ?
Kind Regards

Changed the position.
Now the big image is on top of the layer hierarchy.
Still overlapping issues with my menubar etc. and fireworks switches to absolute positioning.
In the Options dialog my layout is set to be in the center.
After the switch the layout is on the left which i don't want.

Z Index, layering images, need help (going crazy!)

Need some help on layering images. As you can see, the "polaroid" has tape on it - I want that tape to overlap the menu bar.
The menu bar is a grapic (there is a slight gradient to it) and on top of it are the actual menu graphics. If I remove the menu graphics, the photo overlaps fine. But if I insert the menu graphics, they lie on top of the polaroid. Thanks in advance for any help you can provide.
Gary
Here is the code for the page:
<h1>SanDiegoHomegrown.com</h1>
<img src="images/menuBar.gif" />
<ul id="menuBar">
   <li id="listen"><a href="songs.html">Listen</a></li>
<li id="submit"><a href="submit.html">Submit Songs</a></li>
<li id="seals"><a href="seals.html">Help the Seals</a></li>
<li id="about"><a href="about.html">Our Story?</a></li>
<li id="sponsors"><a href="sponsors.html">Sponsors</a></li>
</ul>
<div id="polaroid">
<img src="images/band2_polaroid.png" width="280" height="354" />
</div>
Here is the CSS:
#polaroid {
    height: 354px;
    width: 280px;
    padding-left: 50px;
    margin-top: -40px;
#menuBar {
    height: 30px;
    width: 960px;
    padding: 0px;
    font-family: "Courier New", Courier, monospace;
    list-style-type: none;
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    margin-top: -30px;
#menuBar a {
    width: 175px;
    display: inline-block;
    color: #2F3032;
    text-align: left;
    vertical-align: 0%;
    margin: 0px;
    list-style-type: none;
    float: left;
    height: 35px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 10px;
    text-indent: -9999px;
#menuBar #listen {
    background-repeat: no-repeat;
    position: absolute;
    background-image: url(images/titles/listen_bar_orig.gif);
#menuBar #submit {
    background-image: url(images/titles/submit_bar_orig.gif);
    background-repeat: no-repeat;
    position: absolute;
    margin-left: 150px;
    width: 200px;
    z-index: 1;
#menuBar #seals {
    background-image: url(images/titles/seals_bar_orig.gif);
    background-repeat: no-repeat;
    position: absolute;
    margin-left: 375px;
    width: 225px;
#menuBar #about {
    background-image: url(images/titles/about_bar_orig.gif);
    background-repeat: no-repeat;
    position: absolute;
    margin-left: 625px;
#menuBar #sponsors {
    background-image: url(images/titles/sponsor_bar_orig.gif);
    background-repeat: no-repeat;
    position: absolute;
    margin-left: 800px;

Auggh, just figured it out. The Polaroid needed to be relative positioning!

Box model/none absolute positioning with flash

In recent years none-absolute positioning (or box model positioning) has become the norm with HTML/CSS
this is uselfull for dynamic functions which appear on an event (such as an object which appears when a button is clicked on or a error message that appears when a form box is given invalid input because it automatically inserts itself it the right place.)
One very important example of this is when you have a form which automatically produces an error message and the error message appears bellow the input area which caused it and the rest of the page is pushed down.
With none absolute positioning the developer does not need to worry about this.
But if the objects are given absolute position then it becomes a massive problem, the developer has to go about giving the objects differetn positions dependant on if dynamic objects appear or not
potentially the developer has to consider all possible variables, and code if statements which determine the position of all static objects for all possible variables which dynamic objects could take.
so does flash have a "none absolute positioning" solution to this problem.

Before you get all happy and pleased with yourself, APDivs or Layers seldom work well as a primary layout method. Here are some reasons why:
http://apptools.com/examples/pagelayout101.php
You're much better off using default CSS positioning (which is no positioning at all) along with CSS margins, padding and floats. If you don't believe me, check your page in non-IE browsers with increased/decreased text-sizes (zoom, text only).
From Tables to CSS Web Design Part 1 -
http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt1.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Adding a Layer (absolute position div) to a locked page

Maybe I am just not understanding templates but I have a
really simple one that has one editable region called "content". I
want to add a absolute positioned div to the content area but DW
tells me this would require changing code that is locked by the
template. I thought that the editable area automatically put in by
DW would accommodate the added code (css) that DW puts in when
adding a template to the page.
So what is the Editable area called "Head" used for anyways
if not for situations like this?
Thanks

Here's the problem with layers in template child pages, and a
simple
solution.
When you DRAG a layer onto the page in DW (this means you
click on the layer
icon in the Insert Toolbar and drag the layer on the page),
DW wants to put
the code for that layer immediately under the body tag, e.g.,
BEFORE DRAG -
<body...>
<table>
AFTER DRAG -
<body ...>
<div id="foo" style="position:absolute; ...>LAYER
STUFF</div>
<table>
In a template child page, this region is usually not part of
your editable
region, and so the layer's code is rejected by the template
engine. This is
a bad thing.
If instead of dragging the layer onto the page, you use
INSERT | Layer, that
should work provided your cursor is in an editable region,
but since
editable regions are usually within tables or other layers,
you have just
broken one of the rules listed above. This is also a bad
thing.
THE SOLUTION -
Open your template page in DW, and create a special place
where it is SAFE
to put your layers. In code view, find this -
</body>
and click so that your cursor insertion point is just to the
left of
</body>.
Now, use INSERT | Template Objects > Editable Region, and
name this region
"Layer Pad" or something like that.
When you save your template page, all your child pages will
now have the
LayerPad editable region on them.
THE BIG FINISH -
On any child page where you need a layer, just click in this
editable
region, and use INSERT | Layer. Bada bing, bada boom.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"htown" <[email protected]> wrote in message
news:[email protected]...
> Maybe I am just not understanding templates but I have a
really simple one
> that
> has one editable region called "content". I want to add
a absolute
> positioned
> div to the content area but DW tells me this would
require changing code
> that
> is locked by the template. I thought that the editable
area automatically
> put
> in by DW would accommodate the added code (css) that DW
puts in when
> adding a
> template to the page.
>
> So what is the Editable area called "Head" used for
anyways if not for
> situations like this?
>
> Thanks
>
>

Bayside Beat Tutorial - Part 4 - Absolute positioning

I am stuck on the Absolute positioning section. My image is supposed to be spread out across the screen and the text is supposed to be at 36% as a layer on top of the image. Here are the instructions:
To keep related styles together, select #wrapper in the Selectors pane, and click the plus button to create a new selector called #hero after it.
In the Layout category, set the position property to relative.
With #hero still selected in the Selectors pane, create a new selector called #hero article to style the <article>element nested inside the hero <div>.
In the Layout category, set the width property to 36%, and left and right padding to 10px.
Set the position property to absolute.
The moment I set steps 4 & 5, I get the following layout:
It should look like this:

Looking at your screenshot, it looks as though you have wrapped the <article> around the hero <div> in the underlying HTML. The problem isn't with your CSS, but the HTML structure.
Compare your HTML file with the version in the completed folder.

How to force absolute positioning

Hi
I am trying to force absolute positioning when I export to Dreramweaver.
How can I do this. Ive been trying to overlap my images and hence slices when I export but I never get the warning up about absolute positioning.
Any ideas
Thanks

Create the images in Fireworks and export them to the images folder of the site you have properly defined in Dreamweaver. Build the pages with the images in Dreamweaver. Fireworks can only export images "overlapping" on states which are animations, or buttons, or image swaps.

How do i add a Scroll Bar to a JList Component using absolute positioning?

I've got a applet whose content pane is set to null. I've create a jlist component on this applet and using absolute positioning set the bounds at
ListBox1.setBounds(380,10, 500, 500);.
My problem is creating add a scroll bar to the list box.
JScrollPane scrollPane = new JScrollPane(ListBox1);
C.add(scrollPane);
The above code is what i use and when i run this applet i don't see the list box at all. How do i add a scrollbar to this list box or JList component. Please help.

You need to setBounds() on the JScrollPane, not the JList.
The JScrollPane is the component that is being added to the panel.

Imported image's position moves when updated in Indesign CS6. Why??

After modifying an imported image from illustrator, the imported image's position moves within the frame of Indesign CS6 when the link is updated.

You have not provided any relevant information, so nobody can know. you can simply have added content that expands the bounding box. Well, whatever, ask in the relevant forums and be much more specific.
Mylenium

Layered image with blending mode won't display properly in Indesign CS3

Hello,
I'm having trouble placing a layered psd and/or tiff with blending modes into my indesign cs3 document. Basically I have a flattened image with a shadow on a white background. I've had to doctor the image a bit in photoshop and I've used the multiply blending mode to remove the white background. (I'm trying to get around having to clip the image and having to recreate the shadow). Anyone know how I can drop my layered image into indesign and have it keep the blending modes I've applied in photoshop?
Any help would be much appreciated.

I'll try and do my best to describe what it is I'm doing.
I've started out with a “flat” image of a product on a white background with a shadow on it. I need to make the background transparent and so that all I’m left with is the product with the shadow on a transparent background.I want to be able to place this image over another image in indesign and have the background remain transparent.
On the first layer I have a clipped out version of the product with no background (All by itself with no background or shadow). On the second layer I have the original “flat” image with the shadow and white background. On this layer I’ve used the multiply blending mode to remove the white background.
Now that I have the product on one layer by itself and the product and shadow on layer two with the multiply blending mode I have an image of the product with a shadow with no background. When I place this into indesign, my image shows up with the white background as if the multiply blending mode isn’t applied.
I’ve tried this on other images. It doesn’t appear that it lets you bring an image over with that blending mode. It's like I'd have to bring over a clipped image and then place that on top of my original image with a blending mode placed on it "in" Indesign.
Hope that make sense?

Multi-Layered Image reopens as blank layers with no work done.

Hi!
My Quick Selection tool was acting weird, so I saved my multi layered image but when I reopened the image, there was no work saved. All that showed up were blank layer after blank layer with the names I had put in. What happened to the amount of work I put in?!!?!?!?!?!? Is there a way to recover alllll my work? Please Help!!!!
Thanks,
Lynn

Thank you both for your answers.
In the meantime I researched further and found exactly the issue and a workaround. The issue is only with 16 bit psd files and has to do with alpha channels as you both mentioned. Now, I would disagree that this is acceptable behavior Leonie. In my opinion this is a serious bug but anyways..
A workaround is to place an all white alpha channel exactly after the RGB channels and BEFORE any other alpha channel as suggested here:
https://discussions.apple.com/thread/2708851?start=0&tstart=0
This is working (contrary to what is said in the above post) but be patient with the previews as they take ages to update.
Trying to automate this I've made an action to create the alpha channel and used the script manager to run it when a new document is created. Now this does not work because the document is created in Aperture when pressing 'open in external editor' and the event is skipped. I instead had to associate the action with 'open document' which of course means that I will have an alpha channel created every time I open a document..
I made the action so it names the channel 'bug fix' so I will just have to clean up every now and then.. I may choose to activate the action with a shortcut instead and have to remember every time I create a new document.
Anyways, a bit of an annoying bug and seems to be around for quite a while. Hopefully Apple is going to fix it at some point.
Best
Dionysis

Page footer absolute position issue - Crstal Reports

Hi,
I have a page footer section in the crystal report.
There are 2 sections Page footer A and Page footer B.
Here I am displaying Page Footer A in the first page and Page Footer B on all the pages.
Here the issue is, as I applied a suppress condition on page footer A in order to display only on frist page. This is working fine. But in the second page the page footer B is displayed a bit above the end of page as the page footer A is suppressed.
Can we set absolute position for page footer B? So that, the page footer B will be displayed at the same way in all the pages as like the first page.
Thankyou,
Regards
Gowtham Sen.

Hi All,
The issue got resolved. I used the option underlay. It worked well.
Thanks.

Static v absolute position

Many comments have been made elsewhere about the wisdom of
using 'absolute', particularly when a crossbrowsers are considered
and user's adjustment of text size..to quote one problem...
So, in order to eliminate these glitches from my pages, I
should apparently convert to 'static'..
What would be the steps to take to accomplish this without
too much hassle. I do have a lot of CSS code, which, I guess, when
adjusted would take care of some of the problems.
Is there a tutorial/publication which deals with this
procedure?

Any element without an explicit positioning style is static,
by default,
e.g.,
<html>
<head>
</head>
<body>
<div>This is a static div</div>
<p>This is a static paragraph</p>
</body>
> So, in order to eliminate these glitches from my pages,
I should
> apparently
> convert to 'static'..
That's a gross oversimplification. You should re-design your
layout so that
the page elements are placed on the page as dictated by THE
NORMAL FLOW,
mediated through the CSS rules. Simply taking a page that has
been designed
using absolutely positioned elements, and converting the
absolute position
to static position (by removing the positioning altogether)
will most likely
not work very well. I think you understand this, but I'm not
sure.
> I do have a lot of CSS code
This, too, is a bit troubling. Having a lot of CSS often
means inefficient
use of rules and selectors.
In general, you don't need many custom classes. And, in fact,
they
make your life more difficult when you come back to maintain
the page a year
later. Use ID selectors and create descendent selector rules.
An example -
#maintable { .... }
#maintable td { .... }
#maintable td table { ... }
each of those rules would apply explicitly to a) this table -
<table id="maintable">,
and b) this cell -
<table id="maintable">
<tr>
<td>...</td>
</tr>
</table> (and all others in that table),
and to this table -
<table id="maintable">
<tr>
<td>
<table>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
Then you could use this rule -
#maintable table td.special { .... }
to apply to this cell explicitly -
<table id="maintable">
<tr>
<td>
<table>
<tr>
<td class="special">this one</td>
<td>but not this one</td>
<td class="special">this one</td>
<td>but not this one</td>
</tr>
</table>
</td>
</tr>
</table>
Also, it is not necessary to define default styles, e.g.,
font-weight:normal, unless you are trying to counteract some
cascading rule.
Further, it is not necessary to define styles that are
normally inherited,
e.g.,
body { font-family: Calibri, verdana, arial, helvetica,
sans-serif; }
will style all characters used on the page, no matter where
they are located
or in which container.
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
==================
"Karlhevera" <[email protected]> wrote in
message
news:[email protected]...
> Many comments have been made elsewhere about the wisdom
of using
> 'absolute',
> particularly when a crossbrowsers are considered and
user's adjustment of
> text
> size..to quote one problem...
>
> So, in order to eliminate these glitches from my pages,
I should
> apparently
> convert to 'static'..
> What would be the steps to take to accomplish this
without too much
> hassle.
> I do have a lot of CSS code, which, I guess, when
adjusted would take care
> of
> some of the problems.
> Is there a tutorial/publication which deals with this
procedure?
>
>

Use incremental rotary encoder to measure the absolute position and velocity

Hi all,
I faced a problem by using incremental rotary encoder to measure the absolute position of the rotation.
I'm not using NI-Daqmx but NI-motion module. In NI-motion module, I use read encoder position.vi to read the position of the encoder.
However, the readings is in incremental form. I'm doing the feedback control, so I need the absolute position and velocity.
Is there any functions or vi in the labview that can be used to transform the information of incremental encoder to the absolute one?
Thanks
Jun Wong

Jun,
1. The incremental encoder provides incremental position. After switching on the encoder power the encoder counts upwards or downwards. For the absolute position you need the index (R or I) signal. I don't know which type of incremental encoder you have but there should be A, B and (I or R) signals. The index signal should reset the counter to zero setting this way a pseudo-absolute-position (which is lost after the first switch of). Most of the motion controllers have a mode, just after switch on, in which the controller search for the Index. This mode is called Homing.
2. Velocity. It's very simple. You sample the position with a fix sampling clock. Let's say: 10kHz. The speed is: (Actual Position - Previous Position) / Sampling Period. Pos[n] = 10.000inc, Pos[n-1] = 9.900inc. Speed = 10.000 - 9.900 / (1/10kHz) = 1.000.000 inc/sec. If one increment is 0.0001mm then the speed is 100mm/sec.
Paul

Layering Images & absolute position

Similar Messages

Maybe you are looking for