DW Fluid Grid Calculating wrong ?

Seems to me that DW it's calculating the div and margin sizes wrong.
The Logo and Login css are identical, and Logo and Login each sum up more than each 50%, that then creates too much space requirement as in the picture.
Is there a setting in DW that takes care of this calc to be correct ?
Maybe someone from Adobe can assist on how the fluid grid feature is to be used so that it works as displayed in the tutorial video for the fluid grid, there the problem does not occur.
Regards,
Frank
* I also had posted the problem here, with some preliminary steps

I think you are missing the point. If you have 3 columns to fit in one line then mathematically you can't have 3 equal columns because 100% cannot be divided equally. Also, you need to allow for other items like borders, paddings and margins.
Having said this, you are very rigid with your number of columns to start with. The default is 10 for desktop, which you can change to 12 (according to the tutorials); but you can also change it to 15. I started with 15 columns and adjusting the columns one by one until I get this picture:
You can see that 2 rows of 3 columns have fitted quite well. Also, you need to take into account that some columns will always be wider than others. For example, the content of the page might be in a wider column; but it you are designing for newspapers then you might want to have equal narrow columns.
You need to plan in advance what your site will look like and this means you need to draw the pictures even with pen and paper will do for this exercise.
I hope you get the idea. Flexibility is the key word here and don't get bogged down to 12 columns (rigidly) divided into 3 columns times 4 because that is not web designing. Also, the default for gutter is 25% of column width but this can be changed to just 10% to suit your design or even 15% or whatever number you want.
You just need to try different figures until you get it right. Don't forget you are working in WYSIWYG window for this page layout. When the page is designed, you will inevitably need to fine-tune your code manually to make it look right.
Good luck.

Similar Messages

Is it possible to turn off the fluid grid function in dreamweaver during the process of building your site by mistake? It was working fine and simply stopped and I don't see how to correct what is wrong.

Is it possible to turn off the fluid grid function in dreamweaver during the process of building your site by mistake? It was working fine and simply stopped and I don't see how to correct what is wrong.

There is no specific function that turns FGL on or off.
When you say that it has stopped, do you mean that the handles no longer show?
If that is the case, then I think you may have modified the CSS to such an extent that Dreamweaver no longer recognises it as belonging to FGL.
There are a couple of avenues for you
Redo the site and make sure not to touch the FGL CSS
paste the code here so that we can see what has gone wrong.

Full width slider in a fluid grid layout ???

I'm fairly fluent in Dreamweaver building fixed pixel sites, but cannot seem to grasp fluid grid layouts. At least with what I'm trying to accomplish. mostly all of the tutorials Ive seen dont address anything complicated.
Question:
I'm trying to achieve a 100% nivo slider at the top of a page, with a main body area below it that only uses 960px or what ever the equivalent would be as a percentage. How do I do this?
Initially for testing purposes, I tried to experiment by simply creating two divs. One full screen and one less than that. What I am seeing first is that after creating two divs, and placing color in the divs, when viewed in browser, it does not fill the screen and leaves a small margin on either both side. Looking into the css properties, there's padding in the grid container and the percentage is less than 100%. Why If 100% is selected when setting the new document properties.
Maybe this is the wrong way to achieve what I'm trying to achieve, but I did attempt to get started here. I'm totally lost here guys and girls. Are there any advanced tuts out there that address this?
Thanks in advance!
Bob
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1">Use Insert Panel for additional Fluid Grid Layout Div tags. Note: All Layout Div tags must be inserted directly inside the "gridContainer" div tag. Nested Layout Div tags are not currently supported. </div>
<div id="LayoutDiv2">This is the content for Layout Div Tag "LayoutDiv2"</div>
</div>
</body>
</html>
@media only screen and (min-width: 769px) {
.gridContainer {
    width: 98.5507%;
    max-width: 1232px; (I deleted this)
    padding-left: 0.7246%;
    padding-right: 0.7246%;
    margin: auto;
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#LayoutDiv2 {
    clear: both;
    float: left;
    margin-left: 22.549%;
    width: 54.9019%;
    display: block;

Thanks for the input. I have the slider working now. Placing it before the grid container worked. Also setting the desk top grid to 81-88% answered my other question. That renders the gutters I'm looking for. But I have a question. I asked this above. If I select 100% on the mobile, 100% for tablet, and 88% for desktop, why does DW produce padding in the css files? I keep hearing references to not mess with the css file, and create a new file to perform styling. Can I safely delete this padding and change this percentage to 100%? Confusing to me. If it's mobile first, and all calculations are based on these numbers, then.... Well you understand what I'm saying.
/* Mobile Layout: 480px and below. */
.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 96%;
    padding-left: 2%;
    padding-right: 2%;
So secondly, do we create a separate css file for styling?
And third, how do you create subsequent pages. Does this work with dwt files?
Thanks in advance. I will get my head around this soon, I promise.
B

How to setup a default size for new divs in fluid grid layout in dreamweaver?

Hi,
how to setup a default size for a new divs in fluid grid layout in dreamweaver? I don't need the default size for new divs as a 100% width, I need them 13.69% as a one coulmn width only (7 coulmns fluid grids layout for desktop size 1000w).
This problem I've faced when I intended to insert dozens of fluid grid divs in the layout.

Sorry, I don't believe that you have had a good look at the Foundation framework. I'll now hold your hand while we go through the basics.
Here is the specific page http://foundation.zurb.com/docs/components/grid.html
The default values are
Em-base : 16px
Row width: 62.5em (62.5em x 16px = 1000px)
Columns per row: 12
These and other default values can be changed. The fact of the matter is that if you stipulate a section width of 2 or 3 or 12 columns, the widths will automatically be calculated for you.
In your case, if you want 7 columns, all you need to do is change the number of columns per row and the rest is done for you.

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

The html5 tags nav in the broilerplate.css file - fluid grid

Ok. I am working with the fluid grid system in DW CS6.
in the broiler plate.css file i see the below code which seems to control the styling for the listed html 5 elements.
HTML5 display definitions
   ========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
/* =============================================================================
   Base
   ========================================================================== */
why did adobe set the nav id to display as a block element.
this is causing me issues with using the above tags.
My navigation bars name is nav. I attempted to create another css rule with the display set to INLINE for my menu.
The boiler plate code is overwriting my rule. Why? What is the best way to label my divs. I was tring to go HTML 5 but fluid grid already has some rules in place. Can i modify that without problems? what is the best thing to do. Not label my divs with the HTML5 labels?
why are all html5 tags set up to display that way. How are you supposed to have individual control? without breaking the fluid grids factory helper rules?

Thanks for those charts. I am building the site for both myself and my visitors. After looking at your chart I think 90% is good enough for me. My old website that I am rebuilding used framed pages and front page to build it.   I am making my layout so that IF i find that the fixed nav box is too Dicey I will just pull it off the site.
I am not suse which browser dreamweaver has built in. I moved into a new windows 8 computer with CS6 at the same time. I have not downloaded any browsers yet. I was just building this based on the newest stuff released. I am far from testing it out and should have gotten some done by now. AS of right now I have 140 hours in building my new layout and learning CSS coding. I have not uploaded yet to a URL so I will need to get back to you when I do. The little bugs keep setting me back to zero. The layout looked like it all snapped to the grid. My layout divs were 12 column with 4 divs approx 200 px 400px 300px and 300px everything snapped to and looked fine. When I started adding my PS images and content to my divs the 4th div fell back down a row in the view. I then click the arrow to move it down a row which it did then I tried to move it back up. It would not go. I have boxes with borders, radius corners, and dropped shadows on the containing box. I looked at it and starting thinking the CSS styles made it wider than the fluid grid would allow. So i then removed the styles and it is still stuck a row below where it should be.
Futher down my page I have 4 more rows with 4 divs in each row. The last 4 all drop down so that it is totaly different than what I a laid out. It is weird because my div is three colums wide. I have the last three colums open on the lay out but it will not move up and it seems like the margins are tight or the gutter is wrong. I am not sure.

Understanding Fluid Grid Layout

Hi,
First of all - I apologize - my English is bad, but I hope you will understand me.
I'm currently watching some video tutorials about responsive web design, particularly about Fluid Grid Layout/Dreamweaver.
To get to the point and to be as simple as possible, my question is: In what cases elements do NOT need to have class="fluid"?
For example, here's part of the code from one video tutorial:
<body>
    <div class="gridContainer clearfix">
        <header id="header" class="fluid">
            <h1>The Best Site Ever!</h1>
            <nav id="mainnav" class="fluid">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">About Us</a></li>
                    <li><a href="products.html">Products</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </header>
        <article id="intro" class="fluid">
            <h2>Some Title</h2>
            <p>Some thext... </p>
        </article>
As you can see above, <header> and <article> elements that are child-elements of <div class="gridContainer clearfix"> have class="fluid". But, let's look inside <header> element - there are two child-elemets: <h1> without and <nav> with class="fluid".
Now, correct me if I'm wrong - If some element has child-elements - it must have class="fluid" (except for the case with ul/ol and its child-elements li), right? For example, element <article id="intro"> must have class="fluid" because it has child element <h2> and <p>, but those child elements will not have class="fluid" because they don't have child-elements. On the other side, child-element (of the <header id="header" class="fluid">) <nav id="mainnav" will have class="fluid" because it has child element (ul). Only in case of lists there are exceptions...

Thank you for your response. It isn't the snapping that appears to be the problem. This is an example of what I'm trying to do. Excel was the best way for me to provide a visual. Is this possible? Every time I try to place divs in a similar layout, the div will not take up multiple rows. For example div 4 would move down and where row 7 is would now be row 4. Div 2 would have also moved down because of 5. I have a large image that needs to be placed to the left of a header and vertical menu. I'm trying to keep the header and menu seperate and the image needs to be aligned to the top left of the text. I'm sorry that I'm overcomplicating this. I must admit it surprises me that the fluid grid appears to be dictated by rows. I'm wondering if for this particular design I should just stick to a table.

Dw6 fluid grid layout

trying to make sense of the fluid grid layout.
can you use <div class> in fluid grid layout?
is it best to only insert divs using the fluid grid layout div?
when you insert a new fluid grid div what is the difference between entering a new line or not?
the html structure seems to be the same regardless of if you start a new line or not, am i wrong?
any help would be appreciated!

Ben Pleysier wrote:
It's not my code, just rubbish I pulled out of the Bootstrap example sites....plenty more like that........ how about this beauty:
<div class="spb-row-container spb-row-full-width spb_parallax_asset sf-parallax parallax-window-height parallax-fixed spb_content_element bg-type-cover col-sm-12 no-shadow hidden-xs remove-element-spacing col-natural" data-v-center="true" data-top-style="" data-bottom-style="" data-midnight="dark" style="background-color:#009fc2;margin-top:0px;margin-bottom:0px;background-image: url(http://www.thesign.pt/wp-content/uploads/2014/10/FM.jpg);">
I thought we were talking about Bootstrap. No Bootstrap in the above.
<body class="html not-front not-logged-in no-sidebars page-node page-node- page-node-1172 node-type-static-page not-mobile region-content navbar-is-fixed-top" onunload="">
No Bootstrap here either.
<div class="col-lg-3 col-md-4 col-md-offset-1 col-sm-4 col-sm-offset-1 col-xs-22 col-xs-offset-2 col-lg-offset-0">
Please allow me to explain. Bootstrap is based on 12 columns regardless of screen size. Translating the above we get the following for each of the screen sizes
large 3 cols offset 0
medium 4 cols offset 1
small 4 cols offset 1
extra small 22 cols offset 2
Our attention immediately falls on the extra small device with 22 columns that are 2 columns offset, total 24 columns. How can this be when there are only 12 columns available. Why would one have offset columns on the smallest screen size when we are already battling for real-estate. I think that if we make the classes believable we can safely ignore the classes for the extra small device. Continuing, we see the same number of columns for medium and small and the same offset. Being a mobile first approach, the classes that we assign to small will filter through to larger screen sizes making the classes for medium screen sizes ineffective. Looking at the 0 offset for large screen sizes?? Why do that when it is the default value. In other words, had Bootstrap been applied properly, the tag would look like
<div class="col-sm-4 col-sm-offset-1 col-lg-3">
The other two examples are even more ridiculous. Once again, I implore you to start learning Bootstrap and you will come to the conclusion that you are supplying us with gibberish.
I'm not supplying the gibberish it's the many websites that rely on frameworks, be they Bootstrap/Foundation/Wordpress - whatever rubbish they are using that I'm lifting this code from that are supplying it.
Take the Bootstrap form - every form input field I observe is wrapped in a <div> tag, why - it's bloated and redundant coding. Bootstrap, much like Wordpress was never invented to be used to build websites.
That IS my whole point - there are numerous examples of where Bootstrap IS NOT being used properly because people rely on something they no nothing about and end up with verbose class names splattered around all over their pages, bloated js and css scripts because they are the default files which come with Bootstrap.
<div class="col-sm-4 col-sm-offset-1 col-lg-3"> to me this is still nasty and overly complex 'class' mark-up. A page full of this tripe would drive me insane.
The very worst people you could advise to use Bootstrap are the people in this forum because most will have little knowledge of coding (that's why they turn to a framework) and end up with a page full of crap.
And I'm not verbalising you - you said it yourself. People use lots of 'short cuts' - it doesnt mean it's a good approach to take. No ones re-inventing the wheel apart from Bootstrap, who are obviously trying too. Media queries already exist to produce responsive design, learn how to implement them and free yourself from being entrapped by frameworks where you have to use their naming convention, their break points by default, their over bloated js and css files and somethimes rubbish html mark-up.

Fluid Grid Layout can´t be changed after opening .html file

Hey Community!
I´m working with DW CS6 for a few weeks now and I´m really happy about it!
But now I´ve got a Problem... I used google and this forum to find a solution to it, but didn´t find anything about it. (Sorry, if i was too stupid to search for the right keywords! )
I´ve created a new side with DW and wrote some html pages: All of them are fluid grid layouts and it worked all fine till today. Every page is seperated in an own folder including the "boilerplate.css" & the "respond.min" file, so the filetree looks like this (UPCASE = Folder):
ROOT:
     index.html
     boilerplate.css
     respond.min
     OFFERS:
          offers.hmtl
          boilerplate.css
          respond.min
     ALBUMS:
          albums.html
          boilerplate.css
          respond.min
and so on...
So today I wanted to open the .html files, to make some changes, add new fliud-grid-div-tags and add new content. The pages look still lik I left them (correct layout, old fluid-grid-div-tags still at the right position, everythings fine), but the collums of the fluid grid aren´t displayed anymore and I even can´t move the fluid-grid-div-tags anymore
In other words:
The collums are still there, but the fliud-grid-div-tags are no longer displayed green and editable in their position and size.
Did I do something wrong? Or is it maybe just a special Checkbox to click in DW to edit them (like I´m now in a wrong DW-view or something like that?)?
I hope you got a solution so I don´t have to rewrite all the pages again to be able to edit them!
Greetings from Germany,
David
PS: Screenshot

Hi Community,
I found the solution on my own in a video, where someone deactevaded those green fields...
So it´s solved
THX @ all

Fluid grid layout css error - (adobe support sucks!)

We just bought upgrades for our entire department to dreamweaver cs6 about 2 weeks ago. Today for the first time I've been trying to make use of the new fluid grid layout system. I got some of the page put together and when I then tried to insert a new fluid layout div I got an error message saying "Could not find Dreamweaver Fluid Grid style sheet". I wasn't sure what to make of it so I googled it. I found someone with a similar, not exact, error message and someone suggested they double check their css file to see if it was missing a closing }. I double checked my css files and they were fine. I tried reinstalling dreamweaver in case a file got corrupted. No go. After reopening the file, now my fluid grid pink overlays won't display.
It's as though the stylesheet where the fluid grid styles are defined isn't being recognized, however at the same time, some styles defined in that stylesheet ARE being applied to the page, but not all of them.
I called adobe support, sat on hold forever only to be told that because we purchased a downloaded version of the upgrade, we don't get the 90 days of support but have to pay $39. Are you kidding me adobe? No support without paying after we just paid literally thousands of dollars in upgrades to our cs6 packages?
Another thing that's odd is that if I start a new fluid page and save the files in a new folder, the insert new fluid grid div works fine. I know it sounds like some stylesheet got hosed, but as I said, I have double and triple checked the css file and don't see a problem. Anyone have an idea what might be wrong? thanks.

I found the problem and in fact it was a problem with the stylesheet. However, it wasn't due to any invalid styles. Apparently there are comments near the top of the stylesheet that tell dreamweaver that that's the stylesheet where the fluid grid content is stored.   It would have been helpful if they included additional comments like "DON'T REMOVE THESE COMMENTS OR YOUR'RE SCREWED AND WE WON'T HELP YOU FIGURE OUT WHY!!!". Specifically the section I removed which caused it to break was this...
          Dreamweaver Fluid Grid Properties
          dw-num-cols-mobile:                    5;
          dw-num-cols-tablet:                    8;
          dw-num-cols-desktop:          12;
          dw-gutter-percentage:          25;
          Inspiration from "Responsive Web Design" by Ethan Marcotte
          http://www.alistapart.com/articles/responsive-web-design
          and Golden Grid System by Joni Korpi
          http://goldengridsystem.com/

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...

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

Media query issues in fluid grid layout (take a look at this code)

how to make adjustments in specific device views without screwing everything up in other views. I know in the css designer when I click global it makes changes to all views which is great. But when I click one of the little icons at the button of the screen (like the smartphone icon or tabet etc) the changes I make in the view dont stay in that view but affect all views. So I'm coming to understand ( maybe wrongly) that those icon have no design power other than to show you what thing look like in that view. I'm starting to focus on clicking the stlye sheet dreamweaver cc created (not the boilerplate one) clicking the media query for the screen size I want to adjust and finding the selector I want to tweek (ITS RIGHT HERE THE HICKUP I'M HAVING IS AT - i CANT ADJUST IMAGES THAT I HAVE SPECIFICALLY IN THE CORRESPONDING VIEW WITHOUT SCREWING EVERYTHING EVERYWHERE UP IN THE OTHER VIEWS) Can anybody invision what I'm trying to do and what happening and give me a fix????
Idealy I would like to simply click the view icon of the screen size I want to tweak and drag handle bars to resize images and the adjustment stay only in that sceen size range, but this is not happening. This why I say that those (may wrongly I might be doing something wrong) icons have no design power other than to give you a view of things. But either way whether I can click icons and rag handle handle bars or in I have to use css designer I cant specifically work in one view without affecting all the others.
Below is css code for media queries that are in my style sheet. It might not be the cleanest bit I want you to focus on two main aspsects of the code
     1) The media queries, particularly the smartphone 480 and below. ( but all media queries if need be)
     2) In the header and in the list iteams I have images. Its these images that I'm trying to resize - but only specific changes in specific views
Take a look:
/* Mobile Layout: 480px and below. */
.gridContainer {
          margin-left: auto;
          margin-right: auto;
          width: 100%;
          padding-left: 0;
          padding-right: 0;
          clear: none;
          float: none;
#div1 {
#mainheader {
          margin-left: 0;
          position: static;
          height: auto;
          width: 100%;
#navbarone {
#navbartwo {
#listiteams {
          color: #FFFFFF;
          text-align: center;
          background-color: #9DC5D3;
#listiteamstwo {
          text-align: center;
          background-color: #9DC5D3;
          color: #FFFFFF;
#navbutton {
width: 100%;
#li1 {
width: 100%;
clear: both;
margin-left: 0;
#li2 {
width: 100%;
clear: both;
margin-left: 0;
#navbuttontwo {
width: 100%;
#li3 {
width: 100%;
clear: both;
margin-left: 0;
#li4 {
          width: 100%;
          clear: both;
          margin-left: 0;
#flads {
.zeroMargin_mobile {
margin-left: 0;
.hide_mobile {
display: none;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
          width: 100%;
          padding-left: 0;
          padding-right: 0;
          clear: none;
          float: none;
          margin-left: auto;
#div1 {
#mainheader {
          position: static;
          height: auto;
          width: 100%;
          margin-left: 0;
#navbarone {
#navbartwo {
#listiteams {
#listiteamstwo {
#navbutton {
width: 32.2033%;
#li1 {
width: 32.2033%;
clear: none;
margin-left: 0;
#li2 {
width: 32.2033%;
clear: none;
margin-left: 0;
#navbuttontwo {
width: 32.2033%;
#li3 {
width: 32.2033%;
clear: none;
margin-left: 0;
#li4 {
width: 32.2033%;
clear: none;
margin-left: 0;
#flads {
.hide_tablet {
display: none;
.zeroMargin_tablet {
margin-left: 0;
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
          width: 100%;
          max-width: 2000px;
          padding-left: 0;
          padding-right: 0;
          margin: auto;
          clear: none;
          float: none;
          margin-left: auto;
#div1 {
#mainheader {
          position: static;
          height: auto;
          width: 100%;
          margin-left: 0;
#navbarone {
#navbartwo {
#listiteams {
#listiteamstwo {
#navbutton {
width: 32.7731%;
#li1 {
width: 32.7731%;
margin-left: 0;
clear: none;
#li2 {
width: 32.7731%;
margin-left: 0;
clear: none;
#navbuttontwo {
width: 32.7731%;
#li3 {
width: 32.7731%;
margin-left: 0;
clear: none;
#li4 {
width: 32.7731%;
margin-left: 0;
clear: none;
#flags {
.zeroMargin_desktop {
margin-left: 0;
.hide_desktop {
display: none;

By default, image height and width are 100% in FluidGrid Layouts. You'll find it near the top of your CSS code.
@charset "utf-8";
img, object, embed, video {
max-width: 100%;
.ie6 img {
width:100%;
That's so they can re-scale to fit the various layouts. If you need to assign explicit height & width values to certain elements, you can override that CSS rule by using the height & width attributes in your HTML code like this.
<img src="some_image.jpg" height="xxx" width="xxx">
Or, you can give your image a class name and target that class with CSS Media Queries. For an example, copy & paste this code into a new, blank document. SaveAs test.hml and preview in browsers at different screen widths.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
/**FLUID GRID DEFAULT**/
img, object, embed, video{
max-width: 100%;
.ie6 img {
width:100%;
/* Special Rules for mobiles */
@media only screen and (max-width: 480px) {
.nav {width:320px; height:74px; }
/* Special Rules for Tablets */
@media only screen and (min-width: 482px) and (max-width: 1024px) {
.nav {width: 480px; height: 148px;}
/* Special Rules for Desktops */
@media only screen and (min-width: 1025px) and (max-width: 1230px) {
.nav {width: 1000px; height: 225px;}
</style>
</head>
<body>
<h3>This image naturally rescales to layout</h3>
<img src="http://placehold.it/1000x225" alt="some description">
<h3>This image has a .nav class & rescales to set media query break points.</h3>
<img class="nav" src="http://placehold.it/1000x225" alt="some description">
</body>
</html>
Does this make sense now?
Nancy O.

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.

CS6 Fluid Grid 960px wide

I'm just getting started with the fluid grid in CS6 but need a bit of help. I'm set up with 12 columns and the default desktop width is 1232px according to the options box. I don't want the grid to be 100% wide. In fact I want it no bigger than 960px at its max width. That works out to be approximately 78% (77.9) of 1232px. However, if I choose 78% as my width and drop in a DIV to span the whole 12 columns, it is far greater than 960px wide. What am I doing wrong and what do I need to do in order to have a starting width of as close to 960px as possible.
Any help is appreciated.

Ok, that was easy. I was trying to avoid making any changes to the default CSS file but I haven't broken anything which is good Thanks.

DW Fluid Grid Calculating wrong ?

Similar Messages

Maybe you are looking for