Dreamweaver CS5.5 Fluid Grid Layout Help!!!

Needing help with What a fluid grid layout is, I hear that itll help my webpage be responsive and it will adjust for screen sizes depending on if your on a computer, phone or tablet. Can anyone link me to an Adobe TV tutorial for CS5.5? All I found was CC stuff and upgraded versions.

Sorry but FluidGrids are not part of CS5 or CS5.5. They didn't come on the scene until CS6 (12) & CC (13).
If you're still interested in building responsive web sites without upgrading software, read this first:
Introduction to CSS Media Queries
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
To jump start your responsive web project, you can use one of the freely available Responsive Frameworks below: Some people feel these are actually better than FluidGrid Layouts.
Foundation Zurb
http://foundation.zurb.com/templates.php
Skeleton Boilerplate
http://www.getskeleton.com/
Initializr (HTML5 Boilerplate, Responsive or Bootstrap)
http://www.initializr.com/
DMX Zone's Bootstrap * free extension for DW *
http://www.dmxzone.com/go/21759/dmxzone-bootstrap/
Nancy O.

Similar Messages

Dreamweaver cs6 and Fluid Grid Layouts!

New to Dreamweaver cs6 and Fluid Grid Layouts!
Could you please tell me if you can create several layout grid designs (in the same website) depending on the page layout you need for each
page?
The reason I am asking is my web site has different information on each page (which is laid out differently)
Maybe create layout.css and layout2.css and so on. AND TIE EACH PAGE IN WITH A PHP INCLUDE NAVIGATION PLACED ON EACH PAGE.
Is this possible.
Thanks, Mrs. White

Different layouts for different pages? It's certainly possible, but I don't recommend it. Ideally you want to work with ONE FluidGrid Layout throughout your site with some additional CSS rules for optional regions (classes & styles) that may not be required on all pages. Some examples of optional regions would be contact forms, tables, definition lists, re-usable floats, etc...
If your Responsive Design is well planned, you shouldn't need more than one main structure for mobile, one for tablet and one for desktops. If you go down the path of having different structures for 3 devices AND each site page, you will soon be wrestling with a 10,000 lb. gorilla: Herculean to build and not much fun to maintain.
Server-side includes for site wide headers, footers & navigation are a very good idea whether your site is Responsive or not. I use them all the time.
Nancy O.

Dreamweaver 12.0 - Fluid Grid Layout problem - I have 12 columns - but some DIV's are too wide

http://skicmsc.org/NewResponsive.htm
Working on a new look for a current site. I have 16 columns. Left div is 3 columns, next is 7 columns, then 3 and 3. Total: 16
The 7 column Div is pushing the right Div's off the layout by several "columns". If I delete the thing, everything is fine. Make it just 2 columns wide and the layout is messed up. I've tried naming it different things, starting from scratch - twice. Still have the same problem. Deleted, recreated, moved up and down. Nested and not nested. Next step is to say forget it. Wasted four hours on this already.
Screen grab of the layout - all looks nice and clean.
Here's what it looks like (In Chrome, IE and Firefox.)
What's really annoying - undo/Ctrl-Z does not undo "visual" changes. I can edit text, resize a Div by dragging the right handle, do an Undo - and my text edit is changed - not the resize.
Any suggestions?
Thanks
Rick Drew

For best results, your LayoutDivs need to be wrapped inside the .gridContainer as it serves as the basic structure for your entire layout (mobile, tablet and desktop).
<div class="gridContainer clearfix">
     <div id="LayoutDiv1">
     </div>
     <div id="LayoutDiv2">
     </div>
     <div id="LayoutDiv3">
     </div>
     <div id="LayoutDiv4">
     </div>
</div>
Design View Screenshot
When you put Divs outside the .gridContainer, this can create rounding problems in many browsers because the inner div widths are all set in fractional percentages rather than whole numbers. Browsers don't fully understand how to render widths in fractions.
In the following example, I have the same set-up as shown in my screenshot above except my footer div is intentionally located outside the gridContainer. This allows my footer to be 100% page width.
http://alt-web.com/FluidGrid/Fluid1.html
If you understand and work within the limitations of FluidGridLayouts, they can save you a lot of time.
Nancy O.

How to increase the width of the Fluid Grid Layout from 1008px to 1080px?

Good day all, I'm experiencing a slight problem with Fluid Grid Layout in Dreamweaver CS6. I want to increase it's width so that it could be one with my Photoshop CS6 design (which is 1080px), the problem is that I can't as I am limited to 1008px. How do I increase the width? I ultimately am re-coding my design as my client demanded a responsive design but I'm clueless in that avenue which is why I resorted to re-doing everything under the set & safe default (Fluid Grid Layout) that doesn't require me to udnderstand media queries at an expert level.

While Fluid Grid Layout can save you some production time, you still need a good understanding of CSS Media Queries to use it.
Introduction to CSS Media Queries
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-que ries.html
CS6 Fluid Grid Layouts (6 min video)
http://tv.adobe.com/watch/digital-design-cs6/creating-adaptive-designs -using-fluid-grid-layouts-in-dreamweaver-cs6/
CS6 Fluid Grid layouts (17 min video)
http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layou ts/
Step-by-Step tutorial -- Building Fluid Grid Layouts in DW CS6
http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs 6.html
Instead of fixed-widths in pixels, FLG code is all % based. It starts with the mobile layout and cascades to tablet, then desktop. If you want to use fixed-widths in pixels, you must manually change the CSS code for all three devices.
Nancy O.

Fluid grid layouts do not work in IE 7/8

Hello,
I just created a simple fluid grid layout with Dreamweaver CS6, but there is a problem in Internet Explorer.
IE 9 shows it right.
When I start IE 9, I press F12 to get to the developer panel. When I switch to IE 7 / 8, the layout crashes. There are no background colors and text styles anymore.
Later I will upload some screenshots.
All other browser work fine.
Where is the problem here?

When I resize layout in Firefox, the background colors disappear in mobile portrait, mobile landscape, and tablet portrait.
Reason: You added styles to your FluidGrid Desktop but not mobile & tablet.
In order for FluidGridLayouts to work, you must build your mobile styles first because everything else is based on that.
I find it's much safer to use a separate style sheet for content. When you start adding stuff to FluidGridLayout.css, things can get screwed up in a hurry.
CS6 Fluid Grid Layouts (6 min video)
http://tv.adobe.com/watch/digital-design-cs6/creating-adaptive-designs-using-fluid-grid-la youts-in-dreamweaver-cs6/
CS6 Fluid Grid layouts (17 min video)
http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
Step-by-Step tutorial -- Building Fluid Grid Layouts in DW CS6
http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs6.html
Nancy O.

Trouble styling across device views ( Mobile, Tablet, Desktop) in fluid grid layout.

Hi pros,
I’m having a problem in Dreamweaver CC laying out and styling my website using the fluid grid layout. For the record, I have not touched the boilerplate.css or JS file and have been using my own.css file to place all my .css in. I’ve managed to get some of the content in little by little but it looks nothing like my mock up. Since I’m new to Dreamweaver and coding in general, I’ve been starting my design in the desktop view. However, when I switch to tablet or mobile view and move something around, it completely moves it when I got back to the desktop view. Also, when I put in on live view or view it in a browser, I get two different looks all together. I try to make sure that my .css file is selected and under media I tried selecting the predefined media sizes and then under selector, there is usually 3 of each tag (one for each view I’m guessing), I select the tag associated with that view and change the properties from there. That hasn’t worked because when I go to live view or view in the browser, it looks completely off or it will screw with the other views. L
So here are my specific questions:
How do I style my elements specifically in each view WITHOUT messing up the desktop, or the other views? Simply clicking on a view using the icons on the bottom and styling has not worked.
Why is my live view so different from my browser view? I’m using the presets given in Dreamweaver for the desktop. When I view, say the logo and navigation in live view, everything is aligned but when I switch to my browser (chrome) it’s all crooked.
Should I be using % throughout all my properties (width, height, margin, padding, positioning)? Currently I have most of my div sized using % but some margins and other properties using px. Will that affect anything?
Can someone recommend a good tutorial? Everything that I seen either covers the basics that I already know,( adding/moving divs, switch views) but when it comes to the .css styling, they are adding a style sheet from somewhere without showing you how to do it from scratch.
Should I design the page in a non- fixed layout and then import the .css style sheet from there? If so, how do I do that without messing with the boilerplate.css file.
I’m taking a course in graphic and web design and we went over this very quickly and was given a lot of the material, however our final project (a full website with 5 pages) must be responsive and built in Dreamweaver. Any advice is greatly appreciated!

Making an external style sheet.
Go to File > New > Blank page > CSS.
Hit create button.
Add some style rules to your new style sheet and save it.
Link your HTML pages to your new style sheet using the directions below.
Dreamweaver, Linking HTML to External Style Sheets
CS6 Fluid Grid layouts (17 min video)
http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
Creative Cloud 12.2 Enhancements to Fluid Grid Layouts
http://blogs.adobe.com/dreamweaver/2013/02/updated-fluid-grids-in-dreamweaver.html
Step-by-Step tutorial -- Building Fluid Grid Layouts in DW CS6
http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs6.html
Nancy O.

How to convert live website to fluid grid layout

I have an existing live website. How do I convert it to a fluid grid layout?

Who is Peter?
Responsive Web Design
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Introduction to CSS Media Queries
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
CS6 Fluid Grid layouts (17 min video)
http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
Creative Cloud 12.2 Enhancements to Fluid Grid Layouts
http://blogs.adobe.com/dreamweaver/2013/02/updated-fluid-grids-in-dreamweaver.html
Step-by-Step tutorial -- Building Fluid Grid Layouts in DW CS6
http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs6.html
If you want to support multiple languages, you'll need to build a mirror site with translations.
Nancy O.

Repositioning DIVs in a DW6 fluid grid layout

I've followed James Williamson's video tutorial on fluid grid layouts http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/ and have created something similar.
Williamson gives his DIVs fairly standard ID names. He starts with "header", ends with "footer" and places three DIVs in between: "article", "interview" and "artwork" (around 6:20 in the video).
The desktop layout is a standard three column layout with a header and footer while in the mobile layout all the divs stack up one on top of the other.
In Williamson's tablet layout, he adjusts the width of the DIVs so two site below the header ("article" and "interview") and he makes the third ("artwork") span the full width (he shows the three layouts in a browser from 15.00 to 15.20 in the video).
What I would like to do in the tablet layout is have the third column ("artwork") sits below "article" while the middle div, "interview" (which in my case is taller, due to having more content) sits to the right of them both.
Is this possible using DW6's fluid layout grid, or would I have to create the layout manually from scratch?

eddieduggan wrote:
What I would like to do in the tablet layout is have the third column ("artwork") sits below "article" while the middle div, "interview" (which in my case is taller, due to having more content) sits to the right of them both.
Is this possible using DW6's fluid layout grid, or would I have to create the layout manually from scratch?
No. The way that Dreamweaver's Fluid Grid Layouts work is by floating all divs to the left. New rows are created by setting the clear property to left. As a result, you cannot have a div on the right that spans the height of multiple divs on the left.
The divs must be displayed in rows in the same order as they appear in the underlying HTML. To get two divs on the left alongside a taller one on the right, you would need to wrap the left-hand divs in an outer div. The outer div can be snapped to the grid, but not the inner ones.
As Nancy says, failing miserably with the Fluid Grid Layout feature is much easier than succeeding. It reminds me of Dreamweaver's earlier love affair with "layers" (absolutely positioned divs) -- well intentioned, but fatally flawed.

Fluid grid layout lost when closing and reopening Dreamweaver

I am working on fluid grid layout in dreamweaver cc. I created a new dreamweaver site, created a fluid grid layout page and everything looked and worked as it should. I closed out of dreamweaver and when I reopened it, I could no longer see the fluid grid layout or the fluid grid handles on any of the divs. I also no longer had the little button in the toolbar next to the live button either, to toggle the fluid layout on and off. I did not move the css or js from where dreamweaver originally stored them.
Also checked the content and code of my files, everything looks as it should:
The fluid grid layout style sheet IS attached to the page.
The Fluid Grid Properties near the top of the style sheet ARE still there.
I have tried several test sites and as soon as I close DW and reopen it, the fluid grid layout button is gone, as is are the visual aids. I uninstalled and reinstalled dreamweaver to no avail.
Very frustrating!
ANY help would be greatly appreciated!

Hi,
Thank you for all the responses. When I was doing the testing, I didn't touch any of the style sheets. I just created a new site, created a new FGL page, saved everything, then closed out. When I reopened, the FGL elements were not there. So in taking Ken's suggestion, I was getting ready to upload the files to see if anyone could see what I was doing wrong. I had named the file test.html so I did a 'save as', to save it as index.html to make it easier. Then a strange thing happened. The new 'index.html' page came in with the FGL elements! When I looked at the test.html, they still were not there. In doing additional testing, when I open the first file, whether test.html or index.html, no FGL functions are available, when I open the second one, again no matter whether test.html or index.html, they are. Getting ready to throw my hands up... I uploaded everything to:
http://www.ComputerSecurity.com/fgltest/
Directly under there is the css file called fgltest.css, along with the boilerplate.css, respond.min.js, index,html, and test.html.
Don't know what is going on. I am new to fluid grid layouts, but not to dreamweaver, have been using it for years. Unless someone can see something that I cannot, seems like the only way I can create a Fluid grid layout based on this new information, is to open one page and work on another...

How to edit fluid grid layout in Dreamweaver CS6

Hi all
I am a designer at the company I work for and we've been building repsonsive designs for the past 12months. I've decided that it would be good for me to try out the new fluid grid layout tool in Dreamweaver CS6 to see if we can improve the design process by using dreamweaver to allow us to quickly prototype my designs for mobile, tablet and desktop.
However I have 2 problems so far.
1) I've created my first fluid grid layout and saved all the files into a new folder. I set grid widths and gutter but now want to edit the values as I am not happy with the gutter. Can this be done? I can't seem to find the file that does this so can anyone point me in the right direction?
2) We have traditionally used pixels to define our grids. I normally produce a grid with a fixed pixel gutter, overall width and column size. It seems that Dreamweaver only has the option to use percentages. Can anyone tell me if this can be changed and again where I can do this?
Thanks for your help
Trevor

In Code View, open your FluidGrid.css file (or whatever you named it) when you created the layout.
FluidGrid Layouts are not perfect and the interface could use a lot of improvement. That said, I think they can be used as a starting point for simple layout projects providing you understand their limitations and are willing to manually tweak the FluidGrid.css code.
If you've been doing Responsive Layouts for 12 months, you're probably building desktop to mobile whereas FluidGrids build from mobile to desktop. It takes a little adjustment in thinking.
Keep FluidGrid.css for layout only. Use a seperate stylesheet for your content styles.
Nancy O.

I am using Dreamweaver cc 2014 and after applying css styles to my fluid grid layout I lose the resize, delete, duplicate and move up/ down ability.

I am using Dreamweaver cc 2014 and after applying css styles to my fluid grid layout I lose the resize,delete, duplicate an move up/ down ability.
For this reason I cannot build new pages by copying one page to create another.
I have a third style sheet that I use for the navigation styles and h1 -h6 ect. tags. and I am also using a css drop menu, can one of these be the problem?
The css menu I am using has the following script - I goes at the bottom of the html page. Before the closing body tag,
<script>
$(function () {
$("#nav").tinyNav();
</script>
I am also using the following for image control - I place it towards the top of the fluid
grid style sheet.
    box-sizing: border-box; /* Opera/IE 8+ */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
Can some one please help.

I am using Dreamweaver cc 2014 and after applying css styles to my fluid grid layout I lose the resize,delete, duplicate an move up/ down ability.
This implies there is something broken in your FluidGrid Layout CSS file.   It could be something simple like a missing semi-colon or curly bracket.   Run your code through the W3C validation tools below to check for errors. NOTE: ignore reported errors in boilerplate.css
CSS - http://jigsaw.w3.org/css-validator/
HTML - http://validator.w3.org/
Nancy O.

Dreamweaver Fluid Grid Layout

Hi everybody! Doesn't it feel like the Fall weather? I love it as I see the trees changing colors. I will miss Summer but will enjoy the Fall holidays.
This question goes back to one I asked a while ago but it is different. I decided to update to DW CC and I can't tell you how much I love it as
I have watched all of the tutorials and find it much easier than the previous version.
One thing I decided to do was to use the Dreamweaver Fluid Grid layout. I totally understand how it works for the most part. When I go to DW CC and the load up screen, I Select fluid grid layouts and then I am presented with a smartphone version, a tablet version, and a desktop version. I left the defaults as they seem to be updated and correct. This is the thing, I design my mockups in PS. I guess I am baffled on how to code that offer to DW. When I always created a fixed layout, I would easily just measure out the divs in PS and then create them in DW sizing everything to perfectly match my initial mockup.
Now that I am using a fluid layout. I am presented with columns. Again, I left them as the default. My question is, I am designing in PS, I am designing for a specific resolution of 1024x768. But I am just confused on if I need to decrease columns or add columns to fit that, or if I even need to at all. For my specific resolution, should I change the desktop columns to somehow correspond to a 1024x768 resolution? The default is 12 columns. In Photoshop, is there a way to insert a fluid like grid to help me with my mockup?
Sorry if this is a lot, but I would appreciate any help, thank you so much!

Hi Nancy! I hope you have been well. Thanks so much for taking the time to post screen shots.
I thought I just needed to create a mockup in PS with a 1024x768 resolution, and slice images. With the fluid layout, I inserted for example, my header image or banner at the top and I inserted it in the desktop view, it looked normal. It was sliced in a 1024 x 768 mockup. But, when I go to tablet and smartphone, it shrinks and it looks distorted almost. Is there something I am doing wrong?
You stated that I needed to create 3 mockups in PS based on those sizes. Does that mean I would have to slice them all and place them in their proper sized sections smart phone, tablet, and desktop?
Here is a video I watched. It seems like this guy used the same image and it looks just fine in all sizes. Create fluid, responsive web pages in Dreamweaver | Learn Dreamweaver CC | Adobe TV

Problems Creating a "Fluid Grid Layout" with Adobe Dreamweaver CS6

I am trying to create a fluid grid layout in Dreamweaver CS6 (which I know how to do), the problem is Dreamweaver started automatically saving the boilerplate.css & respond.min.js in the Dreamweaver program folder (C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS6\configuration\BuiltIn\Fluid Grid Layout\) it does not ask me to save the boilerplate.css or the respond.min.js docs as it normally does. Dreamweaver CS6 also creates a css document instead of the html page it should create. I called Adobe support, however they offer no support for "Fluid Grid Layouts", and I cannot seem to find a solution to this problem anywhere on the internet. If anyone knows how to fix this so it will work properly again it will be greatly appreciated!

Hi toger02,
If you have restored the preferences correctly and the issue is still unresolved I would recommend checking the workflow again.
Define a new site in Dreamweaver.
File < New Fluid Grid Layout < Create. Doctype set to HTML5 and no CSS file attached.
A dialog box will pop up, prompting you to save the CSS for this design. This is your custom style sheet. Give a "filename.css" < Click Save.
Once you've done that, the layout for the mobile device appears in the design view as an "untitled" new document with related files listed as "boilerplate.css","respond.min.js" and "filename.css" i.e your custom CSS file.
File < Save < "filename.html". < Save. On clicking Save it will show a popup with the message: Copy Dependent Files, which are boilerplate.css and respond.min.js.
I hope this helps else let us know if issue is on all the new sites and fluid grid pages that you create?
Thanks,
Bhawna

Need help with Fluid Grid Layout and variable column balance.

I'm using the fluid grid layout. I have multiple columns that are actually fluid grid layout columns done by Dreamweaver. I'd like them to extend as high as each other (all to the maximum height of each other) within the same section. An added catch is that in the desktop layout, I have three side by side under one that takes the whole width of the page. On tablet size, it's 2x2 in a square grid. On mobile, they're vertically stacked. I'm trying to get it so that background colour and/or borders looks decent and is fully balanced, no matter which layout is hit with the fluid layout. The columns reflow, no problem. But the height of any background and/or border is variable.
Any help on fixing this?
Example at: https://music2help.thoughtburst.net/
The example doesn't have borders or colours, as it looked silly unbalanced. The music2help.css is the only one I'm modifying manually.
Love the fluid grid layout, but I need a way to make it behave decently with backgrounds/borders. Any help would be hugely appreciated!
Thanks!
mark->

I tried the solution Nancy posted. It altered things, but doesn't seem to do the trick.
Just some quick background. I did HTML from 1994 through about five years ago by hand in vi on *nix systems. I learned HTML through 4.01, and never bothered with XHTML at all. I learned CSS through most of CSS2. The CSS3 and HTML5 stuff is all new to me, but it can't be that hard. I'm not exactly a novice in JS (I've done a fair bit of AJAX programming), but it's not even close to my primary language (I'm a Perl guy).
I'm "stuck on" wanting to use Fluid Grid Layouts. It's billed as one of the selling points of DW CS6, and I really like the concept and results. I just want the results embellished a little, namely with sensible identical heights on grid containers set in the same row, so that you can apply background colours, dropshadows, and borders. That's really all I want to do that it doesn't already do.
I have a test page at: http://music2help.thoughtburst.net/ that you can try with your Quick Columns. I'd be interested to know if you can get it to work.
Here's the catch, though... Resize the browser, shrinking it inwards. (I suggest Firefox, as Chrome only shrinks so far, and you won't get to Mobile width.) As you can see, on a Tablet, one of the columns that should be equal height actually moves up a row and should be equal height with the row that, on a desktop, would take the entire width of the page area. So that's like a 4-up output in printing terms. At Mobile size, the entire thing is vertical, so none of the columns should be resized.
If your product works and can accomodate these conditions, I think I would be interested in spending the $35 it costs.
Let me know? Thanks!
EDIT: Changed URL to be non-SSL. The server has multiple vhosts on it, and I keep forgetting that I don't have a cert on this new one. Sorry about that. You can just add anything to one of the the three middle columns, if you're pulling it down to test.

Using Fluid Grid layouts | Learn Dreamweaver CS6 | Adobe TV

Designing for multiple screens can be a difficult and time-consuming task. The new Fluid Grid feature in Dreamweaver CS6 gives designers a visual way to control page layout for multiple screen sizes. It also automatically integrates cross-browser consistency through the use of HTML5 boilerplate and the respond.js library.
http://adobe.ly/IUFngo

Although the whole fluid grid layout feature suffers from a terrible implementation, this video explains what is needed to understand, and warns very well for all the strange culprits in this feature.
It takes time for most designers to get used to the idea of fluidity in a visual representation of information, and let structural building blocks flow according to alternating views and rules. Let's hope Adobe Edge Reflow helps us doing that in a better, faster way.

Dreamweaver CS5.5 Fluid Grid Layout Help!!!

Similar Messages

Maybe you are looking for