CSS rules in fluid grid layout?

Hello there
I been working with fluid grid layout and when i set up a page i see in the CSS panel under page.css i have 3 CSS rules for header or content CSS panel for the divs i have set up! Now if i have 3 header CSS rule do i just edit one off them or all off them please? Or is the top one you need to edit in the CSS in the panel you need to edit if just one off them?
I am using Dreamweaver CS6
Look forward to hearing from you.
Thank
Brian

See this FGLayout example. View source to see the code.
Alt-Web :: Fluid Grid Test #4
These are the style sheets I used:
Responsive layout
http://alt-web.com/FluidGrid/FluidGrid.css
My custom content styles
http://alt-web.com/FluidGrid/Content-4.css
Nancy O.

Similar Messages

CSS height property use in Fluid grid layout

Hi, I'm totally new to fluid grid layout and just got started in it. I have a div tag that has 5px height and I sucessfully applied that and seem fine only on Tablet landscape (1024x768) and Small tablet landscape (800x600), nevertheless it isn't even displaying on Mobile portrait (320x480), Mobile landscape (480x320), Small tablet portrait (600x800) and Tablet portrait (768x1024).
My coding is below
index.html
<!doctype html>




<html class="">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="fluid.grid.layout/boilerplate.css" rel="stylesheet" type="text/css">
<link href="fluid.grid.layout/style.css" rel="stylesheet" type="text/css">


<script src="fluid.grid.layout/respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1"></div>
</div>
</body>
</html>
boilerplate.css
@charset "utf-8";
* HTML5 ✰ Boilerplate
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
* Detailed information about this CSS: h5bp.com/css
* Dreamweaver modifications:
* 1. Commented out selection highlight
* 2. Removed media queries section (we add our own in a separate file)
* ==|== normalize ==========================================================
/* =============================================================================
   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
   ========================================================================== */
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
* 2. Force vertical scrollbar in non-IE
* 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 13px; line-height: 1.231; }
body, button, input, select, textarea { font-family: sans-serif; color: #222; }
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate
* Also: hot pink! (or customize the background color to match your design)
/* Dreamweaver: uncomment these if you do want to customize the selection highlight
*::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
*::selection { background: #fe57a1; color: #fff; text-shadow: none; }
/* =============================================================================
   Links
   ========================================================================== */
a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }
/* =============================================================================
   Typography
   ========================================================================== */
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* =============================================================================
   Lists
   ========================================================================== */
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
/* =============================================================================
   Embedded content
   ========================================================================== */
* 1. Improve image quality when scaled in IE7: h5bp.com/d
* 2. Remove the gap between images and borders on image containers: h5bp.com/e
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
* Correct overflow not hidden in IE9
svg:not(:root) { overflow: hidden; }
/* =============================================================================
   Figures
   ========================================================================== */
figure { margin: 0; }
/* =============================================================================
   Forms
   ========================================================================== */
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }
* 1. Correct color not inheriting in IE6/7/8/9
* 2. Correct alignment displayed oddly in IE6/7
legend { border: 0; *margin-left: -7px; padding: 0; }
* 1. Correct font-size not inheriting in all browsers
* 2. Remove margins in FF3/4 S5 Chrome
* 3. Define consistent vertical alignment display in all browsers
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
* 2. Correct inner spacing displayed oddly in IE6/7
button, input { line-height: normal; *overflow: visible; }
* Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
table button, table input { *overflow: auto; }
* 1. Display hand cursor for clickable form elements
* 2. Allow styling of clickable form elements in iOS
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
* Consistent box sizing and appearance
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
* Remove inner padding and border in FF3/4: h5bp.com/l
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
* 1. Remove default vertical scrollbar in IE6/7/8/9
* 2. Allow only vertical resizing
textarea { overflow: auto; vertical-align: top; resize: vertical; }
/* Colors for form validity */
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
/* =============================================================================
   Tables
   ========================================================================== */
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
/* ==|== primary styles =====================================================
   Author:
   ========================================================================== */
/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */
/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }
/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
@media print {
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
style.css
@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/
img, object, embed, video {
          max-width: 100%;
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
          width:100%;
          Dreamweaver Fluid Grid Properties
          dw-num-cols-mobile:                    4;
          dw-num-cols-tablet:                    8;
          dw-num-cols-desktop:          10;
          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/
/* Mobile Layout: 480px and below. */
.gridContainer {
          margin-left: auto;
          margin-right: auto;
          width: 85.5%;
          padding-left: 2.25%;
          padding-right: 2.25%;
#LayoutDiv1 {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          height:5px;
          display: block;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
          width: 97.5%;
          padding-left: 1.25%;
          padding-right: 1.25%;
#LayoutDiv1 {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          height:5px;
          display: block;
/* 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: 98%;
          max-width: 1232px;
          padding-left: 1%;
          padding-right: 1%;
          margin: auto;
#LayoutDiv1 {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          display: block;
          height:5px;
          background-color:#FBB829;
respond.min.js
/*! Respond.js v1.0.1pre: min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs */
(function(e,h){e.respond={};respond.update=function(){};respond.mediaQueriesSupported=h;if(h){return}var u=e.document,r=u.documentElement,i=[],k=[],p=[],o={},g=30,f=u.getElementsByTagName("head")[0]||r,b=f.getElementsByTagName("link"),d=[],a=function(){var B=b,w=B.length,z=0,y,x,A,v;for(;z<w;z++){y=B[z],x=y.href,A=y.media,v=y.rel&&y.rel.toLowerCase()==="stylesheet";if(!!x&&v&&!o[x]){if(y.styleSheet&&y.styleSheet.rawCssText){m(y.styleSheet.rawCssText,x,A);o[x]=true}else{if(!/^([a-zA-Z]+?:(\/\/)?)/.test(x)||x.replace(RegExp.$1,"").split("/")[0]===e.location.host){d.push({href:x,media:A})}}}}t()},t=function(){if(d.length){var v=d.shift();n(v.href,function(w){m(w,v.href,v.media);o[v.href]=true;t()})}},m=function(G,v,x){var E=G.match(/@media[^\{]+\{([^\{\}]+\{[^\}\{]+\})+/gi),H=E&&E.length||0,v=v.substring(0,v.lastIndexOf("/")),w=function(I){return I.replace(/(url$)['"]?([^\/$'"][^:\)'"]+)['"]?(\))/g,"$1"+v+"$2$3")},y=!H&&x,B=0,A,C,D,z,F;if(v.length){v+="/"}if(y){H=1}for(;B<H;B++){A=0;if(y){C=x;k.push(w(G))}else{C=E[B].match(/@media ([^\{]+)\{([\S\s]+?)$/)&&RegExp.$1;k.push(RegExp.$2&&w(RegExp.$2))}z=C.split(",");F=z.length;for(;A<F;A++){D=z[A];i.push({media:D.match(/(only\s+)?([a-zA-Z]+)(\sand)?/)&&RegExp.$2,rules:k.length-1,minw:D.match(/$min\-width:[\s]*([\s]*[0-9]+)px[\s]*$/)&&parseFloat(RegExp.$1),maxw:D.match(/$max\-width:[\s]*([\s]*[0-9]+)px[\s]*$/)&&parseFloat(RegExp.$1)})}}j()},l,q,j=function(E){var v="clientWidth",x=r[v],D=u.compatMode==="CSS1Compat"&&x||u.body[v]||x,z={},C=u.createDocumentFragment(),B=b[b.length-1],w=(new Date()).getTime();if(E&&l&&w-l<g){clearTimeout(q);q=setTimeout(j,g);return}else{l=w}for(var y in i){var F=i[y];if(!F.minw&&!F.maxw||(!F.minw||F.minw&&D>=F.minw)&&(!F.maxw||F.maxw&&D<=F.maxw)){if(!z[F.media]){z[F.media]=[]}z[F.media].push(k[F.rules])}}for(var y in p){if(p[y]&&p[y].parentNode===f){f.removeChild(p[y])}}for(var y in z){var G=u.createElement("style"),A=z[y].join("\n");G.type="text/css";G.media=y;if(G.styleSheet){G.styleSheet.cssText=A}else{G.appendChild(u.createTextNode(A))}C.appendChild(G);p.push(G)}f.insertBefore(C,B.nextSibling)},n=function(v,x){var w=c();if(!w){return}w.open("GET",v,true);w.onreadystatechange=function(){if(w.readyState!=4||w.status!=200&&w.status!=304){return}x(w.responseText)};if(w.readyState==4){return}w.send(null)},c=(function(){var v=false;try{v=new XMLHttpRequest()}catch(w){v=new ActiveXObject("Microsoft.XMLHTTP")}return function(){return v}})();a();respond.update=a;function s(){j(true)}if(e.addEventListener){e.addEventListener("resize",s,false)}else{if(e.attachEvent){e.attachEvent("onresize",s)}}})(this,(function(f){if(f.matchMedia){return true}var e,i=document,c=i.documentElement,g=c.firstElementChild||c.firstChild,h=!i.body,d=i.body||i.createElement("body"),b=i.createElement("div"),a="only all";b.id="mq-test-1";b.style.cssText="position:absolute;top:-99em";d.appendChild(b);b.innerHTML='_<style media="'+a+'"> #mq-test-1 { width: 9px; }</style>';if(h){c.insertBefore(d,g)}b.removeChild(b.firstChild);e=b.offsetWidth==9;if(h){c.removeChild(d)}else{d.removeChild(b)}return e})(this));
I really do appreciate your efforts to help me solve this problem... Thank you in advance

Height is determined by content. I can't think of a single reason to have a div height of 5px because almost nothing will fit inside that small a space without problems.
As to why it doesn't show up in other devices, you must have put that style into the Tablet CSS code instead of the default Mobile CSS code.
Fluid Grids build up from Mobile (applied to everything) with specific rules for Tablets, then Desktops.
Best advice, use Fluid Grids for layout only. Use a separate CSS file for content styles.
Hope this helps,
Nancy O.

Lost fluid grid layout

I use dreamweaver cc
I opened and created a page, that worked fine in fluid grid layout.
I then quit out of dreamweaver, then came back to the same page later.
Now when i open that page in dreamweaver cc, i no longer see it with the fluid grid layout or with the fluid grid handles on any of the divs.
I also no longer have the little button in the toolbar next to live button either.... to toggle the fluid layout on and off.
I did see one solution which says to go to view/ visual aids/ display fluid grid layouts
but this does not seem to be available in dreamweaver cc... only dreamweaver cs6.
I have the latest version of dreamweaver cc, and have set up the page correctly.
Thanks in advance to anyone that takes the time to help.

Hi Nancy,
My operating system is Windows 7, run at our health corporation, (so I can't upgrade to Windows 8 or 8.1.)
Im running Adobe Dreamweaver Creative Cloud built 6733 - the latest version as of today.
The problem I have been experiencing match up with those of many other users over the last 2 years. There's quite a few posts reporting the same type of thing that I am. Basically it's to do with the Fluid layout controls and the icon on the toolbar that first appears once you've created a new webpage controlled by the fluid layout stylesheet. These are first there, but after restarting DW they are gone.
i.e.
I create an HTML5 webpage saved as 'default.asp' and a fluid grid stylesheet named fg-styles.css.
The Fluid Grid layout controls are all there. (I am doing nothing else, no injection of code nothing.)
Then I close Dreamweaver
On reopening of Dreamweaver and all files, when looking at the default.asp file in Design view, the fluid grid hide/show icon on the toolbar and the fluid grid controls when clicking inside the fluid div no longer show.
I get this every single time, even after rebooting my computer.
The controls also strangely disappear during a session when I am adding new blocks within the fluid grid panel.
I am so close now from discontinuing using this tool and looking elsewhere for fluid grid solutions.
It seems such a powerful tool, but what use is it if it is unstable. Really, DW should not roll out such tools until they have been proven to work reliably.
Also documentation should be provided that makes clear when this tool cannot be used reliably and workaround solutions.
I have now spent a solid 10 hours on this, and created countless versions of the same page.
Admittedly at one stage I discovered that when adding the classic ASP line above my HTML5 code that this would not work after Dreamweaver saved my document as an .asp file, but even .html files still experience all kinds of bugs with this tool.
I hope this kinda explained what problems I am facing.
Thanks again for your time.
I will now move on to other fluid grid solutions, but am happy to re-look at the DW tool if there is a sure-fire way that fixes my problems.
Andreas

How can I make a part of the body of my content full width of the screen with a fluid grid layout in CSS? (In dreamweaver program)

How can I make a part of the body of my content full width of the screen with a fluid grid layout in CSS? (In dreamweaver program)
and I know it is being over-ridden by
.gridContainer {
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;

Abdelqader Alnobani wrote:
How can I make a part of the body of my content full width of the screen with a fluid grid layout in CSS? (In dreamweaver program)
and I know it is being over-ridden by
.gridContainer {
width: 88.5%;
max-width: 1232px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;
Logically a structure something like below should work BUT whether or not it will upset the FG I don't know as I wouldn't ever use it.
<div class="gridContainer">
Top Code Section Goes Here
</div>

<div id="fullWidth">
Full width section goes here
</div>

<div class="gridContainer">
Bottom Code Section Goes Here
</div>

DW6 fluid grid layout issue: writes to page instead of css file

Using DW6 (version 12, owned, build 5861) on Windows 7 64 bit.
Following tutorials and the help files to use the fluid grid layout.
Start a blank page on a new site, which inserts the starter div and new css file
Immediately save page, which also generates/saves ancillary files (js and css).
Remove inner div that's created in order to use my own (have also tried leaving the default one in place and using that)
Insert new div, within the "gridContainer clearfix" div.
Place cursor just after that new div, still inside "gridContainer clearfix" and add new "fluid grid layout div tag", new row.
Following same method, do so again.
Dreamweaver adds the generated CSS code to the actual page instead of the expected div, visibly (minified)....and everything breaks. It does *not* add the code into the CSS file from there on and the only way to have it display the div (which does not show any visual indicators since the CSS is basically lost that would do so, is to CTRL-Z to undo the last step. It undoes the CSS showing as the only content in the HTML file, and *does* show a div with the name I'd given it. If I copy/paste that generated CSS into the fluid css file *then* CTRL-Z, it looks the way it's supposed to, with drag handles, visible indentations and so on.
If I then change div widths or position, it does record those changes in the CSS file, so it appears this is only when inserting new divs after the second one that's a problem (third div inside the container is when it starts choking; none overlap).
This is repeatable, on both desktop and laptop, running the same version. I've tried saving after every div insertion, only saving at the start, code view only, split only...
I've tried searching for someone else having this issue and must not be wording the search properly, can't find anyone else seeing this. It's a weird one.
If anyone can point me to something to try so the workaround isn't needed, it would be appreciated.

OK try this workflow.
Create a new FGLayout and SAVE. This will save your CSS file with whichever name you give it.
Switch to Design View. Click on Mobile Display. Build your mobile layout first since this is what everything else is based on.
Insert a few Divs and don't worry about content. Just get the basic Div structure stacked one on top of the other like this:
<div class="gridContainer clearfix">
     <div id="div1">
          Div 1
     </div>
      <div id="div2">
          Div 2
     </div>
     <div id="div3">
          Div 3
     </div>
      <div id="div4">
          Div 4
     </div>
</div>
Hit Save and name your HTML file.   Do not edit the CSS file. DW will generate the necessary layout code for you.
Switch to Tablet Display.
Grab the right side handles to resize divs and move to row above as desired.
Save often during development.
Switch to Desktop Display and repeat.
Once your layout is built, test media queries by previewing in browsers by resizing viewport
When you are completely satisfied with your responsive layout, begin adding content and use a separate external style sheet for content styles. DO NOT EDIT boilerplate or Layout CSS files as doing so could break your layout.
Nancy O.

Insert Fluid grid layout div tag pastes CSS

I am trying to create a new fluid grid layout. I am able to insert 2 new layout divs, but after that, the "Insert Fluid grid layout div tag" fails. I am in "split" display, and the code view shows CSS instead of the HTML, and the design view shows a page of CSS code.
Control-Z always backs me up to the proper display of code and design, but the CSS file does not contain the definitions for the newly-inserted DIV.
Before insert:
After insert:

Yes. I created a new site, named as you see, for the files created as I learn the new features in CS6.
The problem I am seeing is 100% reproducable. The 1st 2 layout divs are inserted correctly, then all after that fail. After the 2nd screen shot above, a single ^Z will restore the code & display panes. I have learned that I can quickly switch into editing the CSS file, paste in the definitions for the new div (a pain, but do-able), then I can do all of the other editing, resizing, etc.
One thing I have not tried, but will, is to remove my custom key-mapping and try this in a standard workspace.

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/

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.

I'm designing my first website using Fluid Grid Layouts. CSS question

I'm designing my first website using CS6 and Fluid Grid Layouts so I need a lot of help. I realize CS6 creates something called a boilerplate css file. However, in addition to that file, do I have to create an individual external style sheet for my desktop, ipad, and smart phone pages (3 separate style sheets) or should I have only one external style sheet for everything?
Or this is there another recommended way to use Fluid Grid Layouts?

FluidGrid Layouts creates a boilerplate.css file, a respond.js file & a Fluid.css file for you -- you name it whatever you like. I like to call mine Fluid.css so I remember what it is.
Fluid.css contains mobile first -- upon which all others are based. Inside, CSS Media queries, you'll find code for tablet and later on desktop. So one stylesheet generated by DW covers all 3.
TIPS:
FluidGrids are very temperamental. Do not tamper with boilerplate.css or Fluid.css files. Instead create a separate external style sheet for your typography & other custom content styles.
Build mobile first, then tablet and finally desktop.
Keep your designs simple and uncluttered.
Don't worry about content until you get the layout perfected.
Have fun with it . You'll probably have to start over a few times before you get what you want.
Nancy O.

CSS Transitions Fluid Grid Layout Dreamweaver Cs6 'stops working'

I am unable to use the CSS Transisions panel at all in Fluid Grids Layout.
I open the panel but when I select the + to add a transition, the program crashes.
This is my second website, the same happened when building my first website, but I did without as I could not get a solution (about 18 months ago).
I need it on this website.
Some people in Adobe support have my files but can't seem to find a problem. I have Windows 8 on a powerful computer.
We've tested CSS Transitions on a brand new Fluid Grid Layouts page and it works.
But never for a page I have content in.
I began seeking help on this about a month ago and now I'm really being held up.
I'm disappointed and frustrated that Adobe isn't being more pro-active in finding the solution for their customer.
I can't email customer service to flag my problem, I am reliant on people who don't get back to me in a timely manner.
What can I do as this Adobe product has not been working for me and I am relying on it.
Thank you

Add a link to jQuery's Latest Library to your document <head> tags.
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
Add the jQuery function code to <script> tags in your document. I typically put them right above the closing </body> tag.
<script>
$(document).ready(function () {
    $("#one").click(function () {
        $("#one-a").toggle('slow');
    $("#two").click(function () {
        $("#two-a").toggle('slow');
    $("#three").click(function () {
        $("#three-a").toggle('slow');
</script>
</body>
As to why DW is closing you down, I don't know. That's not an expected behavior.
Without seeing your code, I'm going to guess that your CSS transition logic is incorrect or you're attempting to add transitions to the FluidGridLayout.css which is never a good idea. Always use a separate, external style sheet for your manually added content styles. Changes to either boilerplate.css or the temperamental FluidGridLayout.css files can result in problems.
Nancy O.

How do I get my Fluid Grid Layout page to resizes from portrait to landscape for iPhones?

Starting in portrait on my iPhone 4, the fluid grid layout page does not resize when I turn to landscape. After I refresh / resize to fit the page on landscape and then turn the iPhone to portrait, the page resizes just fine. Everything seems to be working just fine on the desktop, ignoring IE. Could it be my media query tags?
If anyone knows a solution, it would be much appreciated. Thanks.
Here is my test page: http://www.bedroomandmore.com/1_b_fluidGrid.html
Here are my media query tags (the first set of rules does not have the media query tag and becomes the default):
@media only screen and (max-device-width: 480px) and (orientation : landscape) {
@media only screen and (min-width: 481px) {
@media only screen and (min-width: 769px) {
Here is most of my media query CSS:
@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/
img, object, embed, video {
          max-width: 100%;
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
          width:100%;
/* Mobile Layout: 480px and below.(smartphone portrait) */
.gridContainer {
          width: 95.4184%;
          padding-left: 0.5907%;
          padding-right: 0.5907%;
#header {
          clear: both;
          float: left;
          display: block;
          margin-left: 0%;
          width: 72%;
          max-height: 0%;
          display: -moz-box; /* Firefox */
          display: -webkit-box; /* Safari and Chrome */
          display: box;
          border: none;
          top: auto;
          padding-top: 0.25em;
#menuHorizontal {
          clear: both;
          float: left;
          width: 118%;
          height:100%;
          margin-left: auto;
          position:relative;
          top:-1em;
          display: block;
#slides {
          clear: both;
          float: left;
          margin-left: 0.1em;
          width: 119%;
          position: relative;
          top: -1em;
          display: block;
                    /*Slides container: Important: Use position:relative; with top:-1em; together to position div.
                              Set the width of your slides container
                              Set to    display: none     to prevent content flash*/
.slides_container {
          clear: both;
          width: 100%;
          display: block;
                    /*Each slide: Important:
                              Set the width of your slides
                              If height not specified height will be set by the slide content
                              Set to     display: block     for original setting
                              slide_container is container size
                              slides_container div set the size of the image inside--adjust to fit image in it so it is not cropped*/
.slides_container div {
          clear: both;
          width: 69%;
          display: block;
          /* Mobile Layout: 480px. (smartphone landscape)
                              Inherits styles from Mobile Layout 480px.
                              Set to clear:none; to allow div to shift up
                              Or set to clear:both; to take a whole row of the screen*/
@media only screen and (max-device-width: 480px) and (orientation : landscape) {
.gridContainer {
          width: 95.4184%;
          padding-left: 0.7907%;
          padding-right: 0.7907%;
#header {
          clear:both;
          float: left;
          display: block;
          margin-left: auto;
          width:100%;
          display: -moz-box; /* Firefox */
          display: -webkit-box; /* Safari and Chrome */
          display: box;
          border: none;
#menuHorizontal {
          clear:both;
          float: left;
          width: 110%;
          margin-left:auto;
          display: block;
#slides {
          clear:both;
          float: left;
          margin-left: 0%;
          width: 68%;
          display: block;
                    /*Slides container: Important:
                              Set the width of your slides container
                              Set to    display: none     to prevent content flash*/
.slides_container {
          clear:both;
          float: left;
          width: 100%;
          display: block;
                    /*Each slide: Important:
                              Set the width of your slides
                              If height not specified height will be set by the slide content
                              Set to     display: block     for original setting*/
.slides_container div {
          clear:both;
          width:69%;
          display: block;
                    /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout.
                              Set to clear:none; to allow div to shift up
                              Or set to clear:both; to take a whole row of the screen*/
@media only screen and (min-width: 481px) {
.gridContainer {
          width: 95.9456%;
          padding-left: 0.5271%;
          padding-right: 0.5271%;
#header {
          clear:both;
          float: left;
          display: block;
          margin-left: auto;
          width: 100%;
          display: -moz-box; /* Firefox */
          display: -webkit-box; /* Safari and Chrome */
          display: box;
          border: none;
#menuHorizontal {
          clear:both;
          float: left;
          margin-left:auto;
          display: block;
#slides {
          clear:both;
          float: left;
          margin-left: 0%;
          width: 70%;
          display: block;
                    /*Slides container: Important:
                              Set the width of your slides container
                              Set to    display: none     to prevent content flash*/
.slides_container {
          clear:both;
          float: left;
          width: 100%;
          display: block;
                    /*Each slide: Important:
                              Set the width of your slides
                              If height not specified height will be set by the slide content
                              Set to     display: block     for original setting*/
.slides_container div {
          width: 100%;
          display: block;

I found the problem. There is a bug in Safari for iPhone 4. Use code to fix found at http://stackoverflow.com/a/6379407

How To Center Fluid Grid Layout Div Tag

Hello I am remaking my webiste and am new to fluid grid layouts. I am trying to center the images you will see in my website into the middle.
I can use pixels to center it but it will not be centered for all screen resolutions. What do I have to change in the css rule defintion to center it all out or simply move it to the side?
WEBISTE: http://auto-republic.com
CODE: http://pastebin.com/LujvaGek
Thanks in advance!

In HTML Code View, line 53 - 56, replace what you have now with this:
<div class="gridContainer clearfix">
     <div id="LayoutDiv1">
     <p>LAYOUTDIV1 CONTENT GOES HERE<p>
     </div>
     <div id="LayoutDiv2">
     <p>LAYOUTDIV2 CONTENT GOES HERE</p>
     <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('wrecker','','images/wreckerservice/wreckerservice2.gif',1)"><img id="wrecker" src="images/wreckerservice/wreckerservice2.gif"></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('facebook','','images/facebook/facebook2.gif',1)"><img id="facebook" src="http://auto-republic.com/images/facebook/facebook1.gif"></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('askaquestion','','images/askusaquestion/askaquestion2.gif',1)"><img id="askaquestion" src="http://auto-republic.com/images/askusaquestion/askaquestion1.gif"></a>
     </div>
Nancy O.

Margins, Padding, no effect in "multiple columns" Fluid Grid Layout

Mac Pro
Adobe DW CS6
Testing URL: http://0343be5.netsolhost.com/satgraphics_02/index.html
First time using multiple columns in fluid grid layout----------------------------------------
<style>
.newspaper
          column-count: 2;
          column-gap: normal;
          column-rule: 2px outset #000000;
          /* Firefox */
          -moz-column-count: 2;
          -moz-column-gap: normal;
          -moz-column-rule: 2px outset #000000;
          /* Safari and Chrome */
          -webkit-column-count: 2;
          -webkit-column-gap: normal;
          -webkit-column-rule: 2px outset #000000;
Text goes to border of container, and I've run out of ideas on margins and padding options on not only the .newspaper <style> but using its container, LayOutDiv1. All appears good in "Live" view, text easily readable, but Safari, FireFox, Opera ignores css. When viewed with padding/margins input, it just shifts the div to right, outside grid.
Indent first line in paragraph works well, wrapping image properly, and column flow smooth.
Set padding in p,h2, h3 at 10px but no results visable. (Retset to "0" padding.)
On laptop PC…can't seem to access live testing URL so unsure of IE 10 operational functionality.
Thank You...

Testing URL: http://0343be5.netsolhost.com/satgraphics_02/index.htmlYes, very helpful in furthering my overall understanding; however, I remain perplexed at being unable to keep div#column.newspaper from moving to right, thus negating the padding and text abuts right margin viewed in browsers.
(Appearance when viewing in "layout backgrounds' shows equal padding shift to right to edge of div.gridContainer.clearfix box.)
Base problem is that the borders on outside of layoutDiv1 (or the column itself) continues to be pusher right, thus misaligning outside borders of three seperate divs; header, menu, and LayoutDiv1.
Am i missing something in how to contain without borders (full width) being overrun. Or, maybe improper insertion of padding rules?
Testing URL:     http://0343be5.netsolhost.com/satgraphics_02/index.html
Thank You.

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.

Text size fluid grid layout

I am using Dreamweaver cs6 fluid grid layout. Is there a way to change the text size for the different layouts? For example I would like the header text to be 16px on the desktop but only 12px on the mobile.
Thank you!

This makes sense although I have not been about to make it work. Should each of these be inserted into the corresonding device section of the css? Thank you for your help!
/* Mobile Layout: 480px and below. */
/*Special Rules for Mobiles*/
@media only screen and (max-width: 480px) {
          body {font-size: 75%}
.gridContainer {
          margin-left: auto;
          margin-right: auto;
          width: 88.626%;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
/*Special Rules for Tablets*/
@media only screen and (min-width: 481px) {
          body{font size: 100%;}
@media only screen and (min-width: 481px) {
.gridContainer {
          width: 91.4836%;
          padding-left: 0.7581%;
          padding-right: 0.7581%;

CSS rules in fluid grid layout?

Similar Messages

Maybe you are looking for