Flexi CSS Layouts for Dreamweaver Forum


box Flexi CSS Layouts for Dreamweaver
Flexi CSS Layouts is a Dreamweaver Extension that helps you create browser compliant table-less web pages with ease. Unlike other products that are limited to templated CSS layouts with 1, 2 or 3 columns, with Flexi CSS Layouts for Dreamweaver you can build your own custom layout structure without coding.

Find out more about Flexi CSS Layouts for Dreamweaver

Thread: Flexi CSS and POP MENU MAGIC 2

title left
User Details
message
title right
Mike English

post date:
2010-09-12 16:59:01
HirnI have downloaded a test version of the software and I have created a page using Flexi CSS. Input all text and graphics - set margins etc and included a navigation system using POP MENU. Everything works fine when testing off-line. When I upload the page to the server the drop down menus stop working. I can get the menus working by deleting the "Includes" folder from the server but then the page does nor render correctly in Firefox . I have tried changing the order in which the CSS style sheets load but this seems to make no difference. Any ideas on what I am doing incorrectly?
Andrei Rinciog [Extend Studio]

post date:
2010-09-13 04:07:46
Hello,

Our extension outputs some CSS and HTML. I don't understand what connection can the menu system have with our CSS files from the includes folder.

Please give me a link to the page so I can take a look at it.

Regards,
Andrei Rinciog
Mike English

post date:
2010-09-13 04:31:26
Hi Andrei

The site is a test site for a client and so at this stage of production is confidential. However if you can give me a non-public address I can send you the links.

best regards
Mike English
Andrei Rinciog [Extend Studio]

post date:
2010-09-13 04:38:59
Hello Mike,

Please send them by email to support at extendstudio.com

Regards,
Andrei
Al Sparber

post date:
2010-09-13 13:47:55
this is the rule, in
your other style sheet, which is causing the problem:

/**
* Prevents the non-intuitive collapsing margins default behaviour of the W3 Box Model.
* This rule is recognized by all modern browser (Firefox, Opera, IE8, Safari, Chrome and other) and IE7, but not by IE6 or the
Dreamweaver design view.
* IE6 does not collapse margins and for DW the problem was solved in another way.
*/
.cssLO > .cssLI:first-child{
overflow: hidden;
}

Remove the rule.

--
Al Sparber - PVII
http://www.projectseven.com
Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/hgm
The Ultimate Web 2.0 Carousel



Mike English

post date:
2010-09-13 16:25:45
Hi

Thanks Problem solved. Off to buy the software now!

Mike English
Andrei Rinciog [Extend Studio]

post date:
2010-09-14 04:23:44
Hello,

Thank you for the help, Al, but that rule has an important role for the layout and it shouldn't be removed. It keeps the layout stable by preventing margin collapse between the exterior and interior divs.

That being said, I wouldn't recommend using that workaround as it will add other problems.

Try to place the menu code inside an additional div tag. It should be something like this:

<!-- div Content Starts Here -->
<div>

Menu code

</div>
<!-- div Content Ends Here -->

If this still doesn't work, please send me a link to the page by email so I can take a closer look.

Regards,
Andrei Rinciog
Mike English

post date:
2010-09-14 05:02:48
Hi Andrei

I sent the link yesterday. Did you get it? At present the rule has been removed from the Flexi CSS style sheet. But you will see from the code of the index page that the menu code is within div tags already.

Mike English
Andrei Rinciog [Extend Studio]

post date:
2010-09-14 05:16:49
Hello Mike,

No, haven't received any email. Could you please send again.

Send it to: support at extendstudio(dot)com
Or to: support.extend at gmail(dot)com

Regards,
Andrei Rinciog
Mike English

post date:
2010-09-14 05:26:05
Hi Andrei

Sent again to both email addresses.

Mike English
Andrei Rinciog [Extend Studio]

post date:
2010-09-14 06:58:20
Hello Mike,

I still haven't received any email from you. Try to send them from a different mail server.

I've sent you an email on the address that from your account.

Regards,
Andrei Rinciog
Andrei Rinciog [Extend Studio]

post date:
2010-09-14 07:44:54
Hello,

I have received your email on gmail. The drop downs function, is this the version where you removed the CSS rule from the layout?

Regards,
Andrei Rinciog
Mike English

post date:
2010-09-14 07:50:43
Hi Andrei

Yes the CSS rule has been removed.
Fo you want me to re-instate it - so you can replicate the effect?

Mike English
Andrei Rinciog [Extend Studio]

post date:
2010-09-14 08:06:51
Hello Mike,

Yes, please. Also, make the modification that I told you above with the additional div.

<!-- row_2 Content Starts Here -->
<div style="overflow:visible">

Menu code

</div>
<!-- row_2 Content Ends Here -->

I've modified it a little bit. Tell me after you make the modifications and I will check the page again.

Regards,
Andrei Rinciog

Mike English

post date:
2010-09-14 08:59:50
Hi Andrei

I have uploaded a new version of the index page and changed the Flexi CSS file back to the original - of course the drop down menus are not working now. I am obviously doing something really dumb - but I can't work out what.

Mike
Andrei Rinciog [Extend Studio]

post date:
2010-09-14 09:11:11
Hello Mike,

Leave the CSS rule where it is and we will disable it only for that div that holds the menu by using inline CSS.

Modify this line:

<div class='row_2 cssLI PageLayout4_row_2_design'>

and add overflow:visible rule:

<div class='row_2 cssLI PageLayout4_row_2_design' style="overflow:visible">

This should make the menu work and still keep the margins from collapsing on the rest of the layout.

Regards,
Andrei Rinciog
Mike English

post date:
2010-09-14 10:26:05
Hi Andrei

Thank you. That works.

I have another problem - I want to set up a background image to run in a row with sub rows. The images appears fine when I test it in Dreamweaver with FireFox and Safari but when I upload the page the image disappears. Do you want me to open a new thread for this?

Mike
Andrei Rinciog [Extend Studio]

post date:
2010-09-14 10:52:22
Hello again,

Please check that you have uploaded the image on the server as well. If you did and it still doesn't show up online tell me the page that you are trying with. Send any link by email.

Regards,
Andrei Rinciog
Mike English

post date:
2010-09-14 11:22:30
Hi Andrei

Page amended and files uploaded (they were already). I have made one change - in the background image specification panel I have changed Attachment to "scroll" and it now works. Can you explain why this should be?

Many thanks
Mike English
Andrei Rinciog [Extend Studio]

post date:
2010-09-14 11:44:02
Hi,

The background-attachment rule sets if the background image should stay fixed or scroll along with the page when scrolling occurs.

If you use the 'fixed' option the image will have a fixed position no matter where you placed it in the layout. However, it will be visible only when the div that has it as a background image will be over it. This probably didn't happen when you tested and that's why you couldn't see the image.

Regards,
Andrei Rinciog