Fluid grid designs

I am attempting to build a fluid grid site, however, after the initial page creation the option on the "insert" tab for "fluid div" (shown in all fluid grid videos & tutorials) doesn't show up. Instead only "div" or "draw absolute position div" are there. If I click on the "div" I get an insert div dialog box showing "class". Whatever I attempt, I do not get the familiar green fluid div boxes to work with. Now the boxes are blue outlined and don"t allow me to layout the page. I have created fluid grid pages before in Dreamweaver in the past year but didn't have this problem. Where am I going wrong???

Go to View > Visual Aids or simply click the Eye icon on your toolbar.
Check Fluid Grid Layout Guides.
Also refer to this article -- Creative Cloud CS6 12.2 Enhancements to Fluid Grid Layouts
http://blogs.adobe.com/dreamweaver/2013/02/updated-fluid-grids-in-dreamweaver.html
Nancy O.

Similar Messages

Templates in Fluid Grid Designs

I have been searching until my eyes are bleeding trying to find out if you can use templates with fluid grid layouts. No one seems to be able to answer this as far as I can see. And Adobe is their usual useless self on this matter with no information that is easy to find on the subject. I have sites up that require similar looks to many pages, thus the need for templates. Without this ability, Fluid Grid Designs in Dreamweaver are a joke unless you only one or two pages in your site.
Again, CAN DREAMWEAVER FLUID GRID DESIGN SUPPORT THE USE OF TEMPLATES???????

DW Templates are nothing like SSIs.
SSI's are server-side code statements (either in PHP or ASP files) that pull content from one file into the parent page. That's why they are ideal for re-usable bits of code like site wide headers, footers and menus. Everything on the parent page is fully editable in DW.
Include files are nothing more than snippets of html code. An include statement is inserted into the parent page where you want the content to appear. For this demo, I have three pre-built SSI files in my Includes folder:
    Header.html
    Menu.html
    Footer.html
My parent page has been saved as index.shtml (.shtml or .shtm tells the server there are include statements in the page). Depending on your type of web server, you may also use .php or .asp however those include statements look different than the ones in this demo.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header">

</header>
<nav>

</nav>
<div id="mainContent">
<h1>Main Content H1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing odio.</p>
 </div>
<div id="footer">

 </div>
</body>
</html>
My include file for Menu.html looks like this -- no body tags, no doc type, just the relevant menu code:
<a class="intro" href="index.shtml">home</a>
<a class="gallery" href="gallery.shtml">gallery</a>
<a class="tools" href="tools.shtml">tools</a>
<a class="portfolio" href="portfolio.shtml">portfolio</a>
<a class="fees" href="Fees.shtml">fees</a>
<a class="contact" href="contact.shtml">contact</a>

One last thing, you won't see includes appear on the page until you publish to a server. If you want to test pages locally, you will need to install a local testing server such as WAMP, MAMP or XAMPP on your local computer.
Nancy O.

Problems trying to develop a template using Fluid Grid Design

Having serious problems trying to get a template to work using Fluid Grid Design with Dreamweaver CS6
I have develop my template with editable regions etc, however when I load it to make an html5 page and preview it on any browser it comes completely blank
If I do this on an HTML5 document without Fluid Grid it comes out fine.
I heard this issue is happening to other people as well
Need to resolve this issue as soon as possible
Your help will be highly appreciated
Mike Riego

Before you create a template, you need to a) properly define a local site folder in DW. And b) test your prototype (Fluid Grid page) to ensure the code is valid and it works in all target browsers/devices.
When you're completely happy with your prototype page, SaveAs a DW Template and close it.
DW will create a Templates folder in your local site folder for you.
1. File > New > Page from Template > select your newly created template from the 3rd panel. Hit Create.
2. This is a child page spawned from a Template.dwt.
SaveAs index.html.
Preview in browsers. It should work just fine.
Repeat Steps 1-2 for remaining site pages.
Nancy O.

Overlapping images in fluid grid design

I'm designing my first website using the fluid grid design in DW CS6. My in-progress site is located at http://afbcc.com/sandbox/carolhudsondesigns.com/. When viewed on a desktop I want the circular company logo in the top left corner to lie on top of the sideshow of flowers. Previous I would have put the logo in an AP Div with a high z-index. How do I do this in fluid grid design? Thank you.

When viewed on a desktop I want the circular company logo in the top left corner to lie on top of the sideshow of flowers. Previous I would have put the logo in an AP Div with a high z-index.
Nothing's changed. Simply enclose it inside a CSS Media Query targetting desktops. Adjust rules to suit.
/* Special Rules for Desktops */
@media only screen and (min-width: 1024px) {
     #logo {
     position:absolute;
     top:75px;
     left:65px;
     z-index:1000;
Nancy O.

CS6 Image enlargement in fluid grid design

Trying to find a method of allowing image enlargement in cs6 fluid design. Currently reworking a site into a fluid layout which uses css to enlarge an image on hover. This neat method works in virtually all browsers and on Iphones. Not sure how to impliment this in a fluid grid layout as the style sheets seem to conflict and prevent the effect.
Any ideas?
Here's a working example from the original site: 18th Century Map of Kent by Thomas Kitchin
Many thanks.

It cannot be used in fluid design. In fact, it was quite poor at handling images in fixed pages especially in touch screens as these do not have a hover event.
Reason why the product has been discontinued as can be seen here https://www.magictoolbox.com/magicmagnify/
You are better off using lightbox or similar like Fancybox - Fancy jQuery lightbox alternative

Fluid grid design no longer resizes right for tablets.

Everything seemd to be working great, but I tweaked something and it no longer displays two columns when you turn your smart phone sideways.
Any help?? Please
pestfree.net/bindex.html

Also you should correct any critical coding errors
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.pestfree.net%2Fbindex.html&charset=%28d etect+automatically%29&doctype=Inline&group=0

Fluid Grid Design Examples Anyone?

I'v been searching for examples to see what everyone else is up to. Here is mine. http://www.chclcu.com/djzo
Feedback welcome.

This examples are so good
http://www.openline.com.co/
http://www.magconsultorias.com/
http://och8-71.com/
greetings,
Jorge Forero
dweb3d.com

Dreamweaver CC fluid grid controls disappearing and other info

Hi All,
I have finally completed my first commercial fluid grid design in Dreamweaver CC and it was a bit of a mission.
One disconcerting thing about the program is that the fluid grid controls keep disappearing. You know, the ones where you can hide the div, duplicate it, move it up or down, or delete it.
I have found that when this happens, I need to close the html file I am working on in DW CC and then open it again. The controls then appear again, so you can rearrange your various layouts as demonstrated in those breezy demo videos about DW CC fluid grid layouts.
So don't just conclude you have broken the code when these controls disappear, try closing and opening the file again first.
Also you need to insert all the divs you need for all layouts in the mobile phone layout, as that is the main layout, governing all the others because of the way the media queries are set up in the CSS file that is created when you start your fluid grid layout.
I could not work out how to reorder divs in the different layouts, this may not be possible at the moment. Instead I created divs in the phone layout to cover all of the divs needed in the three layout sizes and switched them off and on in the various layouts. This works really well, but I found that DW behaved strangely if I switched a div off in the mobile layout and then tried to style it in one of the other layouts. So I suggest styling all of the divs first for all the layouts before switching any of them off in the mobile layout.
Also you can't copy the contents of one div and put them in another without freaking the program out, especially if you are working in a div that is hidden in the mobile layout.
I suggest saving regularly as you add new divs and style them and view live in a browser immediately, as the preview in DW CC is not reliable. It can't show rounded div corners or shadows for example.
Keep an eye on the code as it is built by your use of the CSS Properties panel. If it starts going wrong, close the html file without saving it or the attached CSS file. Then go back in and try what you want to do again.
If you save weird code errors, your work could be so compromised that you need to start all over again. So quit out without saving if you notice this.
After much experimentation I now insert images into a div, rather than make them a background image, as the background image will not completely show if the content of the div is not long enough. This may require a rethink of your design.
Doing any absolute sizes in a div will make the responsive design very hard to style and possibly break the code, so I don't suggest it.
Adding padding to a div can make it stick out of right edge of the design, I am not sure why this is the case and could not work out how to stop it. So use low pixel numbers in the padding of a div.
Also control z seems to be a sudden death move, so I stopped doing that.
So my first job has been a bit of a ride, but I seem to be nearly there on my first design.
I think DW CC is still a work in progress and I look forward to further updates of the software.

Hi Top Ten,
You can't get them back once they go. You now need to edit the css code manually to do the same thing.
For instance if you want divs to sit beside each other you put this in the css for that div:
clear: none;
This css means that div will allow other divs to sit beside it.
Then put in a width in percentages. For example if you have three divs that need to sit beside each other put:
width: 33%;
in each of them. Or maybe:
width: 31%;
margin-right: 2%;
Fortunately in DWCC it is now robust enough for you to do those code changes by hand. My original question in this thread was posed when DW CC fluid grid had just come out and crashed easily. A year later all is well, so you can do those changes in the css code without problems now.
Regards,
Mary

Making photo galleries fit screen sizes in fluid grid layout

Is it possible to have photo gallery images fit within the width of a device (such as smart phone) when a fluid grid design is being used?

Try to keep responses in the original thread, it keeps replies from getting confused.
http://forums.adobe.com/thread/1430668?tstart=0

Making images and text scalable in fluid grid

So I'm creating my first Fluid Grid design and I'm having issues with making images scalable and look appropriate. Take a look at this example and the four social media icons on the top right. They're in one div id called sociaLinks. I have in my style_fg.css that the img attribute is set to 3em but that doesn't make the image scale as you resize the browser. I tried doing something like 25% (actually, a little less and I used that figure since there's four images in the div) and that worked in Firefox but in Chrome and Safari, it just appeared as what might as well have been a dot. So how can I make it where the multiple images can scale with the browser?
Likewise, I have a similar issue with making text do the same thing. In this case, my #access div which I'd like the font to resize with the browser. Any ideas on making that work?

You can make images scaleable using CSS3 like this:
div
background-image:url('mypicture.png');
background-repeat:no-repeat;
background-size:cover;
You can also use vendor specific code to make this code compliant in browsers that don't have css3 yet:
/* Safari,Chrome */
-webkit-background-size: cover;
/* Seamonkey */
-moz-background-size: cover;
/* Opera */
-o-background-size: cover;
Hope this helps.

Sliding background banner in fluid grid layout

Hello all...
Hope someone can help me. Kind of new to programming and dream weavers fluid grids. But I've started working on a website and encounted a problem.
How do you implement a sliding background banner in the fluid grid design?
PS: My design looks like this and I plan to use a javascript slider for the banner (don't mind the danish language) :

the logo, menu, headlines and slider navigation is placed on top of the slider.
This is going to fail for several reasons.
#1 FGLayouts resize as do the foreground images inside them. However, menus & headlines don't resize. They stay the same size regardless of viewport unless you invoke your own special CSS media queries to change them.
#2 Background images don't re-size to layout.
#3 To have a slider appear behind your logo, menu and headines, you'll need to layer elements with absolute positioning. And as we all know from multiple discussions on this forum, absolute positioning doesn't work well in Responsive layouts because eventually everything becomes a jumbled mess.
The best advice, keep your slider separate from your site menu and headlines. You'll have fewer problems that way.
Nancy O.

Creating fluid grid templates

I have a very large website for a real estate company that I sold as a RWD. They have 175 or so pages of listings.
I have a good handle on DW's fluid grid design tools. When a try to create a DIV inside an editable region the DIV loses it's fluent grid functionality like copy, hide, sizing etc.
Has anyone worked with templates and DW's fluid grid. Is there a way around this problem. Any help or suggestions would be appreciated.
Thanks

I set up a really simple site to demonstrate the issue.
This is an Editable Region with a fluid grid DIV inside the region. The highlighted DIV is a regular DIV.
This next screen shot is a fluid grid DIV outside of the Editable Region. It is performing as it should.
It would make our lives much simpler if we could use the Fluid Grid DIVs in a template for the 175 redundant pages of this site.

Fluid Grid and IE7/8?

I'm using Dreamweaver CC with a one page fluid grid design (www.stratum-group.ca/index_fix.html). It checks out everywhere except with a client who is getting some weird behaviour. In trying to replicate the effect, it seems like the problem is either an IE 7 browser (using IE developer toolbar in IE8 with document mode set to "IE7 standards" seems to replicate the situation), but she says she's running 8.
Every other platform I'm testing in, right down to mobile and various flavours of Firefox, Chrome and Safari, seems to come through okay.
Does anyone have any other suggestions?
TIA

Reach Puneet may have a good solution for you here. I'm not sure what he is talking about concerning the HTML5 shiv bug but you to have to put http: in front of anything that is a link to an external source (outside of your website).
But with respect to that, you have created ids for each of the people in that page. It's messy, but should work. None of those ids use HTML5 elements, so the use of the shiv in those cases won't matter.
The other thing I see here is in lines 2-5 you have:



<html class="">
I'm not sure what the heck these conditional statements are and what they do. These classes do not exist in any of your called style sheets. They also preceed ALL calls to your style sheets, so they cannot possibly correct anything in your style sheets that involve Microsoft browsers. Last but not least, please understand that Internet Exploder 10 does not understand these escapes, so Microsoft has shut down these kinds of conditional structures for their latest browser.
In any case, these lines seem do do nothing, save set an HTML class that does not exist in your style sheets. Now, there may be people here who can enlighten me as to what these classes mean, but I did not know that any version lower than Internet Exploiter 9 can correctly render any CSS3 or HTML5.
What it looks like you are doing is placing each of the team bios horizontally. I think that, for versions of Internet Exploder 9 and below, I would make a separate style sheet using the Old School method of lining everyone up, which is to create three vertical columns with the teams inside those, placing this conditional IE-specific line after you call your other style sheets:

Then create a simple 3-column layout inside a container in that style sheet using the same elements as you have in your main style sheet.
Frankly, with all of those id elements for each person in your style sheet, you have created a bit of a mess. I would have made styles that are more generic and would have used classes, not ids. But in the ie.css you could clear all previous styles set (using the cascade) by defining them thusly:
#team-DavidP {
(and so on)
If you have a class or id that has no css associated with it, it simply becomes a div with no style and will be displayed in the style of its containing element.

Is there any way to display the Design View in fluid grid pages?

After upgrading to the newest version of DW CC 2014, I noticed that the Design View is disabled in Fluid Grid pages. You can only use the Live View to edit those pages. The Design/Live button displays on non-fluid pages.
I'm wondering if there is a work-around to allow Design View editing on fluid pages. It is a major hassle to try to edit some things in the Live View. It would nice to have a choice.

Have you actually tried using is? Try this?
1) Create a new Responsive Layout. We’ll call it demo.php, fluid.css and the usual accompanying DW files.
2) Enter demo.php and progress is normal. Everything works. You can choose to view both Live and Display and edit accordingly.
3) Close down DW.
4) Open DW and open demo.php
5) There is NO LONGER a Display View option and Live View does not EDIT. (at least it doesn't for me)
6) I can ONLY edit work in CODE view.
Thus, on brand new files, all is fine. The moment DW is closed and the files becomes “old” it can no longer be seen or edited properly.
How am I supposed to provide support to clients? How can I access a Responsive site I built last week when Live View will not edit and Display will not display?
I feel this is a programming error, not a purposeful act.

Design option missing for Fluid Grid layouts (was:In dreamweaver CC, I created a new fluid grid page, but the options to edit the page...)

Hi, in dreamweaver CC, I created a new fluid grid page, but the options to edit the page are limited to code / split / live. The design optin is missing and I need it to move around the fluid grid to position my elements that I have created.
Thanks

Hi Raymi,
Like Ben suggested, you can vote for the feature using the link provided. From what I understand, the product team is collecting feedback on the limitations of Live View for FG layouts and improving experience on that front. It would help if you could provide a list of limitations with the current workflow.
Thanks,
Preran

Fluid grid designs

Similar Messages

Maybe you are looking for