Positioning of a Layer
I have created a Layer ID. I am wanting an image within the layer to appear in the same position of a table regardless of screen resolution. Is there a way to do this? Obviously it cannot be fixed or absolute regarding pixels. I have also tried % and it does not work either.
What you need to do is enclose your table in a <div></div> (which I have done in the code below). Give it an 'id' of wrapper, position it relative, give it a width of 764px (same as your table width) and a margin 0 auto. (All done in page code below).
Then you insert a layer (absolutely positioned <div>) directly after it. (See page code below). Insert your flame image in the layer and delete it from where it currently is (code below reflects all the above changes so far)
Next style the absolutely positioned layer with some css (don't worry all you need to do is copy the whole page code below from <!DOCTYPE onwards and paste into a new Dreamweaver document and save to your site folder.
#Layer1 {
position: absolute;
width: 233px;
height: 154px;
left: 531px;
top: 0px;
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="/css/brew.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#Layer1 {
position: absolute;
width: 233px;
height: 154px;
left: 531px;
top: 0px;
</style>
</head>
<body>
<div id="wrapper" style="position: relative; width: 764px; margin: 0 auto;">
<div id="Layer1"><img src="images/logo2.gif" width="223" height="154" /></div>
<table width="764" height="220" border="0" align="center" cellpadding="0" cellspacing="0" class="maintable">
<tr>
<td width="45" height="70"> </td>
<td width="223"> </td>
<td width="413"> </td>
<td width="83"><p> </p>
<p> </p>
<p> </p>
<p> </p></td>
</tr>
<tr>
<td height="33"> </td>
<td colspan="3" bgcolor="#000033"> </td>
</tr>
<tr>
<td height="72"> </td>
<td valign="top"><p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p></td>
<td valign="top"> <br />
<b>I want the flame image to stay around 10 pixels from the table's right border regardless what the browser/screen resolution may be. </b>
<p><b>So, in other words, I want the image to stay at the same position relative to the content on the page. </b></p>
<p><b>If you look at the page with a 1280x768 screen resolution, you will see where I want the image to be. I want it to stay in the same position relative to the coffee beans regardless of screen/browser resolution.</b></p>
<p><b>The image is a transparent gif image that needs to go over the top of the other content-thus that is why it is a layer.</b></p>
<p> </p>
<p>.CSS <br />
Layer1 {<br />
position: absolute;<br />
top: 15px;<br />
right: 270px;<br />
}</p></td>
<td valign="top"><p> </p>
<p> </p></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>
Similar Messages
-
I can see somewhere the object arrangement position in a layer?
I can see somewhere the object arrangement position in a layer?
The question apeir after next problem apeir: I have a document on one layer with hundred of object and I want a new object to put after an object but befor another, is easy with Ctrl+] or Ctrl+[ when I have 10 - 20 objects, but when I have hundred ... take to much time, so, it is a posibility to arrange 2 objects quickly next one each other from the point of view of arrangement into a layer?
Thanks for answers.Hi, I know that menu, and in that menu I have one Layer, but in that layer I have , by example, 541 objects, when I import a new object, that is gona be object 542, and now the new object I want to put after, let's say, object 134. How to do that quickly? That is the question!
-
Hi,
I'm trying to do something that I think must be really
simple, but apparently I cannot find any info on it in the help
pages!
I have a main text <div> and a footer<div>.
Since the content that fills my main text layer is mainly
dynamic, the height of the layer depends on the content.
How can i get the footer to always appear below the main text
box?> Is there any way that I can make the main text always
appear to the right
> of
> the nav menu?
Float both left.
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
==================
"peewee_larkin" <[email protected]> wrote in
message
news:fc36nk$le$[email protected]..
> Hi, thanks for all the replies, but i'm still ahving a
slight problem with
> it.
>
> The problem is that i have 5 <div>s:
>
> 1: Banner
> 2: Breadcrumb trail
> 3: Navigation Menu
> 4: main text
> 5: footer
>
> The problem being that when I take off the absolute
position, the main
> text
> overlaps the navigation menu which is to the left of it.
>
> -
How to get the Image position on the layer
Hi. have a problem with a subj..
I have an image on the layer. certainly, image does not take full space on the layer. I need to know the RECT (with smaller bounds that layer), which consists with all image points.
is it possible to do this task with API functions?I am thinking about this, and use something like
JPanel.setFocusable(true). Thank you. -
Layer position fix to Table position
Hi there,
I have read quite a bit about positioning layers, however i
still find it imposible to use flexible tables with layers.
I have a simple info buton that onRollOver is shows a layer,
Example:
sample website
I manage to keep it quite close to the info buton, by setting
the left: 45% top: 65%; instead of pixels.
But when you resize the browser window (F11) it still moves .
And on full Screen it actually overlaps the buton making the
layer jumpy.
Thanks for some creative advice.
Anybody with a better solution?> Ok, could you telll me what is wrong?
You didn't do what I told you to do.
<td colspan="2" align="center" valign="bottom"><div
style="position:relative"><div
id="Layer1"></div></div></td>
here is the css code
#Layer1 {
position:absolute;
width:334px;
height: 82px;
z-index:1;
left: 108px;
top:1px;
visibility: hidden;
background-image: url(olo_images/bubble.gif);
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
==================
"Txar?n" <[email protected]> wrote in
message
news:[email protected]...
>
quote:
Originally posted by:
Newsgroup User
> > otherwise it would strech the whole table to give
space for the image
> > inside the layer, even after having set the table
at an absolute size of
> 522px width.
>
> No, it wouldn't. Since the layer (and its contents) are
removed from the
> flow of the page (by virtue of being absolutely
positioned) neither the
> layer, nor its contents can interact with any other page
element.
>
>
> Ok, could you telll me what is wrong?
> I have a table that is width:522
> Set to be in the middle and centre to screen
> 3columns and 3 rows
> in the middle i have the logo and in 2 corners
invisible.gif
> I tried to put the layer (<Div>THE.gif loaded from
css</Div>)at the botom
> righ
> corner (in the cell)
> It wouldn't work! It streched the whole table to ad the
image size.
> When i merges the two cells botom right so that the cell
was biger than
> the
> image loaded it worked!
> Where is the mistake?
>
> the htm code:
> <td colspan="2" align="center"
valign="bottom"><div
> id="Layer1"></div></td>
>
> here is the css code
> #Layer1 {
> position:relative;
> width:334px;
> height: 82px;
> z-index:1;
> overflow: visible;
> left: 108px;
> top:1px;
> visibility: hidden;
> background-image: url(olo_images/bubble.gif);
> }
>
>
> PS the problem is solved but i'd like to know for the
future. :-)
>
> Thanks
>
> -
Animating position of layer group using timeline
is it possible to change position of a layer group in new timeline? I only see opacity keyframes. Seems like I can convert to smart object to do it, but rather not do that.
Do you want to move the grouped layers on the page, or their position in the layer stack? Can you also clarify "New timeline"? It kind oof reads that you have the group in an exisiting timeline, and want to use them again in a 'new' timeline.
-
Adding a text layer over a sliced PS image
Having trouble positioning a text layer over a PS sliced
image.
The sliced image is positioned relative to the center of the
page (so it appears in the same place regardless of monitor size or
resolution, and that's where I want it).
I can position the layer in Dreamweaver, but when previewed
in the browser, the test layer moves to the left -- apparently
being positioned relative to the left side of the screen.
Is there any way to position a text layer so that it is
position relative to the center of the page (and therefore reliably
will appear on top of an image also positioned relative to the
center of the page)?
Any suggestions?This is a bad approach. Consider what will happen to your
careful alignment
if someone resizes their text in their browser. If you must
place text over
an image, the best way to do it is to make the image the
background of some
container, and then use CSS (margins or padding) to nudge the
text into the
desired location location. You will still have the same
problem, though.
> I can position the layer in Dreamweaver, but when
previewed in the
> browser,
> the test layer moves to the left -- apparently being
positioned relative
> to the
> left side of the screen.
That's how absolutely positioned elements work when they are
not within some
other positioned element. The zero coordinates default to the
<body> tag,
i.e., the upper, left-hand corner of the browser viewport.
> Is there any way to position a text layer so that it is
position relative
> to
> the center of the page (and therefore reliably will
appear on top of an
> image
> also positioned relative to the center of the page)?
Certainly, but you will have to understand CSS positioning to
accomplish it.
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
==================
"Phyto-Man" <[email protected]> wrote in
message
news:[email protected]...
> Having trouble positioning a text layer over a PS sliced
image.
>
> The sliced image is positioned relative to the center of
the page (so it
> appears in the same place regardless of monitor size or
resolution, and
> that's
> where I want it).
>
> I can position the layer in Dreamweaver, but when
previewed in the
> browser,
> the test layer moves to the left -- apparently being
positioned relative
> to the
> left side of the screen.
>
> Is there any way to position a text layer so that it is
position relative
> to
> the center of the page (and therefore reliably will
appear on top of an
> image
> also positioned relative to the center of the page)?
>
> Any suggestions?
> -
I’m a web designer that’s used to using Illustrator for all my work. Recently many of my new jobs want me to work in Photoshop, so I’m getting back up to speed with it. I have a few nagging issues that I haven’t been able to figure out:
With the direct selection tool, how do I select a small shape that’s overlapping a larger shape? For example, a small line on top of a large rectangle. When I try to do this Photoshop automatically makes me select the larger shape in the background. I have to zoom in super close and individually shift-select each corner of the smaller shape before I can move/transform/whatever it. This gets tedious and slow real fast!
Recently in a document I’m working in, whenver I make a new shape it automatically adds a bunch of layer styles like drop shadow, stroke, etc. These styles aren’t turned on, but it adds unecessary styles to my layers and my client is very strict about recieving only super clean .psd’s.
How do I make a line that is truly 1px stoke width? My lines seem to always start out as fuzzy 2px worms until I zoom in and surgically make them 1px. Again, what a waste of time! is there some sort of antialiasing setting that I need to turn off?
Thanks!1. With smaller shapes that are difficult to select, try selecting their layer first. If you are not sure which layer, switch to the Move tool (V), hold Ctrl and click on the small shape. With the default behavior in Photoshop you should be able to select the layer and then use the Direct selection tool to select points on the vector path of the small shape. If you want to just move the entire shape when its the only path on a layer, aside form using the Path Selection tool (black arrow), you can just use the Move tool (V) to change the position of the layer. If you have to deal with a lot of shape layers that you just want to click and move, enable the Auto Select for the Move tool in the Properties bar. Then holding Ctrl while using the tool will toggle to its non - Auto Select mode.
2.On the Tool's property bar under the main menu, make sure the chain button is not pressed then click on the Style swatch or arrow to the right of the chain button to open the style swatch popup and from its menu there choose No Style. Next shape layer you make will not have the current style automatically applied.
3. I'm using CS5 on a pc and creating 1 px straight line with the Line tool is buggy with its alignment to grid. The Line Tool draws lines in Shape mode as rectangle vector paths. The difference between the Rectangle Tool and the Line tool is that the Line tool aside from having a Weight attribute, it draws the rectangles starting from the middle if its side. In order to snap it to grid you have to set the grid in the settings to Gridline every 1 pix and Subdivisions 2. If properly working this is supposed to solve your problem if you enable snap to grid and draw your lines starting in the middle of a pixel. The problem is that this doesn't work properly with the Line Tool which does not snap perfectly to the grid. The work around is to draw your lines with the Line Tool in Fill Pixels mode which has an Anti-aliasing option that you can turn off.
Another alternative for drawing lines on raster layers without anti-aliasing is to use the Pencil tool and hold Shift while dragging with it. The Pencil Tool in Photoshop is the same as the Brush tool but without anti-aliasing. I think more proper name would be non - anti-alised brush. -
Program Default Layer Writing Question
People...
An internet friend of mine in another forum helped me solve a
parent (container) layer centering problem. I had created a large
"Layer 1"...nested Layers 2, 3 & 4 within Layer 1...&
wanted Layer 1 to slide to the center of any browser window, with
2,3 & 4 not changing absolute position relative to Layer 1. The
solution was:
<div id="Layer1" style="position:relative; width:285px;
height:311px; margin: 0 auto;">
<div id="Layer2" style="position:absolute; width:47px;
height:115px; z-index:1; left: 226px; top: 120px;"><img
src="layer2.jpg" width="58" height="133"></div>
<div id="Layer3" style="position:absolute; width:131px;
height:115px; z-index:2; left: 3px; top: 3px;"><img
src="layer3.jpg" width="158" height="189"></div>
<div id="Layer4" style="position:absolute; width:176px;
height:71px; z-index:3; left: 94px; top: 130px;">;"><img
src="layer4.jpg" width="158" height="189"></div>
</div>
where the container (Layer 1) was assigned relative
positioning & centered by auto margins...& the nested
layers (2,3 & 4) remained absolute; & inline
...but...
...he also tells me that inline styles are not a good idea.
Everybody tells me that inline styles are not a good idea.
But no one tells me why.
So...3 questions:
1) Why are inline styles not a good idea...& is that
relative (pardon the pun) to the way I am now centering my layer
layout?
2) Is there a way to configure Dreamweaver to write layer
code (i.e., user draws in the layer...Dreamweaver writes the code)
other than inline?
3) On all of my existing page layouts that consist of
multiple layers (each one housing an image or text)...that I now
want centered...how do I nest those layers in a large container
layer? (the above centering solution was from a test page I created
from scratch...& the subsequent layers were nested as I went. I
now need to go back to existing pages & center the layout.)
Thanks very much,
mark4man
Dreamweaver MX (6.0)mark4man wrote:
>
People...
>
> An internet friend of mine in another forum helped me
solve a parent
> (container) layer centering problem. I had created a
large "Layer 1"...nested
> Layers 2, 3 & 4 within Layer 1...& wanted Layer
1 to slide to the center of any
> browser window, with 2,3 & 4 not changing absolute
position relative to Layer
> 1. The solution was:
>
> <div id="Layer1" style="position:relative;
width:285px; height:311px; margin:
> 0 auto;">
> <div id="Layer2" style="position:absolute;
width:47px; height:115px;
> z-index:1; left: 226px; top: 120px;"><img
src="layer2.jpg" width="58"
> height="133"></div>
> <div id="Layer3" style="position:absolute;
width:131px; height:115px;
> z-index:2; left: 3px; top: 3px;"><img
src="layer3.jpg" width="158"
> height="189"></div>
> <div id="Layer4" style="position:absolute;
width:176px; height:71px;
> z-index:3; left: 94px; top: 130px;">;"><img
src="layer4.jpg" width="158"
> height="189"></div>
> </div>
>
> where the container (Layer 1) was assigned relative
positioning & centered by
> auto margins...& the nested layers (2,3 & 4)
remained absolute; & inline
>
> ...but...
>
> ...he also tells me that inline styles are not a good
idea.
>
> Everybody tells me that inline styles are not a good
idea.
>
> But no one tells me why.
>
> So...3 questions:
>
> 1) Why are inline styles not a good idea...& is that
relative (pardon the pun)
> to the way I am now centering my layer layout?
Because the main advantage of using css is precisley to
remove the styles from the html markup, and
place it instead in an external style sheet. This allows you
to:
1.centralise the code that defines your layout in one place,
and thus have only one file to deal
with to update/change all your pages layouts.
2.Think of layout in a more precticall way by dividing layout
styles into coherent styles
definitions that you can then combine in various ways to
style various heml elements.
3.Keep your html markup clean and simple
>
> 2) Is there a way to configure Dreamweaver to write
layer code (i.e., user
> draws in the layer...Dreamweaver writes the code) other
than inline?
maybe in DM8, but I don't think so, definitely not in MX6.
Side note: using Layers for layout is not a good practice
anyways, for many reasons, see below
>
> 3) On all of my existing page layouts that consist of
multiple layers (each
> one housing an image or text)
what will happen if the user increases the text size in their
browser preferences? Try it: the text
will overflow the layers, and your page will look horrible,
with text overlapping images or other
text. Because you are using Layers. This would not happen if
you were using relative divs or tables
with no fixed height.
>...that I now want centered...how do I nest those
> layers in a large container layer? (the above centering
solution was from a
> test page I created from scratch...& the subsequent
layers were nested as I
> went. I now need to go back to existing pages &
center the layout.)
>
In short, consider NOT using Layers at all.
Use tables (easier) or realtively positioned divs (harder but
often more practical in the long run).
> Thanks very much,
>
>
mark4man
> Dreamweaver MX (6.0)
>
>
seb ( [email protected])
http://webtrans1.com | high-end web
design
Downloads: Slide Show, Directory Browser, Mailing List -
Pan Behind tool on a 3D layer for Scale
Appologies. Unable to find any info yet on whether there is a way to use the Pan Behind tool on the Z axis of a 3D layer for scale. I would like the said 3D layer to be pushed back in Z space, but to appear as if it hasn't changed size in the camera. My guess is that the scale would automatically adjust as the layer is pushed back in Z space. Have I missed something in the manuals and forums? Thanks for a reply.
I'd use a simple expression for the scale property. You could then adjust the position of the layer or the position of the camera and keep the layer the same size in the frame. Changing the anchor point in Z would then also change the relative size of the layer in the camera view. I've written out the expression in long form so that it's easier to understand. It uses the length (distance) between the 3D layer and the camera/divided by the zoom value (focal length) to create a scale multiplier. Here you go:
point1 = thisComp.layer("Camera 1").transform.position;
point2 = position;
d = length(point1, point2);
z = thisComp.layer("Camera 1").cameraOption.zoom;
sa = 100 * d/z; //scale adjustment
[sa, sa, sa] -
Layer relative positon to background, width and hight
Hi All
I have a problem in Photoshop:
I have a layered image and I wanted to know the relative position of the layer to the background and the width and hight. Does Photoshop allow that?
I know you can get the position by moving the mouse cursor to the top left corner of the layer or by converting the layer to a selection.
This is not a solution for me. I need to know the relative position of the layer while moving it with the "Move Tool". And I also need the width and hight of the layer
Is this possible?
Thanks a lot
EdgarIf You set the Ruler Units in the Info Palette Options to percent and select the Layer with the Move Tool and without any selection active hit command T to move the layer content the Info Palette will show the width, height and position (of the upper left corner) of that layer.
The Options Bar Position Numbers unfortunately dont seem to be expressable as percent values and Width and Height can be entered only as percentages of their original values and not as percentages relative to the files size.
Does that help? -
Strange problem undoing a shape layer move in Photoshop CS5
Hi. I have a strange recurring problem in Photoshop CS5. Basically, it manifests like this:
I have a shape layer, or several shape layers. I will move the shape with the move tool (usually via holding Ctrl, depending upon which tool is selected). If I then use undo or step backward, the image does not revert properly. It's like there is a discrepancy between the position of the layer mask and what is displayed on screen. Clicking on the vector mask of the shape layer to reveal its outline shows that the shape is where it should be (i.e. in the position it was originally), but the element of the image it represents is somewhere else. Sometimes, if I move a group of such shape layers, the problem seems to affect some of them but not all. Once so far, I have managed to rectify the problem by simply turning off an unrelated layer and turning it on again! Very strange.
It's a difficult problem to deal with, because it doesn't happen every time. And when it does, it's a case of reverting to a previous save. Luckily I save reasonably often, but it's still an annoying thing to deal with.
Hope I've described it well enough to understand. Any ideas?
I'm using CS5 12.0.4. Windows 7 64-bit. Intel i5 2300. Integrated HD2000 graphics with latest drivers.I realise I seem to be talking to myself here (perhaps no-one's still using CS5 here, plus it's a fairly specific problem), but I have discovered a factor that makes for repeatable demonstration of this behaviour.
It appears that the problem I'm having is related to using feathering on vector masks. Create a shape with the pen tool, add an amount of 'feather' in the mask options panel, use the move tool to move the shape and then undo. This displays the problem I'm seeing where the image is not refreshed. I have at least found a way to workaround the issue for now. Simply changing the feathering amount updates the image to how it should be.
I'm glad that I can at least continue to use CS5, because I'm totally content with its functionality for my uses, and an upgrade seemed overkill (not to mention having to adjust to the changes made in CS6+ versions).
Perhaps there is still a cure for this bug somewhere. I will keep looking, and update this thread if I find it, in the hope that it may help someone else out there with the same problem. -
Animate transform of sequence and adjustment layer
New to AE - trying to use it to rescue some time lapse footage taken in very dusty conditions. Lots of sensor dust
So far
Exported sequence as tiff's from LR
Imported as tiff sequence in AE
Created "New comp from selection"
Set the comp to 1080p24
On the footage layer - scaled down to 46% to see all the image
Added an adjustment layer
Added small ellipse masks over each dust spot to the adjustment layer
Feathered all masks to about 10px
Applied the dust and scratches filter to the adjustment layer and set to radius 30
This looks very nice. It's worked for all 6 sequences so far.
What I want to do now is a false pan or zoom by using different parts of the image - after all - the tiff sequence is far larger than 1080p.
I tried creating a new comp - embedding the original comp as a layer and then keyframed the position and scale of the layer. This gives me the effect I want and holds the footage and adjustment layer transform in sync - but - I'm seeing poorer quality as I scale closer.
I suspect that if I applied the scaling to the original footage layer in the original comp I'd not see this degredation (in other words - instead of scaling the outer comp from 100% to 130% I reckon that I should scale the footage layer itself in the inner comp from 46% up to 80% or so). This would also be more flexible as I could move across an image with position transform rather than just scaling.
But I just can't quite see how to also scale and position the adjustment layer in sync so that the masked ellipses stay over the dust spots over time.
I'd thought I could simply manually apply the same transform to both layers - but the footage layer starts at 46% scale - the adjustment at 100% (looks like it'd work for position tho).
Would be glad if someone could point me in the right directionThat looks perfect. Didn't even know it existed - but it looks like it does exactly what I want - control the inner params on each layer from the outer comp.
Will give it a try.
Then I just have to get quicktime rendering not to crash but that's a different question -
Created Vector Smart Object layer from Ad Illust. to PS, can't see it, why?
I am creating a postcard for mail out and I am new to the CS5 group of products. I followed tutorial to drag an Adobe Illustrator file into Photoshop creating a vector smart object layer of my logo and saved it. I closed the file and re-opened it thinking I would see my logo where I placed it but all I can see is the "X" box that allows you to adjust the size of the object. Could anybody tell me the step to get the object to appear in my Photoshop file? When I click on the vector layer it takes me back to AI so I believe they are connected the way they are supposed to be. Thank you in advance for the help. If I am way off could you explain how?
I want to thank you for your responses and help.
I inadvertently figured out what I was doing wrong while talking with a friend. I didn't understand what layers really were and that they stacked on top of each other. When I placed the vector smart object I left it's position under another layer which was blocking it or my logo so that even though the resize box was showing up the logo or vector smart image was under the other layer. Once I clicked and dragged it's layer to the top of the layers the image was visable and the postcard done. Yeah!
Thanks again. -
How do I lock a layer in place?
I am trying to get a top layer to stay in position above the layer below it. When I resize the window in the browser it floats all around. How do I get it to stay in the same place relative to the rest of the design? Here it is:
http://www.martyrobertsproductions.com/scf/index.html
Thank you for any help - this is driving me crazy!Here's the deal. This is in HTML-speak, not GoLive-speak. It's good to
understand the non-filtered meaning of these things.
"Layer" is just a nick-name for an absolutely positioned container that
happens to be a
tag. In fact, anything on your page *can* be
absolutely positioned - it doesn't have to be a
tag, and it doesn't
even have to be a container (for example, an image or even a horizontal
rule -
- can be absolutely positioned).
When something is absolutely positioned, several things happen to it:
1. It is removed from the normal flow. This means that the page suddenly
forgets that the absolutely positioned element is even there, and is
rendered as if that element were not even in the code. This prevents an
absolutely positioned element from interacting with anything else on the
page, meaning that it cannot push something else out of the way.
2. Then, after all that happens, the absolutely positioned element is
located on the page based on its top/right/bottom/left coordinate values.
You would think that if the left coordinate for an absolutely positioned
element were 100px, that this would refer to the left margin of the page and
in some cases it does, but not in all cases. The reality of positioning is
much more complex than this. The offsets given to an absolutely positioned
element are calculated from the location of that element's nearest
positioned ancestor. You can see what I mean by following this.
Create a blank page. On it, place two layers. Make them both 100px tall
and wide, and 100px left. Make one 100px top, and the other 200px top.
You will now see two boxes on the page one immediately above the other. Now
grab the bottom layer, and drag and drop it WITHIN the top layer (you will
have to do this in the code). Where do you now see the second layer?
It's now 200px below the top margin and 100px to the right of the left
margin of the PARENT LAYER (if you did things correctly). But the CSS that
locates this second layer has not changed. It's still 100px left, and 200px
top. What has changed for this second layer is its zero coordinate
reference point. It's now being placed in the rendered page based on the
location of its closest (in the code) positioned ancestor (the first layer).
That's the concept. So how come, when there is NO closest positioned
ancestor, the top/right/bottom/left locations are calculated from the
browser's margins? That's the way it works - when there is no positioned
ancestor, the tag becomes the zero reference, i.e., the upper,
left-hand corner of the browser viewport.
You are half way there. The next concept we need to explore is another kind
of positioning - relative positioning. In a curiously redundant way, a
relatively positioned element has these properties -
1. It is NOT removed from the normal flow. In other words, the page
doesn't forget about it, and it can push other things around, or be pushed
around by other things.
2. It can be offset (using those same top/right/bottom/left values) from
its base location.
3. BUT when offset, the page still thinks it's where it started, not where
it winds up.
Now these last two things sound pretty goofy, and they are. To understand
the centering thing, though, you don't need to worry about them. The
important thing is that a relatively positioned element is not removed from
the normal flow.
The final concept you need is much simpler. Any block tag can be centered
within its container by giving it an explicit width, and then setting
left/right margins to 'auto'. Thus -
1. The browser know the element's width.
2. The browser knows the width of the element's container (whether it be
the whole page, or a table cell).
3. With auto left/right margins, the browser subtracts the element's width
from the container's width, and places half of the remainder on the left and
the right. Bada bing - it's centered.
Now for the big finish.
Since a relatively positioned element is not removed from the flow, it can
be centered. Since it's relatively positioned, any internal absolutely
positioned elements will use its location on the screen as a zero point
reference. Thus as this 'nearest positioned ancestor' to those interior
absolutely positioned elements moves to its center point, the absolutely
positioned elements are dragged along for the ride.
Get it?
Murray
Maybe you are looking for
-
Flash Builder 4.6 Mobile Project Using Blazeds & Native Extension
Hi, I'm building a Flex Mobile project in FB, that uses BlazeDS to access data through a Spring Project, and also uses an ANE file to access the device's contacts. I want to debug the application on a device connected with a USB cable, so had to set
-
Using External HD connected to Airport to use for Time Machine - Problems
Hello, I have an Airport Extreme (1 USB port on back) and want to use an external HD as the Time Machine. Originally I had the HD connected to the Airport and just using as storage. We have 2 Macbook Pros and both could see this HD when used this way
-
Was updating ios and itunes wont detect my phone and i cant turn it off or nothing
not sure what ios i was using
-
Are there any new features coming for Muse? It's good but when I see the online web design sites i.e. Squarespace and WIX, I'm beginning to wonder about the feasibility of having Muse CC at a higher cost. It would be good to be able to embed apps and
-
Moving cursor moves screen around
I'm sure there's a simple solution to my problem, I'm just not sure what I did to cause it. I am using a Kensington wireless keyboard and mouse with my G5 and when I pressed several of the keys such as Shift/Cntrl/Alt (not sure which combination) whi