Fluid grid not very. Fluid.
I was under the impression (incorrect) that one advantage to the fluid layout was that I could control the layout for different resolutions/devices. Arrange things for the desktop, a different design for the phone, etc. Changing the poistion of one would not effect the other. Even remove undesired elements. For example, a video on the desktop would not show on the phone.
When I arrange things for the smallest layont - say a phone, the other layouts change as well. For example, it my logo is on the right on the desktop, I want it on top on the phone. Can't do it. Move it on the phone layout and it's now on the left on the desktop. If I delete a DIV for the tablet, it's deleted in all three layouts. I can have a video in my desktop - no bandwidth problem. But I don't want the video on the phone. Can't do that without a lot of hand-coding.
At this point, as cool a concept as the fluid layout tool is in Dreamweaver, it's not very useful in practicality. Way too limited.
Or am I missing something?
Sorry, I guess I am the wrong person to answer questions related to the DW Fluid Grid Layout, I had a look at it when it was first introduced and absolutely hated it. I do believe that the current version has been improved; but I still have my doubts based on the history of Spry, ADDT and the Server Behaviours panel where Adobe decided to no longer support/maintain these.
You say that you have been using Bootstrap, in that case have a look here http://www.dmxzone.com/go/21759/dmxzone-bootstrap/
Similar Messages
-
Fluid Grid not displaying correctly in Chrome
I'm laying out a simple 3 column design using fluid grids in CS6.
I want only one colum to show in mobile, with the other two hidden. Two columns should show in tablet, with the third hidden and all three columns should be visable in desktop mode.
I'm currently only testing between chrome and safari as I just want to get the hang of the feature.
When I preview in safari, everything works as it should but when I preview in chrome, the browser seems to ignore the desktop settings and shows a large version of the two column tablet design.
I'm using 4, 8 and 12 columns respectivly in my fluid grids.
Has anyone else had this issue? I haven't been able to find any references to a similar problem.Has anyone else had this issue?
Nope. You're the only one.
Please show us your code. My guess is that your media queries are messed up.
How exactly are you defining the divs to show or not show?
Nancy O. -
Why does DW6 fluid grids not use HTML5 tags?
Correct me if I'm wrong, but it appears that DW6 only allows divs to be inserted when building fluid grids via the interface. If your doctype is set as HTML5, wouldn't it be nice if you were prompted as to whether you wanted a div, header, nav, section, aside, or footer, etc.? The way it is now, if you want your code to be HTML5 semantic, you will have to go into both your HTML and CSS afterwards and make a bunch of manual changes.
Or am I missing something that I have not seen in any of the tutorials I have read and watched?
Thanks!
JamesI can't speak for Adobe. But my guess is because HTML5 is still a working draft. The contents of HTML5 are still being discussed on the HTML Working Group and WHATWG mailing lists.
http://www.w3.org/TR/html5-diff/
Feel free to submit a feature request:
https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform
Nancy O. -
Dreamweaver CC fluid grid divs not stretching out to cover 100% of the screen
Hi there,
I am doing another responsive layout using DW CC and I have come across a problem.
The design has coloured divs stretching across the page at 100% with a coloured background and borders.
I have already done the design up as a fixed width layout to get the colour codes etc and that is working fine, with the colours stretching across the screen.
Now I am putiing the design into DW CC using fluid grid layout and there is a white border outlining the website.
I can't work out how to get rid of this. Below are extracts of my two lots of CSS stylesheets, one for a fixed grid layout and one for a responsive layout
FIXED WIDTH CSS
body,td,th {
font-family: Calibri;
font-size: 14px;
color: #000;
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
*/This header wrapper stretches across the entire screen no matter what the size and does not have a white border on the left and the right
#headerWrapper {
background-color: #000;
height: 101px;
width: 100%;
margin-right: auto;
margin-left: auto;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #BDDB6D;
FLUID GRID CSS
The fluid grid layout CSS has the following in it:
.fluid {
clear: both;
margin-left: 0;
width: 100%;
float: left;
display: block;
.fluidList {
list-style:none;
list-style-image:none;
margin:0;
padding:0;
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 86.45%;
padding-left: 2.275%;
padding-right: 2.275%;
clear: none;
float: none;
#div1 {
*/This header wrapper stretches across the grid layout only and has a white border on the left and the right
#headerWrapper {
max-width: 100%;
height: 101px;
background-color: #000;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #BDDB6D;
What do I need to add to the fluid grid layout to make the headerWrapper div stretch across the screen, no matter what the width?
What do I have to put in the fluid grid CSS to get it to do this?
Thanks in advance!I did it! I can't believe it. The code I used is follow. The bar divs set the colour and border across the entire page and the wrapper divs contain the content in the various bars across the page.
I must say that DW CC fluid grids are much more stable to work with and can take a lot of hand coding now. It is a great improvement on when I tried to use Fluid grids on a project last year.
IN THE PHONE MEDIA QUERY SECTION
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 100%;
padding-left: 0;
padding-right: 0;
clear: none;
float: none;
#headerBar {
background-color: #000;
min-height: 101px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #BDDB6D;
padding-top: 2.735px;
#headerWrapper {
width: 86.45%;
padding-left: 2.275%;
padding-right: 2.275%;
clear: none;
float: none;
margin-left: auto;
#menuAnimationBar {
background-color: #B7B7B7;
height: 293px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #BDDB6D;
background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(153,153,153,1.00)),color-stop( 100% , rgba(192,192,192,1.00)));
background-image: -webkit-linear-gradient(270deg,rgba(153,153,153,1.00) 0%,rgba(192,192,192,1.00) 100%);
background-image: linear-gradient(180deg,rgba(153,153,153,1.00) 0%,rgba(192,192,192,1.00) 100%);
display: none;
#contentBar {
background-color: #F8FCF1;
min-height: 200px;
background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(245,251,234,1.00)),color-stop( 100% , rgba(251,253,247,1.00)));
background-image: -webkit-linear-gradient(270deg,rgba(245,251,234,1.00) 0%,rgba(251,253,247,1.00) 100%);
background-image: linear-gradient(180deg,rgba(245,251,234,1.00) 0%,rgba(251,253,247,1.00) 100%);
#contentWrapper {
width: 86.45%;
padding-left: 2.275%;
padding-right: 2.275%;
clear: none;
float: none;
margin-left: auto;
#socialMediaBar {
background-color: #000;
min-height: 83px;
border-top-width: 2px;
border-bottom-width: 2px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #BDDB6D;
border-bottom-color: #BDDB6D;
#socialMediaWrapper {
color: #FFF;
width: 86.45%;
padding-left: 2.275%;
padding-right: 2.275%;
clear: none;
float: none;
margin-left: auto;
padding-top: 2.275%;
#footerBar {
color: #FFF;
background-color: #AAAAAA;
min-height: 176px;
background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(153,153,153,1.00)),color-stop( 100% , rgba(185,185,185,1.00)));
background-image: -webkit-linear-gradient(270deg,rgba(153,153,153,1.00) 0%,rgba(185,185,185,1.00) 100%);
background-image: linear-gradient(180deg,rgba(153,153,153,1.00) 0%,rgba(185,185,185,1.00) 100%);
#footerWrapper {
width: 86.45%;
padding-left: 2.275%;
padding-right: 2.275%;
clear: none;
float: none;
margin-left: auto;
IN THE TABLET MEDIA QUERY SECTION
.gridContainer {
width: 100%;
padding-left: 0%;
padding-right: 0%;
clear: none;
float: none;
margin-left: auto;
#div1 {
#headerBar {
#headerWrapper {
width: 90.675%;
padding-left: 1.1625%;
padding-right: 1.1625%;
clear: none;
float: none;
margin-left: auto;
#menuAnimationBar {
display: none;
#contentBar {
#contentWrapper {
width: 90.675%;
padding-left: 1.1625%;
padding-right: 1.1625%;
clear: none;
float: none;
margin-left: auto;
#socialMediaBar {
#socialMediaWrapper {
width: 90.675%;
padding-left: 1.1625%;
padding-right: 1.1625%;
clear: none;
float: none;
margin-left: auto;
#footerBar {
#footerWrapper {
width: 90.675%;
padding-left: 1.1625%;
padding-right: 1.1625%;
clear: none;
float: none;
margin-left: auto;
#menuAnimationWrapper {
IN THE PC MEDIA QUERY SECTION
.gridContainer {
width: 100%;
max-width: 1920px;
padding-left: 0%;
padding-right: 0%;
margin: auto;
clear: none;
float: none;
margin-left: auto;
#headerBar {
#headerWrapper {
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;
margin-left: auto;
#menuAnimationBar {
display: block;
#contentBar {
#contentWrapper {
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;
margin-left: auto;
#socialMediaBar {
#socialMediaWrapper {
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;
margin-left: auto;
#footerBar {
#footerWrapper {
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;
margin-left: auto;
#menuAnimationWrapper {
width: 88.5%;
height: 293px;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;
margin-left: auto; -
More than one container in fluid grid
Is it possible to have more than one container in the fluid grid? I need to do it (I think) to be able to make a movie file scale properly using seperate code somebody else suggested to me. The idea is to have the header in one regular container, then the supplied movie container, then a regular container containing the footer. Any other ideas more than welcome, please help!
Thank you Nancy.
You have shown me how it can look very nice, so I appreciate your feedback.
The issue I had was the way in which the frame scales. First it has the black frame at the sides and then at the top and bottom. I was hoping the frame could scale with the film itself. I started with a larger movie than your example and more square in dimensions, so by the time it reached the smallest mobile screen there was a very long empty space before the film was visible. That would be very annoying if viewed on a phone. I had a back button below it, also a very long way down, so it became a real issue. I also tried it with embedded FLVs and hoped it would scale like any image file, but it does the same but with a white frame (looks even worse).
Someone here gave me some code that did make the frames scale (http://forums.adobe.com/message/5280331#5280331), but it's own grid reacted imperfectly with the fluid grid, thats why I wanted to put it in between two fluid grids. I tried it but perhaps due to lack of knowledge it failed miserably. I gave up and have decided to link to 3 pages with different sized movies, the frame issue will still exist but me much less prominent.
In my opinion Adobe should update the way the movie frames scale to match the image frames, otherwise the fluid grid is very flawed.
Thanks again though. -
Need Fluid Grid Layout to Max Out at 1920 Pixels
When I view my 3 fluid grid layouts, after 1232 px, nothing is centered. I noticed in the "Desktop" gridContainer there was a max-width value of 1232px. I changed it to 1920px but it did nothing. I want my desktop webpage to look centered up to 1920 pixels. How?
Please don't ask for help until you can provide us with a LINK. Fluid Grids are very temperamental to work with. I advise people to keep their hands off the fluidGrid.css and boilerplate.css files. One misstep with either of these files can make the entire layout break.
Having said that, if you don't show us all your code, we can't be expected to make guesses about what you have done and where. Posting all the code into this forum isn't practical. There's just too much to look at. So pleeeeeeze just give us a link.
Nancy O. -
Green highlight when working with Fluid Grid Layout Div tags
What does the green highlight mean when working in Live view of a Fluid Grid Layout using Fluid Grid Layout Div Tags? Sometimes they show up, but sometimes they don't. I think it has something to do with the width setting but I can't figure out what the rule is or what the highlight indicates.
Dreamweaver CS6
Mac OSX 10.8.2
THANK YOU!!Brian McNay wrote:
the green highlight sometimes disappears when modifying the width property of the div. My question is what does this signify?
If you change the width of a div manually in Code view or in the CSS styles panel, Dreamweaver ceases to treat it as a fluid grid layout div, and the green highlighting disappears.
To be treated as a fluid grid layout div, the width must be adjusted by dragging the handles in Design view. Dreamweaver snaps fluid grid layout divs to the grid that is defined when you first create the page, and it calculates the width and margins to many decimal places. If the width and/or margin doesn't match the grid dimensions, the highlighting disappears, and the div is treated as any other div.
It's not a bug, nor are fluid grid layout divs any different from normal ones. The idea of the grid and the highlighting is to allow you to create a responsive layout according to a hypothetical grid. Once you've created the basic structure, it's best to turn off the visual guides anyway.
Personally, I think that the implementation of fluid grid layouts in Dreamweaver CS6 leaves a lot to be desired. The basic idea is good, but it's difficult to use if you don't have a solid understanding of CSS. -
Fluid Grid problem dreamweaver cc in IE11
Site made in dreamweaver cc with fluid grid layout. It looks and works fine in Safari en Google CHrome but the fluid grid does not work in IE11. Someone a solution? http://www.fvdc.be
Troubles with the fluid grid not entirely solved.
The solution was that i imported tables in the Fluid Grid and that was not a good idea!
At the moment i am one step ahead but still not satisfied with the result.
The appearance in IE11 looks better, never the less when i reduce the screen size, the layout does not follow all the way.
Even in Fire Fox, Safari and google chrome.
There is even an additional problem.
II do only get one direction right on mobile screens. Vertical or horizontal, but not both.
In adapting on Dreamweaver, when i set-up one scene size right for horizontal and vertical positioning then the layout of the other screen sizes change as well (in the wrong way)
In viewing our site you probably understand the problem better then in the explanation in this writing.
http://www.fvdc.be
Thanks for all the previous advice and we hope to get an answer to this post!
Thanks a head, greets from Frank -
Fluid Grid Colums NOT aligning
Hi everybody.
I am using Dreamweaver CS6 and I wanted to use the fluid grids for designing websites for Desktop/iPad/iPhone.
I understood the basic principle, but I have one problem.
The columns do not line up as they should.
I have made a composite of the different browsers and devices.
I run Mac OSX 10.7.5.
Does anyone have the same problem?
Thanks in advance
Markus ZieglerIf you've been using Dreamweaver a long time you should realize that:
a) Features added to address trendy issues (like responsive design) are
relevant to the "rapidly changing web" and as such they need to be kept
up to date. Unfortunately, Adobe ha a well documented history of not
updating such features.
b) Your friends using free solutions may i fact be using some of the
code that Adobe uses in its Fluid Grid feature, which is not an original
piece of work by Adobe. It is, instead, code acquired from several open
source solutions... that were very popular when CS6 was being developed
but which have now been pretty well replaced by better methods.
That said, Dreamweaver is a marvelous tool. Adobe can't really be blamed
for trying to take advantage of buzzwords to add "compelling" new
features, but an educated user needs to understand that what gets added
in in terms of client-side functionality (CSS + JavaScript) is not
Adobe's strength.
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
Since 1998 -
Div options toolbar not displayed correctly in fluid grid layout
When I select an inserted element in fluid grid layout, the options to hide, duplicate or delete the Div are not displayed. I only have the 'move up a row' arrow displayed. How do get the other options to display on the mini toolbar? My DW CS6 version is V12.0 Build 5861.
It is called as the 'Smart HUD' and was made available in 12.2 CCM (Creative Cloud) update. Your version is 12.0 which looks like a regular non-cloud license.
Are you actually a Creative Cloud subscriber? If not, you'll have to wait for a perpetual license upgrade in order to see/ use this feature. -
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. -
Fluid Grid Layout Div's not snapping correctly?
Hello, how come my fluid grid layout div's are not snapping correctly?
Here is a picture:
As you can see, the div tag "iphone1" is halfway in the other column. Shouldn't it be snapping to the nearest column? My mobile layout snaps perfectly fine but my tablet and desktop do not. Is it because my div tag "iphone1" is in another fluid grid layout tag "main-body"> Can you not place div's inside of div's with id's?
I would appreciate any help as I am sure I am doing something wrong that can easily be fixed.
Also, it is possible to change the number of columns you want for each design view after creating the page? For example, I have 20 columns in desktop view, it is possible to change to 16 if I wanted to?
Thanks in advance!Hi dhint4,
Hope things are working out for you while using new Fluid Grids.
To answer your question around nesting of elements :
12.2 upgrade of DW fully supports the Nesting of different fluid elements within other fluid element.
Infact it also supports insertion of non-fluid(normal) element within fluid elements.
This was not available in 12.0 release.
Only caveat while nesting is not to apply same class on both Child and Parent unless the the width of both is 100%.
Also, it is possible to change the number of columns you want for each design view after creating the page? For example, I have 20 columns in desktop view, it is possible to change to 16 if I wanted to?
Currently its not possible to change the number of columns on the fly. We already have couple of feature request to support the same.
Please feel free to add your vote by creating a feature request @ :https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform
Kindly revert if you have any issues or concerns.
Cheers,
Puneet -
Why I am not able to see Fluid Grid Layout Div tag
Why I am not seeing Fluid Grid Layout Div tag In the Insert Layout menu
DW CC changed the panels. If you're working in FGLayouts, DW intuitively inserts the correct Div for you.
Nancy O. -
Why does 'Switch to Fluid Grid View' toggle button not working?
I don't see the grids in the Fluid Grid Layout and nothing happens this button's On/Off stages.
Also getting an error 'Could not find Dreamweaver Fluid Grid style sheet.' when inserting any element as Fluid Element.
Please help, thanks.@Binson: I'm following your post on another thread too.
Anyway, FG elements can only be inserted into FG Layout documents.
On FG Layout page if you're getting that error, you probably have some file integrity issues and DW is unable to locate your FG stylesheet. -
Fluid grid template - editable region - resize not possible
Hi,
After quitting DW the first resizing problem was gone.
Now I saved the page as a template and inserted an editable region.
Then it wasn't possible anymore to recize the divs.
The lines are know yellow dotted.
Do I have to make editable regions in a different way?
See: http://www.ifacilityservices.nl/index.html
Thanks again.
CarlaHi Nancy,
Thanks voor your reply!
Is it now not possible anymore?
I deleted the editable regions, but it stays with the yellow lines.
Carla
Van: Nancy O. [email protected]
Verzonden: zaterdag 24 augustus 2013 21:59
Aan: Carla Leliveld
Onderwerp: fluid grid template - editable region - resize not possible
Re: fluid grid template - editable region - resize not possible
created by Nancy O. <http://forums.adobe.com/people/Nancy+O.> in Dreamweaver CC - View the full discussion <http://forums.adobe.com/message/5623512#5623512
Maybe you are looking for
-
Hi, I am trying to connect my mid-2010 Macbook Pro (running version 10.9.4 of OS X) to a brand new Magnavox TV. I am using an HDMI cord and a mini DisplayPort, both of which have worked in the past. When the TV is off, my computer recognizes the exte
-
How do you fix the Health App from crashing?
If you put too many steps in the Health App, the Health App crashes and won't let you get back in it. How do you reset it, or fix it?
-
Can't open any videos from the web
Hi! I can't open youtube, IMDB or dailymoyion in my MacBook Air, all of a sudden. I am using MAC OSX v. 10.6.8. Can anyone help me? I tried every answer available on the internet...
-
Dear All, In BPC 10.0 Microsoft Version, I am performing consolidation. Running consolidation pckg was successful initially. Suddenly, it fails - giving the following error message: Error FX-300 nothing extract from Fact - CLCFXTrans I believe the ab
-
Posting to SCL4 -- Link an service call and an invoice --
Is there any way to post to SCL4 sooner to create the link between a service order and an expense document. Currently the link is created after one leaves the service module. That is too late to be functional. Therefore you cannot grab the service