Layer positioning problem

i insert a layer. set properties - top, left, width, height -
but layer goes where it wants to. not honoring property values in
dreamweaver edit mode and even worse positioning error in
preview/debug. can not figure it out. all other layers on page
behave fine. position set to absolute, float to none.

Design view....
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
==================
"Walt F. Schaefer" <[email protected]> wrote in
message
news:ep8eu1$rj9$[email protected]..
>>>what features to leave out of the cut down
version.
>
> Code View?
>
> Walt
>
> "Malcolm N_" <[email protected]> wrote in
message
> news:[email protected]..
>> On Wed, 24 Jan 2007 01:34:31 +0000 (UTC),
"elmorilloana"
>> <[email protected]> wrote:
>>
>>> i have been
>>>teaching children to make pages using pagemill as
is much more intuitive
>>>than
>>>dw. but, things move on - time i learned the
'latest'. forums are a
>>>nice help.
>>
>> I think one of the problems is that DW is too high
level for some
>> people to start html work - and therefore too
expensive. No amateur is
>> going to spend the full price, when other packages
like Pagemill were
>> /are in the 50 to 100 dollar / pound / euro league.
>>
>> I've said before that Adobe may be well advise to
release the next DW
>> in the same way as Photoshop; the whole package for
professionals and
>> like Photoshop Elements for the domestic market. The
tricky part would
>> be what features to leave out of the cut down
version.
>>
>> --
>>
>> ~Malcolm N....
>> ~
>
>

Similar Messages

Text and layer position problems

Hi, I am creating a webpage and I have installed a background
image. for which I have centred and all is fine.
I am now using layers to add text so I can place the text
wherever I want.
But when I save and view in IE and Firefox the text is not in
the correct position. I have tried a number of things to solve this
all to no avail.
Please can someone help me.
The text I have so far is:

> I am now using layers to add text so I can place the
text wherever I want.
This is number 4 in the top 5 mistakes someone can make in
building their
pages. Here's why -
http://www.great-web-sights.com/g_layer-overlap.asp
It will help you to understand the difference between
absolute positioning
and centering content. Your layer is absolutely positioned,
and your
background is centering. That's never going to work the way
you want....
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
==================
"YNWA4EVA" <[email protected]> wrote in
message
news:[email protected]...
> Hi, I am creating a webpage and I have installed a
background image. for
> which
> I have centred and all is fine.
>
> I am now using layers to add text so I can place the
text wherever I want.
>
> But when I save and view in IE and Firefox the text is
not in the correct
> position. I have tried a number of things to solve this
all to no avail.
>
> Please can someone help me.
>
> The text I have so far is:
>
>
>
> <!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=iso-8859-1" />
> <title>Liverpool Hope University - IT Deanery Book
Sales</title>
>
> <style type="text/css">
> 
> </style></head>
>
> <body>
> <div id="Layer3">
> <p>I want my text here </p>
> </div>
> </body>
> </html>
>

Layer position misBehavior..! -( help ? )-

On any of the various pages I'd been putting together recently, I get confusing responses.
When I come back to verify link settings before publishing (locally), some of the links refuse to be positioned frontmost. Then I discover that a few of the other graphics in its neighborhood refuse to be directed backmost.
I've seen so much of this 'misbehavior' that I've developed the pattern of changing the opacity of any questionable link -(back to almost full)- just to determine from it's coloring where in the layer hierarchy it's decided to settle.
I tried duplicating another, properly behaving link, and changing its setting to the link I'd had to delete. That would only stay front most until it I'd moved it near the old position.
My experience has been that a newly duplicated item, iWeb would deposit on the page as frontmost
But these new links seemed to change their layer mind when they'd get close to the layer position they were replacing. Their now temporarily fully colored area would slide behind any item(s) in the current problem area.
I've tried several workarounds - most of them from within the same page. But the only thing that seems to work consistently has been to select something similar from another page where they seemed to be behaving correctly. Then I'd copy them from there and paste them into the new page as a group and change any text or graphic components as necessary.
It sure has become tedious keeping up with these iWeb neuroses.!
Does anyone know why this might be happening..?
-(my domain file size currently is around 16 mB, probably half of which is temp. archived graphics )-
-( for the interim, totally publishing locally)-
Has anyone a cure for this peripatetic behavior..?
Is there any easier workaround..?
Much advance appreciation for any tediosity relief.!
G-4; 400/896 Mac OS X (10.4.7)

One way to do that would be to use two images: one blurred, one not. then use a mask to show and hide one or the other. You can probably adapt this example file: http://www.ddg-designs.com/downloads/mask.zip

Layer Positions - absolute

Having problems with layer position. Dreamweaver preview is
correct, as is
display in Internet Explorer.PC.
Firefox on PC, and all Mac browsers do not correctly place
top value (left
value is correct)
Any ideas? All layer attributes are in css. Emp01 below is
correctly placed.
Emp07 is not. All layers given unique Z-index
#Emp01 {
position:absolute;
left:183px;
top:275px;
width:180px;
height:42px;
z-index:1;
visibility: hidden;
#Emp07 {
position:absolute;
left:600px;
top:265px;
width:175px;
height:61px;
z-index:7;
visibility: hidden;

> This doesn't seem to make sense to me. Does it to you?
Yes, of course.
You have not controlled the margin-top on the <p> tag,
and IE will not
collapse that margin - thus leading you to conclude that it's
positioned
correctly. When you use a modern browser, that correctly
collapses that top
margin, you see the layer as being placed higher than you
want. The
solution is to use CSS to set that <p> tag's top margin
to zero. Then you
will be able to position the layer reliably....
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
==================
"Anthony LeBaron" <[email protected]> wrote in message
news:[email protected]...
> Sorry Murray,
> Was not able to post file since it contains unreleased
financial data...
> Nowever, I have repaired the problem but I don't
understand the issue.
> Maybe you can explain.
>
> Each layer was a div tage with an absolute position.
> Within the div tag was a small text field.
> The first line was within a span tag with a specific css
style.
> The following lines were within a second span tag with
another css style.
>
> If the div tag was immediately followed by a <p>
(i.e., <div><p><span>...)
> the layer was positioned properly in all browsers, both
mac and pc.
> If the <p> was omitted, the layer would position
correctly in IE (pc) and
> in Dreamweaver preview. In other browsers and on the
Mac, it would display
> higher than specified.
>
> This doesn't seem to make sense to me. Does it to you?
>
> Here is the code used within the div tag.
>
> <div id="Emp06">
> <p>
> <span class="Name">Lorem Ipsum</span><br
/>
> <span class="Title">
> tile line 1<br />,
> title line 2</span>
> </div>
>
>
> "Murray *ACE*" <[email protected]>
wrote in message
> news:[email protected]...
>> Would need to see your HTML too. Can you post a link
to the page?
>>
>> --
>> 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
>> ==================
>>
>>
>> "Anthony LeBaron" <[email protected]> wrote in
message
>> news:[email protected]...
>>> Having problems with layer position. Dreamweaver
preview is correct, as
>>> is display in Internet Explorer.PC.
>>> Firefox on PC, and all Mac browsers do not
correctly place top value
>>> (left value is correct)
>>> Any ideas? All layer attributes are in css.
Emp01 below is correctly
>>> placed. Emp07 is not. All layers given unique
Z-index
>>>
>>> #Emp01 {
>>> position:absolute;
>>> left:183px;
>>> top:275px;
>>> width:180px;
>>> height:42px;
>>> z-index:1;
>>> visibility: hidden;
>>> }
>>>
>>> #Emp07 {
>>> position:absolute;
>>> left:600px;
>>> top:265px;
>>> width:175px;
>>> height:61px;
>>> z-index:7;
>>> visibility: hidden;
>>> }
>>>
>>
>>
>
>

Layer position resets when creating animations

I'm creating an animated gif from a video clip (cinemagraph). In order to acheive the effect I need, I need to move each layer with the move tool to get an object to stay in the same position. I have gone through layer by layer and used the move tool to move the contents of each layer. When I play the animation I see the layers in the position I put them in. As soon as I stop playing the animation the contents of each layer snap back to their original positions. I have tried using the lock tools (both lock position and lock all) but they don't make a difference. Can anyone tell me why layer positions would reset when creating animations and how to get it to stop?
Thanks for any help.
Eric

It seems from your answer that you're thinking I'm just moving one frame and expecting the rest of them to move automatically (but I'm not sure if that's what you are saying). I have gone through and moved each frame individually and then locked each frame's position individually. When I play the animation and then stop it the layers move back to their original positions.
I'm also not sure if you're thinking I'm expecting that when I move one image off the layer it will affect the next layer. That's not what I'm expecting. I'm just repositioning the image on each layer to get a particular object to stay in one place (the camera was moving while shooting), so I'm dealin gwith each layer individually.
Thanks

Offset div / positioning problem in IE

I've posted this problem in another thread but it was a sub question. Anyway, the problem I'm having is positioning a div over all other divs. I've managed to get it to work perfectly fine on Firefox and Chrome the way I wanted. The problem is usually when it comes to internet explorer. I just want the image or div placed on the right side of the site but changing the properties always has the same result, internet explorer places is far beyond where it's suppose to be. I'll add images, the code, and the live site below. Any help would be appreciated.
Chrome View:
Firefox View:
*IE View (Wrong):
Website: http://emergencyclean-up.com
Code:
<!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>Emergency Clean Up Homepage</title>
<style type="text/css">
body {
          background-color: #333333;
#entireSite #sidebar #spacer {
          height: 300px;
          width: 350px;
#entireSite #sidebar #newsletter {
          background-image: url(../Images/NewsLetterBackground.png);
          height: 165px;
          width: 350px;
          color: #FFF;
</style>
<link href="main.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body onload="MM_preloadImages('../Images/Buttons/buttonOver_01.gif','../Images/WaterDamageOver .png','../Images/FireDamageOver.png','../Images/MoldRemediationOver.png','../Images/SootRe movalOver.png','../Images/OdorControlOver.png','../Images/facebook-logoOver.png','../Image s/yelp-logoOver.png','../Images/LinkedIn_logoOver.png','../Images/twitter-logoOver.png')">

<div style="width:100%;">
<div style="width:900px; margin-left:auto; margin-right:auto;">
<div style="width:100%; float:left;background-color:#333333;">

<div id="navbarArea">

<div align="center">
<div id="navbar">
<ul id="MenuBar1" class="MenuBarHorizontal">
    <li><strong><a href="index.html">Home Page</a> </strong></li>
    <li><strong><a href="About Us.html">About Us</a></strong></li>
    <li><strong><a href="Services.html">Services</a> </strong></li>
    <li><strong><a href="Testimonials.html">Testimonials</a></strong></li>
    <li><strong><a href="Contact Us.html">Contact us</a></strong></li>
    <li><strong><a href="Special Offers.html">Special Offers</a></strong></li>
</ul>
</div></div>

</div>


<div id="entireSite">

<div id= "sidebar">

<div id= "spacer">
</div>


<div id= "newsletter">
<center><font size="5">Subscribe to Our Newsletter</font></center>
<form action="subscriptionform.php" method="post" id="Newsletter">
<table width="100%" border="0" cellpadding="3">
<tr>
    <td>Name:</td>
    <td><input name="News Letter Name" type="text" size="30" maxlength="40" /></td>
</tr>
<tr>
    <td>Email:</td>
    <td><input name="News Letter Email" type="text" size="30" maxlength="40" /></td>
</tr>
<tr>
    <td>Zip Code:</td>
    <td><input name=" News Letter Postal Code" type="text" size="10" maxlength="12" /></td>
</tr>
</table>
<center><input name="Subscribe" type="Submit" id="Subscribe" /></center>
</form>
</div>

</div>


<div id= "maintext">

<div id= "titlebar">
<br />
</div>

<br />
<center><img src="../Images/Logo.png" width="500" height="160" alt="Logo" />
<br />
<br />
<center>Choose from one our various services offered here at Emergency Clean-up.</center>
<br />
<table width="100%" border="0" cellpadding="0">
<tr>
    <td><center><a href="Water Damage.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('WD','','../Images/WaterDamageOver.png',1)"><img src="../Images/WaterDamage.png" alt="Water Damage" name="WD" width="75" height="75" border="0" id="WD" /></a>
    <br />
    Water Damage</center></td>
    <td><center><a href="Fire Damage.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('FD','','../Images/FireDamageOver.png',1)"><img src="../Images/FireDamage.png" alt="Fire Damage" name="FD" width="75" height="75" border="0" id="FD" /></a>
    <br />
    Fire Damage</center></td>
    <td><center><a href="Mold Remediation.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('MR','','../Images/MoldRemediationOver.png',1)"><img src="../Images/MoldRemediation.png" alt="Mold Remediation" name="MR" width="75" height="75" border="0" id="MR" /></a>
    <br />
    Mold Remediation</center></td>
    <td><center><a href="Soot Removal.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('SR','','../Images/SootRemovalOver.png',1)"><img src="../Images/SootRemoval.png" alt="Soot Removal" name="SR" width="75" height="75" border="0" id="SR" /></a>
    <br />
    Soot Removal</center></td>
    <td><center><a href="Odor Control.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('OC','','../Images/OdorControlOver.png',1)"><img src="../Images/OdorControl.png" alt="Odor Control" name="OC" width="75" height="75" border="0" id="OC" /></a>
    <br />
    Odor Control</center></td>
</tr>
</table>
<br />
<center> For more services please click <a href="Services.html">here</a>. </center>
</div>


<div id= "bottombar">
<img src="../Images/bottomBar.png" width="900" height="25" alt="bottombar" /></div>


<div id= "hotlinks">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('FB','','../Images/facebook-logoOver.png',1)"><img src="../Images/facebook-logo.png" alt="Facebook" name="FB" width="25" height="25" border="0" id="FB" / align="left"></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('YP','','../Images/yelp-logoOver.png',1)"><img src="../Images/yelp-logo.png" alt="Yelp" name="YP" width="25" height="25" border="0" id="YP" / align="left"></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('TR','','../Images/twitter-logoOver.png',1)"><img src="../Images/twitter-logo.png" alt="Twitter" name="TR" width="25" height="25" border="0" id="TR" / align="left"></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('LI','','../Images/LinkedIn_logoOver.png',1)"><img src="../Images/LinkedIn_logo.png" alt="Linked In" name="LI" width="25" height="25" border="0" id="LI" / align="left"></a>
</div>


<div id= "copyright">
<br />
<p align="right">Content copyright 2012. EMERGENCYCLEAN-UP.COM. All rights reserved.</p>
</div>

</div>

<div id="containerEmergency"><img src="../Images/emergency contact.png" width="220" height="220" />
</div>
</div>
</div>
</div>

<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

I often find that differences between FF and IE often boil down to errors in closing page element tags... like not closing <div> or <script> tags. So first validate and fix any of those issues:
http://validator.w3.org/
a number of those 35 errors relate to closing tags.
Then to review z-indexing (stacking order) from an older post:
Maybe this will help clear up any misunderstanding you have about declared positioning as well as the use of z-indexing:
The actual display of a positioned element will depend on whether or not it's parent element also has a declared position or not.
z-indexing ONLY works with elements that have a declared position.
Using a declared position like absolute tells and browser to take that element out of the natural flow and do something different with it. So you've got the browser parsing in order from top to bottom, then throwing in some elements that are completely out of the flow.... they can be very hard to control, because there are special rules that apply to elements with declared positions.
The least understood of those rules is what I call the "Parent Rule". Giving an element a declared position like relative or absolute can have huge differences in how that element is actually displayed depending on whether or not the PARENT of that element also has a declared position.
So a div which is position:absolute for example will display one way if it's parent also has a declared position and it will display in a completely different manner if it's parent does NOT have a declared position... to review:
If a div's parent container DOES NOT also have a declared position, the child <div> will do 1 of 2 things.
If position:relative, it will position as desired but space will be left as though that element was still in the natural flow. So you may move the 500 X 100 element down and over, but a 500 X 100 space will be left, as though it was still there.
If position:absolute, child is positioned relative to browser window and that position does not change even if window contracts or expands.
So be sure to give a declared position to both the parent and the child <div>.
Neglecting to follow this rule is the main reason why the use of declared positioning fails.
And just one more point, almost never is it necessary to use a declared position, and that method certainly should not be used for general page layout.
But if and when a special situation comes up that you really do need z-indexing... then of course you will also have to use a declared position. Understanding the "Parent Rule" will make working with z-indexing and declared positions much easier and more successful.
Best wishes,
Adninjastrator

Layer Positioning For IE and Firefox

Im using Dreamweaver 8. Im trying to position a flash file at
the center of the top of the page, and at the bottom of the page.
but for some reason its only laying out properly in Internet
Explorer. i was using Project Vii's Screen Layout extension. For
some reason in Firefox the layer at the bottom of the page is
positioned strangely. like it is too low or something or that its
trying to position at the very top of the layer instead of the
bottom - i want the bottom flash file to overlap the top one when
clicked - u can take a look. check it out in IE and Firefox.
anyhelp is greatly appreciated.
http://www.johnniewang.com/tests/mainswf.html

Get rid of the Layout Designer and take a look at how I did
it here -
http://www.murraytestsite.com/mainswf.htm
It's way simpler.
In addition, I'm not sure what you are describing, but could
this be your
problem?
<param name="wmode" value="transparent" />
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
==================
"raverdx" <[email protected]> wrote in
message
news:e5n7qb$q99$[email protected]..
> Im using Dreamweaver 8. Im trying to position a flash
file at the center
> of the
> top of the page, and at the bottom of the page. but for
some reason its
> only
> laying out properly in Internet Explorer. i was using
Project Vii's Screen
> Layout extension. For some reason in Firefox the layer
at the bottom of
> the
> page is positioned strangely. like it is too low or
something or that its
> trying to position at the very top of the layer instead
of the bottom - i
> want
> the bottom flash file to overlap the top one when
clicked - u can take a
> look.
> check it out in IE and Firefox. anyhelp is greatly
appreciated.
>
> <a target=_blank class=ftalternatingbarlinklarge
> href="
http://www.johnniewang.com/tests/mainswf.html
> ">
http://www.johnniewang.com/tests/mainswf.html
> </a>
>

Help with Layer Positioning and TimeLine

Hello all, here is my situation:
I am trying to do a simple Layer animation for my home
page... 4 Layers startoff at the right of my webpage(table) and end
up at the left handside, as an example.
My problem is I have a main 1x1 table that is centered, and
that works fine to center all the text and images that are within
it, but the layers that I tried placing within it stay absolute to
the screen and not relative to the table.... and if I try to
specify relative position in the first place for any of the layers
that Layer disapears from my Layer panel and I cannot timeline with
it???!!!
This Started out as a lame trial to avoid making a flash
movie for this animation.. but right now I am more interested in
knowing the possibilities and limitations of using Layers and
Timelines in Dreamweaver.... Any help or comments are most welcome.
Layth

I have requested that the thread be removed, Andrew. That's
the best we can
do, I'm afraid. Thing is, it can only be removed from the
webforums, and
not from the local computers of those who have already
downloaded the
message. Also, if Google Groups synched already, then it's
like being
carved in stone....
You can see if that's the case by searching here -
http://groups.google.com/advanced_group_search?q=+group:macromedia.dreamweaver
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
==================
"Murray *ACE*" <[email protected]> wrote
in message
news:[email protected]...
> If you go here -
http://www.great-web-sights.com/g_layerlaws.asp,
and read
> through the layer laws, you'll see that you have broken
at least one by
> putting your layers into a table. Being absolutely
positioned, the layers
> do not rely on the table for their location on the
screen. There are ways
> to do this (easily) if you understand the whole concept
of CSS
> positioning. You can try the following things -
>
> * After setting your timeline the way you want it,
MANUALLY change the
> position attribute of each layer from "absolute" to
"relative". The
> timeline will still work, but you have changed the
entire paradigm for
> positioning on the <div> tags by making that
change. Having relatively
> positioned elements withing a table seems to work pretty
well.
>
> or
>
> * After setting your timeline the way you want it,
MANUALLY move the code
> for the layers OUT OF THE TABLE, and place it back on
the page,
> immediately above the </body> tag. Then follow
these directions -
>
> Change this -
>
> </head>
>
> to this -
>
> <style type="text/css">
> 
> </style>
> </head>
>
> change this -
>
> <body ...>
>
> to this -
>
> <body ...>
> <div id="wrapper">
>
> and this -
>
> </body>
>
> to this -
>
> </div>
> </body>
>
> and see if that helps.
>
>
> --
> 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
> ==================
>
>
> "laythss" <[email protected]> wrote in
message
> news:[email protected]...
>> Hello all, here is my situation:
>> I am trying to do a simple Layer animation for my
home page... 4 Layers
>> startoff at the right of my webpage(table) and end
up at the left
>> handside, as
>> an example.
>> My problem is I have a main 1x1 table that is
centered, and that works
>> fine to
>> center all the text and images that are within it,
but the layers that I
>> tried
>> placing within it stay absolute to the screen and
not relative to the
>> table....
>> and if I try to specify relative position in the
first place for any of
>> the
>> layers that Layer disapears from my Layer panel and
I cannot timeline
>> with
>> it???!!!
>> This Started out as a lame trial to avoid making a
flash movie for this
>> animation.. but right now I am more interested in
knowing the
>> possibilities and
>> limitations of using Layers and Timelines in
Dreamweaver.... Any help or
>> comments are most welcome.
>>
>> Layth
>>
>
>

Changing layer position vertically

I'm having a problem when adding a new layer that needs to be positioned
below older layers on the timeline.
When I drag the layer down, it -overlays- another layer, rather remaining
separate. Or it positions itself on a layer with other video, which I don't want.
Any help appreciated.

It probably doesn't apply in this case, but a cool tip is to Option-drag a sequence into another sequence and drop it as an Overwrite edit on the higher video track. Option dragging will give you all the individual clips, rather than one big NESTed clip.
(At least I think it's Option-drag. System not on right now. If it's not Option, try the other modifier keys. PBC - Posting Before Coffee.)

Div Layer on top of Div Layer impossible problem

Hello guys,
For over 42 hours I've been puzzling myself with this problem.
Using Dreamweaver cs5.5, i have a text box with overflow:auto, because there's alot of text. On top of this layer I have another div layer with a pic that fades when the page loads. My problem is the scrollbar is beneath the layer for the pic that fades, so when you try to scroll down the page you cannot because the pic layer blocks it. In Internet Explorer it works perfectly fine, but not in any other browser.
Anyone know any way around this uberly frustrating problem?
Thanks, and take care!

Thank you for your response Murray....Below is the code. I appreciate any and all input.
<!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 rel="stylesheet" type"text/css" href="style/main.css" />
<style type="text/css">
#apDiv1 {
          width:800px;
          height:680px;
          margin:auto;
          position:relative;
#apDiv2 {
          position:absolute;
          width:200px;
          height:115px;
          z-index:1;
#apDiv3 {
          position:absolute;
          width:628px;
          height:439px;
          z-index:1;
          left: 23px;
          top: 26px;
#apDiv4 {
          position:absolute;
          width:200px;
          height:115px;
          z-index:1;
          left: -28px;
          top: -2px;
#apDiv5 {
          position:absolute;
          width:608px;
          height:400px;
          z-index:2;
          left: 89px;
          top: 153px;
</style>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
          Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
</script>
</head>
<body>
<div id="apDiv1">
<div id="apDiv2"><img src="images/lifelight street faded bg 2.jpg" width="800" height="680" border="0" usemap="#Map" />
    <map name="Map" id="Map">
      <area shape="rect" coords="242,106,303,134" href="index.html" />
    </map>
    <div id="apDiv5">
      <div id="apDiv3">
      <div style="overflow:auto; height:347px; font-family:Verdana, Geneva, sans-serif;">   <center> <b>ABOUT US</b> </center> <p>
Life Light Street Productions was started by a small group of individuals interested in creating a social network to encourage disconnected youth on street corners to earn GED’s, consider and prepare for college enrollment and to learn about career options.<p>
In 2005 founder and Executive Director Ayanna M. Cole, MSW started leading a group of young adult professionals and college students to a neighborhood in South Jamaica, Queens to begin a dialogue with youth and young adults found hanging out in the neighborhood. Over three years volunteers spent every Saturday morning and early afternoon walking through the neighborhood talking and even praying with youth and young adults found on street corners, on basketball courts and on building stoops.<p>
Volunteers provided information in response to a variety of needs such as finding summer employment, how to apply to college, resume writing and career options.<p>
Today Life Light Street Productions is also facilitating media training workshops with court involved youth and formerly incarcerated men and women.<p>
Board of Directors:<br />
Ayanna M. Cole, MSW <br />
Dr. Adelaide During<br />
Larissa K. Cole
<p>
Advisory Board:<br />
Rev. Alfonso Wyatt, President, Fund for the City of NY<br />
Alisa W. Cupid, Esq.
<p>
Contact Us <br />
Phone: 718-564-7221<br />
Email:
</div></div>
     <div id="apDiv4"><img src="images/kidpic2.jpg" style="position:absolute; width: 649px; left: 31px;" width="637" height="467" onload="MM_effectAppearFade('apDiv4', 2200, 100, 0, false)" /></div>
</div>
</div>
</div>
</body>
</html>

Layer shift problem

hi there
i have problem in designing the page
i have something like
<div id="Layer7" style="position:absolute; width:153px; height:158px; z-index:inherit; left: 1042px; top: 370px;" class="cornerBL">
          <iframe
                    src="http://localhost/www.sun.com/tools/saat.htm"
                    width="100%" height="100%"
                    frameborder="0"
                    name="a"
                    scrolling="no"
                    border=0>
          </iframe>
</div>
in my page if the browser window is maximized everything is ok
but when i restore the window thle layer above shifts to the right
it does not adjust the position to where it should be
i know that's more related with "html" but can anyone give an idea on this one .?
i appriciate your helps....

After I reset all preferences to default, there were quite a few settings that I wanted to restore, such as interface colors, but the quick mask was still not working. When I got down to performance, I noticed that the PS usage was up to 10230 MB or 70% of available RAM. This was new. I selected Big and Flat, same as before, but increased the Cache Tile Size to 1024K from 128K, same as before. I closed PS for some of the items to take effect. Then when I reopened, CC seemed not to recognize me, and I had to sign in again. Then, I opened a much smaller file and the quick mask seemed to be working. I opened a somewhat larger file of 200 MB and it was still working. I opened a 300 MB and it seems to be back to normal. I have no idea what really made the difference, but the problem seems to be solved. Most peculiar.

Help with 3D Layer Position Expression

Hi All,
I do hope some one can help me – I have been looking and trying to solve this expression problem I have run in to - I only have limited expression knowledge.
I need to move a layer in 3D space, only the Z axis: from lets say -50 to 0 (based on the start of the layer) and then stop and then move 0 to 50 (again based on the end of the layer)
I have multiple layers of different lengths that I want to add this to…then just adjust the layer to the time to be displayed on the screen.
I have used some code from Harry Frank, his AUTO FADE code (which is a god sent) and have tried to make the above movement possible, with sections of the code, its close but no cigar – the code:
//Auto Move Z
x = 0;
y = 0;
z = 50;
transition = 20; // transition time in frames
if (marker.numKeys<2){
tSecs = transition / ( 1 / thisComp.frameDuration); // convert to seconds
linear(time, inPoint, inPoint + tSecs, thisLayer.position + [x,y,z],0) - linear(time, outPoint - tSecs, outPoint, thisLayer.position + [x,y,z],0)
}else{
linear(time, inPoint, marker.key(1).time, thisLayer.position + [x,y,z],0) - linear(time, marker.key(2).time, thisLayer.position + [x,y,z],0)
It is moving but it’s moving on all axis and the OUT is moving backwards instead for forwards. Plus is has moved from the centre position.
Any help would be most appreciated, thank you in advance for any help!
Cheers Breon
Message was edited by: breonsnow - spelling

Ooops. There was an error in the last line. Hopefully you caught it. If not, here's the corrected version:
z = 50;
tf = 20;
tSec = framesToTime(tf);
if (time < (inPoint + outPoint)/2)
linear(time,inPoint,inPoint+tSec,value-[0,0,z],value)
else
linear(time,outPoint-tSec,outPoint,value,value+[0,0,z])
Dan

Layer Position

Maybe I am an idiot... (Don’t answer that)
I have been designing web pages for a while now, but never
really got into layers (i'm a table/css man myself). But, I now
have found a possible use...
I have a webpage that is a whole mess of tables, and I do not
want to disturb that. BUT, I want to overlay some flash on top. So,
I thought, let me tryout layers...
well, I'm not having much luck. Every time I publish the
page, the table shifts. (Different in IE and Fire fox).
I have them positioned absolute in my CSS, no dice... I tried
putting the exact pixels in the div tag, still no luck. It looks
perfect in the development environment.
So, do tables just plane suck? Or just need a little
massaging?
OR
Does someone have a better way to overlay a flash object on
top of my existing tables?
Thanks in advance.

> but its shifting when published (different in IE and
FireFox). It
> also shifts when the browser window is adjusted.
The layer is not shifting since it is absolutely positioned.
The table
underneath it is, probably. Is it a centered or a percent
width table?
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
==================
"flying_scott" <[email protected]> wrote in
message
news:[email protected]...
> Yes, the layer is technically working... and I don't
beleive I have it in
> a
> table cell, but its shifting when published (different
in IE and FireFox).
> It
> also shifts when the browser window is adjusted. here is
a snippet of my
> code:
>
> <b><style type="text/css">
> 
> </style>
> </head>
>
> <body bgcolor="#444444" leftmargin="0" topmargin="10"
marginwidth="0"
> marginheight="10">
> <div id="flash">
> <object classid="clsid:
D27CDB6E-AE6D-11cf-96B8-444553540000"
> codebase="<a
> target=_blank class=ftalternatingbarlinklarge
> href="
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#versio
> n=7,0,19,0"">
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab
> #version=7,0,19,0"</a> width="770"
height="600">
> <param name="movie" value="gil.swf">
> <param name="quality" value="high">
> <param name="wmode" value="transparent">
> <embed src="gil.swf" quality="high"
wmode="transparent"
> pluginspage="<a
> target=_blank class=ftalternatingbarlinklarge
> href="
http://www.macromedia.com/go/getflashplayer"">http://www.macromedia.com/go
> /getflashplayer"</a>
type="application/x-shockwave-flash" width="770"
> height="600"></embed>
> </object>
> </div></b>
>
> Is this just a browser render problem, or am i missing
some stuff.
>
> Scott
>

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
>
>

Spry Menu Bar Positioning Problem in IE

I have a Dreamweaver-created Spry Menu Bar drop down menu which works perfectly in every browser on my Mac and on my PC . . . EXCEPT Internet Explorer (who woulda thunk it?!!)
In all browsers except for IE, the 3 submenu items under "Door Systems" and "Gallery" appear exactly as they should in a vertical row, positioned just below the brown line below the navigation links and all the same width. But in IE they appear higher up and with different widths. IE is ignoring the rules for width and position.
<ul id="MenuBar2" class="MenuBarHorizontal">
    <li><a class="MenuBarItemSubmenu" href="closet_doors_gallery.html">DOOR SYSTEMS</a>
      <ul>
        <li><a href="sliding_doors_nyc_nj.html">DOOR PROFILES</a></li>
        <li><a href="bifold_doors_nyc_nj.html">PANELS COLORS</a></li>
        <li><a href="room_dividers_nyc_nj.html">DOOR SYSTEM TYPES</a></li>
      </ul>
    </li>
</ul>
<ul id="MenuBar3" class="MenuBarHorizontal">
    <li><a class="MenuBarItemSubmenu" href="#">GALLERY </a>
      <ul>
        <li><a href="#">SLIDING DOORS</a></li>
        <li><a href="#">BI-FOLD DOORS</a></li>
        <li><a href="#">ROOM DIVIDERS</a></li>
      </ul>
    </li>
</ul>
Here is the page where you can see the problem if you view it with IE, and see that it's fine in Safari, and Firefox,    Chrome and Opera, Mac or PC:
http://2113web.com/indeco/index.html
I have a feeling it's a simple fix of the css, but I can't figure it out - I would really appreciate anyone's help with it - thank you!
Below is the CSS:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    font-weight:bold;
    cursor: default;
    width: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
    z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: auto;
    float: left;
    white-space: nowrap;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: auto;
    position: absolute;
    left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
    top: 63px; /*THIS POSITIONS THE SUBMENU BELOW THE TOP MENU*/
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    float: none;
    background-color:#f5f5e8;
    height:25px; /*THIS POSITIONS THE SUBMENUS HEIGHT*/
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: absolute;
    margin-top: -5%;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
    border:none;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: transparent;
    padding: 0.5em 0.75em;
    color: #59330d;
    text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    background-color: transparent;
    color: #afa06f;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color: transparent;
    color: #afa06f;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%)
ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%)
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%)
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%)
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
        display: inline;
        f\loat: left;
        background: #FFF;
Perry

Hi and thank you very much. It was a little confusing as to whether you meant to add the rules you suggested or to replace them, or a combination of both, but I puzzled it out. I created a new MenuBarHorizontal.css file in a blank page and then made the changes you suggested and it works! Yay! I had to do a bit of tweaking to get it to look just the way I wanted, but it now works correctly in ie 7 and 8 and still works fine in everything else.
Interestingly enough, I had to change the margin-top: 63px; rule in "ul.MenuBarHorizontal ul.MenuBarSubmenuVisible" to 40px to get it positioned properly vertically, and I had to get rid of the "border-bottom: solid 1px #EEE;" in "ul.MenuBarHorizontal ul li", which caused the submenu items to have quite a lot of vertical space between them - I'm not sure why!
I also had to get rid of all the syling rules in the "SUBMENU INDICATION: styles if there is a submenu under a given menu item" section, as well as the one you added: "ul.MenuBarHorizontal a.MenuBarItemSubmenu {
    padding: 0.5em 2em 0.5em 0.75em;"
With that done, it works great in both ie7 and ie8, so thank you for the help. Below is the new css that works, in total.
Not being as familiar with the subtleties of CSS as you and many others obviously are, I'm REALLY curious as to exactly what is different that causes this to work now, and would be happy to hear your expanation, if you feel like taking the time to explain. If not, no problem - it works and that is the most important thing! So, thank you again -
Perry
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
    z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: auto;
    float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: auto;
    position: absolute;
    left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
    margin-top: 40px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    display: block;
    float: none !important;
    width: auto;
    white-space: nowrap;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
    border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #f5f5e8;
    padding: 0.5em 0.75em;
    color: #333;
    text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
      background-color: #f5f5e8;
    color: #afa06f;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
      background-color: #f5f5e8;
    color: #afa06f;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
    background: transparent;
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
        display: inline;
        f\loat: left;
        background: #FFF;

Layer positioning problem

Similar Messages

Maybe you are looking for