CSS box - hidden\show & overlapping

Question

Hi!
We have 2 zones.
In one zone we have a box which contains a CSS navigation
list/buttons.
In the second zone we would like, when the mouse is over one
of the list item/button, to be able to show a specific box (with
identical sizes and position's definitions).
The required mechanism, from the user point of view, is
expected to be like the "show layers (visible/hidden property) on
mouse over behavior".
How we can stack more than one box, one on the top of each
other, in a way that we see all the time only one of the boxes
(overlapping), and that without disturbing the general layout of
the page.
I have tried to use the "visibility properties
(visible/hidden)" on two boxes with identical "box properties"
definitions and different visibility properties (visible/hidden).
The boxes were not stacked each on the top of the other, and the
second box have taken its natural "float place”.
For example we have a container box with 3 boxes with the
following "box properties":
#ButtonFirstDetails {
height: 233px;
width: 516px;
margin-top: 2px;
margin-right: auto;
margin-bottom: 2px;
margin-left: 0px;float: left;
#FreeZone01 {
height: 153px;
width: 256px;
margin-top: 2px;
margin-right: auto;
margin-left: 0px;
float: left;
#FreeZone02 {
height: 153px;
width: 256px;
margin-top: 2px;
margin-right: auto;
margin-left: 4px;
float: left;
TIA
Nanu

Answer 1

Thanks
Nanu
>>> Murray
*ACE*<[email protected]> 23/02/2007 19:41:33
>>>
Then stick with the behaviors.
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
==================
"Nanu Kalmanovitz" <[email protected]> wrote in
message
news:[email protected]...
> I'm a beginner, not understanding yet, completely, how
buttons change
> their fonts & colors when the mouse move over them.
>
> TIA
>
> Nanu
>
>>>> Murray
*ACE*<[email protected]> 22/02/2007 22:30:54
>>>
> It is possible to use CSS for this, but it's tricky.
What is your comfort
> level with CSS?
>
> --
> 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
> ==================
>
>
> "Nanu Kalmanovitz" <[email protected]> wrote
in message
> news:[email protected]...
>> Thanks,
>>
>> Is the DW "bahaviours" function , the only way to
switch between the
>> hidden\show boxes?
>> Is it possible to do the switch using definitions in
CSS same way as the
>> Hover made on bottons?
>>
>> TIA
>>
>> Nanu
>>
>>>>> Murray
*ACE*<[email protected]> 22/02/2007 17:45:39
>>>
>> Use absolute positioning on the stacked elements.
>>
>> --
>> 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
>> ==================
>>
>>
>> "Nanu Kalmanovitz" <[email protected]>
wrote in message
>> news:[email protected]...
>>> Hi!
>>>
>>> We have 2 zones.
>>> In one zone we have a box which contains a CSS
navigation list/buttons.
>>> In the second zone we would like, when the mouse
is over one of the list
>>> item/button, to be able to show a specific box
(with identical sizes and
>>> position's definitions).
>>> The required mechanism, from the user point of
view, is expected to be
>>> like the "show layers (visible/hidden property)
on mouse over behavior".
>>>
>>>
>>> How we can stack more than one box, one on the
top of each other, in a
>>> way
>>> that we see all the time only one of the boxes
(overlapping), and that
>>> without disturbing the general layout of the
page.
>>> I have tried to use the "visibility properties
(visible/hidden)" on two
>>> boxes with identical "box properties"
definitions and different
>>> visibility
>>> properties (visible/hidden). The boxes were not
stacked each on the top
>>> of
>>> the other, and the second box have taken its
natural "float place”.
>>> For example we have a container box with 3 boxes
with the following "box
>>> properties":
>>>
>>> #ButtonFirstDetails {
>>> height: 233px;
>>> width: 516px;
>>> margin-top: 2px;
>>> margin-right: auto;
>>> margin-bottom: 2px;
>>> margin-left: 0px;float: left;
>>> }
>>> #FreeZone01 {
>>> height: 153px;
>>> width: 256px;
>>> margin-top: 2px;
>>> margin-right: auto;
>>> margin-left: 0px;
>>> float: left;
>>> }
>>> #FreeZone02 {
>>> height: 153px;
>>> width: 256px;
>>> margin-top: 2px;
>>> margin-right: auto;
>>> margin-left: 4px;
>>> float: left;
>>> }
>>>
>>> TIA
>>>
>>> Nanu
>>
>>
>>
>>
>>
>
>
>
>
>