Dreamweaver sc6 fluid grid layouts and nivo slider

I have the nivo slider pretty much set up on my home page, with one exception. I have a sidebar to the right of the slider and the slider bullets end up above the sidebar as opposed to below and centered below the slider. If I remove the sidebar and set the slider div to the full width of the page, then the bullets end up where the should be (centered and below the slider).
What do I have to do so that the bullets end up centered and below the slider when I have a sidebar to the right of the slider?
Thanks.

The site is not live so I don't know how to post a url for it for viewing. I inserted a print screen of the preivew in internet explorer from dreamweaver (I hope this helps), you can at least see the bullets for the slider above the sidebar. Also, the source code for the page is below. If this is not enough please let me know what else I can include that might allow someone to help me. Thanks.
<!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="boilerplate.css" rel="stylesheet" type="text/css">
<link href="css/layout.css" rel="stylesheet" type="text/css">
<link href="nivo-slider.css" rel="stylesheet" type="text/css">


<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="respond.min.js"></script>
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="slider/themes/default/default.css" type="text/css" media="screen" />
<script src="jquery.nivo.slider.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
<style type="text/css">
body {
background-image: url(images/Gradient%20Background%20with%20highlights.png);
background-repeat: no-repeat;
background-color: #000000;
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
</head>
<body bgcolor="#404040">
<div class="gridContainer clearfix">
<div id="header">
    <p style="background-position: center center; background-repeat: no-repeat; width: 850px; height: 115px; background-image: url(images/Montanaro%20Poker%20Logo%20Transparent%20Background%203.png); text-align: center; font-size: 40px; color: #ffffff; font-weight: bold;"></div>
<div id="menu">
    <table width="979" border="1" cellpadding="0" cellspacing="0">
      <tr>
        <td><ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a href="#">HOME</a></li>
          <li><a href="html/rules.html">RULES</a></li>
          <li><a href="#">TOURNAMENT STRUCTURE</a></li>
          <li><a href="#">LEAGUE EVENTS</a></li>
          <li><a href="#">STANDINGS</a></li>
          <li><a href="#">POKER FORUM</a></li>
          <li><a href="#">R.S.V.P.</a></li>
          <li><a href="#">CUSTOM TABLES</a></li>
        </ul></td>
      </tr>
    </table>
</div>
<div id="wrapper">
<div class="slider-wrapper theme-default">
      <div id="slider">
          <img src="slider/images/nemo.jpg" title="nemo image">
          <img src="slider/images/toystory.jpg" title=toystory image">
          <img src="slider/images/up.jpg" title="up image">
          <img src="slider/images/walle.jpg" title="#htmlcaption">
   </div>
    </div>
   <div id="htmlcaption" class="nivo-html-caption">
       <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>
   </div>
    <script type="text/javascript">
    $(window).load(function() {
       $('#slider').nivoSlider();
    </script>
</div>
<div id="sidebar">
    <form style="text-align:center;font-size:18px;color:#000000;font-weight:bold;line-height:35pt;" >UPCOMING EVENTS</form>
<p style="text-align:center;font-weight:bold;">LAST TOURNAMENT OF THE YEAR + <br>
      WIN A FREE SEAT IN THE 2013 POKER LEAGUE
    </p>
     <p><a href="html/rsvp.html">Saturday, December 8th 8:00pm</a>
    <p style="text-align:center;font-weight:bold;">FIRST LEAGUE EVENT
     </strong></p>
     <p><a href="html/rsvp.html">Saturday, January 12th 8:00pm</a>
        </div>
<div id="body">
<p style="font-size:28px;color:#CC0000;font-weight:bold;">HOME</p>
    <p>Montanaro Poker has evolved over the years to provide a fun, friendly atmosphere for friends/family to play in a social poker game. It is by inviatation only. It is not a public card room. The house will in no way ever take a rake. All buy-inswill be paid out to the winners of each event. All league fee's will be paid out to the Player of the Year winners.
    </p>
    <p>Small snacks (pretzels, popcorn, candy...) and drinks (water and soda) will generally be provided. Any player that wishes something else is welcome to bring their own, however, due to the friendly nature of the game, everyone usually shares. Also, no food or drink is allowed on the actual poker table.
    </p>
    <p>While we maintain a fun game, we try to maintiain a certain level of professionalism to each event. Please review the rules (located at the top of the page and in the poker room) before coming to an event or sitting down to the table. We like everyone to be on as level of a playing field as possible.
    </p>
    <p>We love hanging out with friends/family and tossing in a little competition. We are glad that you can join us and wish you the best of luck! (just not too much).
    </p>
</div>
<div id="footer"></div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

Similar Messages

Trouble in Dreamweaver with fluid grid layouts

Hi! This is my first time posting here. I have been having intermittent problems in the fluid grid layouts. The sizing handles that are supposed to be there in a fluid element/div sometimes disappear along with the duplication icon and the arrow that moves a div/element up to the previous row. For instance I am working on a lesson in my online class for Dreamweaver that is asking me to style an unordered list for a menu. I want to make it into a horizontal menu where each item is 3 columns wide. Without the handles I cannot size the items in the list nor "bump them up" next to each other. Does this make any sense? Sometimes, they are there and sometimes not. Mostly not there. This is very frustrating! Can someone offer any solutions?
Paula Jo Nyman

I have the same Issue, I have been trying to get it resolved for a while now, but the live customer support is terrible, I feel like they don't read the initial question and it frustrates me how I am constantly asked questions about my question that is CLEARLY covered in the initial Question. I Have been on hold on the phone for some time now, if I get this resolved I will post an answer. It does disgust me how adobe are slowly parring the technical support over to its users.

CS6, Fluid Grid Layouts, and Spry Menu - sizing issues

Hi. I am a full-fledged nubie to Dreamweaver, so please forgive my ignorance. But I really need to build a new site, and I really like DW so far (much better than what I was using).
I am building a site with fluid grid layouts so it is properly sized across all decices. I have inserted a spry horizontal menu as my primary navigation. I got the menu to look like I want it as far as formatting goes.
But when I view the page live and change the size of my browser, the menu wraps around to the next row, even with fairly large browser windows.
Can anyone tell me how to scale the spry menu bar the same as an image does in a fluid grid layout?
Thanks,
Steven

Don't use Spry Menus. #1 they're not Responsive. #2 They don't work all that well on Touch Screen devices. #3 Adobe abandoned the Spry framework last year. Is that enough to convince you? See links below for alternatives.
Pop-Menu Magic2 by PVII (commercial DW Extension)
http://www.projectseven.com/products/menusystems/pmm2/index.htm
jQuery Superfish
http://users.tpg.com.au/j_birch/plugins/superfish/
jQuery Mega Menus http://www.javascriptkit.com/script/script2/jkmegamenu.shtml
CSS3 Dropdown Menus
http://www.red-team-design.com/css3-dropdown-menu
10 Responsive Menus
http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/
Nancy O.

Need help with Fluid Grid Layout and variable column balance.

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

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

Dreamweaver CS6 Fluid Grid Layout

I fear there may not be a solution to this issue! I have placed several hotspots on an image in a Fluid Grid Layout div in DW CS6 and the problem is quite straightforward. Whilst the "image" reduces perfectly when viewed in Tablet and Smartphone screens the "hotspots" remain in the same position they were at in the Desktop view! The result is the same irrespective of which view you set the hotspots in. Is there a solution to this problem or is it insurmountable?

OK. Let's just paste the script into your HTML page and see if that works.
Open your page in code view.
Replace this:

<script src="fancybox/maphighlight.js"></script>

With all of this:

<script>
// map highlight JavaScript Document
(function(F){var B,C,I,L,K,H,E,G,A,J;B=document.namespaces;has_canvas=!!document.createElement("canvas").getContext;if(!(has_canvas||B)){F.fn.maphilight=function(){return this};return }if(has_canvas){E=function(M){return Math.max(0,Math.min(parseInt(M,16),255))};G=function(M,N){return"rgba("+E(M.substr(0,2))+","+E(M.substr(2,2))+","+E(M.substr(4,2))+","+N+")"};C=function(M){var N=F('<canvas style="width:'+M.width+"px;height:"+M.height+'px;"></canvas>').get(0);N.getContext("2d").clearRect(0,0,N.width,N.height);return N};I=function(P,M,S,O,N){var R,Q=P.getContext("2d");Q.beginPath();if(M=="rect"){Q.rect(S[0],S[1],S[2]-S[0],S[3]-S[1])}else{if(M=="poly"){Q.moveTo(S[0],S[1]);for(R=2;R<S.length;R+=2){Q.lineTo(S[R],S[R+1])}}else{if(M=="circ"){Q.arc(S[0],S[1],S[2],0,Math.PI*2,false)}}}Q.closePath();if(O.fill){Q.fillStyle=G(O.fillColor,O.fillOpacity);Q.fill()}if(O.stroke){Q.strokeStyle=G(O.strokeColor,O.strokeOpacity);Q.lineWidth=O.strokeWidth;Q.stroke()}if(O.fade){F(P).css("opacity",0).animate({opacity:1},100)}};L=function(M){M.getContext("2d").clearRect(0,0,M.width,M.height)}}else{C=function(M){return F('<var style="zoom:1;overflow:hidden;display:block;width:'+M.width+"px;height:"+M.height+'px;"></var>').get(0)};I=function(N,Q,R,U,M){var S,T,O,P;S='<v:fill color="#'+U.fillColor+'" opacity="'+(U.fill?U.fillOpacity:0)+'" />';T=(U.stroke?'strokeweight="'+U.strokeWidth+'" stroked="t" strokecolor="#'+U.strokeColor+'"':'stroked="f"');O='<v:stroke opacity="'+U.strokeOpacity+'"/>';if(Q=="rect"){P=F('<v:rect name="'+M+'" filled="t" '+T+' style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:'+R[0]+"px;top:"+R[1]+"px;width:"+(R[2]-R[0])+"px;height:"+(R[3]-R[1])+'px;"></v:rect>')}else{if(Q=="poly"){P=F('<v:shape name="'+M+'" filled="t" '+T+' coordorigin="0,0" coordsize="'+N.width+","+N.height+'" path="m '+R[0]+","+R[1]+" l "+R.join(",")+' x e" style="zoom:1;margin:0;padding:0;display:block;position:absolute;top:0px;left:0px;width:'+N.width+"px;height:"+N.height+'px;"></v:shape>')}else{if(Q=="circ"){P=F('<v:oval name="'+M+'" filled="t" '+T+' style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:'+(R[0]-R[2])+"px;top:"+(R[1]-R[2])+"px;width:"+(R[2]*2)+"px;height:"+(R[2]*2)+'px;"></v:oval>')}}}P.get(0).innerHTML=S+O;F(N).append(P)};L=function(M){F(M).find("[name=highlighted]").remove()}}K=function(N){var M,O=N.getAttribute("coords").split(",");for(M=0;M<O.length;M++){O[M]=parseFloat(O[M])}return[N.getAttribute("shape").toLowerCase().substr(0,4),O]};J=function(O,N){var M=F(O);return F.extend({},N,F.metadata?M.metadata():false,M.data("maphilight"))};A=function(M){if(!M.complete){return false}if(typeof M.naturalWidth!="undefined"&&M.naturalWidth==0){return false}return true};H={position:"absolute",left:0,top:0,padding:0,border:0};var D=false;F.fn.maphilight=function(O){O=F.extend({},F.fn.maphilight.defaults,O);if(!has_canvas&&F.browser.msie&&!D){document.namespaces.add("v","urn:schemas-microsoft-com:vml");var N=document.createStyleSheet();var M=["shape","rect","oval","circ","fill","stroke","imagedata","group","textbox"];F.each(M,function(){N.addRule("v\\:"+this,"behavior: url(#default#VML); antialias:true")});D=true}return this.each(function(){var U,R,Y,Q,T,V,X,S,W;U=F(this);if(!A(this)){return window.setTimeout(function(){U.maphilight(O)},200)}Y=F.extend({},O,F.metadata?U.metadata():false,U.data("maphilight"));W=U.get(0).getAttribute("usemap");Q=F('map[name="'+W.substr(1)+'"]');if(!(U.is("img")&&W&&Q.size()>0)){return }if(U.hasClass("maphilighted")){var P=U.parent();U.insertBefore(P);P.remove();F(Q).unbind(".maphilight").find("area[coords]").unbind(".maphilight")}R=F("<div></div>").css({display:"block",background:'url("'+this.src+'")',position:"relative",padding:0,width:this.width,height:this.height});if(Y.wrapClass){if(Y.wrapClass===true){R.addClass(F(this).attr("class"))}else{R.addClass(Y.wrapClass)}}U.before(R).css("opacity",0).css(H).remove();if(F.browser.msie){U.css("filter","Alpha(opacity=0)")}R.append(U);T=C(this);F(T).css(H);T.height=this.height;T.width=this.width;X=function(c){var a,b;b=J(this,Y);if(!b.neverOn&&!b.alwaysOn){a=K(this);I(T,a[0],a[1],b,"highlighted");if(b.groupBy){var Z;if(/^[a-zA-Z][-a-zA-Z]+$/.test(b.groupBy)){Z=Q.find("area["+b.groupBy+'="'+F(this).attr(b.groupBy)+'"]')}else{Z=Q.find(b.groupBy)}var d=this;Z.each(function(){if(this!=d){var f=J(this,Y);if(!f.neverOn&&!f.alwaysOn){var e=K(this);I(T,e[0],e[1],f,"highlighted")}}})}if(!has_canvas){F(T).append("<v:rect></v:rect>")}}};F(Q).bind("alwaysOn.maphilight",function(){if(V){L(V)}if(!has_canvas){F(T).empty()}F(Q).find("area[coords]").each(function(){var Z,a;a=J(this,Y);if(a.alwaysOn){if(!V&&has_canvas){V=C(U.get());F(V).css(H);V.width=U.width();V.height=U.height();U.before(V)}a.fade=a.alwaysOnFade;Z=K(this);if(has_canvas){I(V,Z[0],Z[1],a,"")}else{I(T,Z[0],Z[1],a,"")}}})});F(Q).trigger("alwaysOn.maphilight").find("area[coords]").bind("mouseover.maphilight",X).bind("mouseout.maphilight",function(Z){L(T)});U.before(T);U.addClass("maphilighted")})};F.fn.maphilight.defaults={fill:true,fillColor:"00CC00",fillOpacity:0.3,stroke:true,strokeColor:"99FF33",strokeOpacity:0.5,strokeWidth:2,fade:true,alwaysOn:false,neverOn:false,groupBy:false,wrapClass:true}})(jQuery);
</script>

Save. Upload to server.
Nancy O.

Footer text-alignment in fluid grid layout and another color in white space, not the body

I'm working in a fluit grid layout. Everythings works almost perfekt. Accept for de alignment in Opera mini. Mini works not with %. So it must be padding, line-height and something else. But then the footer does not stick.
In Opera mini
If i want the footer to stick to for example the bottom. I'm may not use padding in de footer.
De <p> i used for alignment in from the text. Now my footer must have a alignment in the middle of the footer (center). With padding in footer, it wil work, but then my footer will not stick to the bottom anymore.
and i have also another question, about the white spaces in de fluid grid. I don't want to give the header, body, footer another color. But that outside of my website.
With a normal website you give the html and the body grey and the content white. But if i do this with the fluid grid. The content because grey. Is there also a code for.
This is what it must be. It is a example, not for real. But i really want to know the code for it.

I found the wright code for the footer. Thanks a lot. I'm happy.
I'm also searching for a code for max-height. For example one page i have less text, so the page is not filled to the bottom. I want for designing reasons this. So the page is always fitt from header to footer.
It must not scrolled. Just complete for the desktop-computer and laptop. Is there a code for. Because there is already internet-tv and that are big-screens. It must be for all the browser also ie7, ie 6, opera, safari, chrome and more.

How to get 100% width in fluid grid layout CC

I'm currently getting to grips with dreamweaver's fluid grid layout and cant seem to get a div to go the full 100% width across the screen. Ive created a div outside of the grid container as a non fluid div, and entered in the CSS myself in code view since Dreamweaver doesnt seem to allow you to add a class or ID to non fluid elements in design view. I have done this and all though i thought i had achieved success i noticed when looking closely in live view and when previewed in chrome that there is still a tiny gap between the div and the edge of the screen. Its very small, but its definitely there. Ive enetered width to be 100% and its definitely not simply 100% width of the grid container as its wider. I just cant account for the tiny gap which seems to be about 1 pixel wide. Any ideas whats causing this gap?

Depending on your project goals, there are plenty of other Responsive Frameworks you can use.
Foundation Zurb
http://foundation.zurb.com/templates.php
Skeleton Boilerplate
http://www.getskeleton.com/
Initializr (HTML5 Boilerplate, Responsive or Bootstrap)
http://www.initializr.com/
DMX Zone's FREE Bootstrap extension for DW
http://www.dmxzone.com/go/21759/dmxzone-bootstrap/
Project Seven's Page Packs (Commercial CSS Templates)
http://www.projectseven.com/products/templates/index.htm
Adobe Edge Reflow
http://tv.adobe.com/watch/adobe-edge-reflow/introduction-to-reflow/
PS. I don't work for Adobe. I'm just a product user like you.
Nancy O.

Fluid Grid Layout JavaScript Bug?

I've been playing with Dreamweaver's Fluid Grid Layout, and it's going better than I expected - easier than I thought.
At the moment, I have one odd problem, though. If I insert an anchor - like #TopPage - then link to that anchor...[a href="#TopPage">Top of Page</a>]...it doesn't work.
Actually, it does work if I manually type in the link, like mysite.com/People#TopPage. But if I put the cursor over a link and click it, the URL in the browser window doesn't change. I get the same results in both Chrome and Safari.
The weird thing is that if I click a link to a different web page, then it does work - but only in Chrome. If I click a link in Safari, the URL changes in the browser window, but the new page doesn't load.
It looks like the culprit is this file - jquery-mobile/jquery-1.6.4.min.js. If I delete it, the links work fine.
(I'm linked to two other JS files -
respond.min.js and jquery-mobile/jquery.mobile-1.0.min.js, but they don't appear to be causing any problems.)
Does anyone have any idea what's going on here?

"Could be an old JS."
That's weird; on a whim, I created a new fluid grid layout and discovered it's linked to just one JavaScript file - respond.min.js
I'm not sure how I picked up the other JS links, unless it was when I was trying to figure out how to insert a JS widget. Anyway, I deleted the other two JS links, and it works fine now.
Thanks.

How to edit fluid grid layout in Dreamweaver CS6

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

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

Dreamweaver Fluid Grid Layout

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

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

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

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

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

Background images in fluid grid layouts Dreamweaver CS6

How can I get a background image png or jpg original size 1040w by 840h to scale down in the tablet and mobile layouts in Dreamweaver CS6 fluid grid layout?

Adding one of these in your CSS should do the trick...
background-size:contain;
or
background-size:cover;
Depending on the layout of your background image, one may work better than the other.

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.

Fluid Grid Layout Alignment Issue

I'm using Dreamweaver CC Fluid Grid Layout. This is my first time using Dreamweaver, (and first time posting to Adobe Community) so I don't have a ton of experience. Somehow, the whole body of all my pages has been aligned left and I can't find anywhere in the CSS or the HTML of the individual pages that would make it do so. I even tried inserting a body: align: center in the CSS and also in the HTML of each page and it just won't respond. Does anyone have any ideas? I'd really REALLY appeciate some help with this because I'm totally at a loss. Below is my CSS and the HTML for my index.html .
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:          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 {
          clear: both;
          margin-left: 0;
          width: 100%;
          display: block;
          color: #FFFFFF;
          font-family: source-sans-pro;
          font-style: normal;
          font-weight: 200;
          float: left;
.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;
body {align-content:center}
#top {
          margin-left: auto;
          margin-right: auto;
          text-align: center;
          font-family: source-sans-pro;
          font-style: normal;
          font-weight: 600;
#top {
          background-color: #1f1f1f;
#mainnav {
          background-color:#1F1F1F
#menuSystem {
.menuItem {
          margin-top: 9px;
          margin-bottom: 2px;
          padding-top: 2px;
          padding-bottom: 2px;
          text-align: center;
          color: #FFFFFF;
          background-color: #1f1f1f;
          width: 100%;
          clear: both;
          margin-left: 0;
          padding-left: 0px;
          -webkit-box-sizing: content-box;
          -moz-box-sizing: content-box;
          box-sizing: content-box;
          letter-spacing: 2pt;
          text-transform: uppercase;
.gridContainer.clearfix #top h1 {
          color: #FFFFFF;
          font-family: fredericka-the-great;
          font-style: normal;
          font-weight: 400;
          text-align: center;
          text-transform: uppercase;
          letter-spacing: 5pt;
#hero {
h2 {
          font-family: source-sans-pro;
          font-style: normal;
          font-weight: 200;
          text-align: center;
          margin-right: 0%;
          margin-top: 10%;
          text-decoration: overline;
          color: #FFFFFF;
#footer {
          background-color: #1F1F1F;
          color: #FFFFFF;
          text-align: left;
#wrapper {
          background-color: #2D2D2D;
          font-family: source-sans-pro;
          position: static;
          display: inline;
#childpageimage {
          width: 59%;
          padding-top: 0px;
          padding-bottom: 0px;
          padding-right: 2px;
#content2 {
          color: #FFFFFF;
          font-family: source-sans-pro;
          font-style: normal;
          font-weight: 400;
          text-align: left;
          text-indent: 0px;
          padding-left: 10px;
          padding-right: 10px;
          width: 100%;
          clear: both;
          margin-left: 0;
          float: left;
contentgallery {
          color:#FFFFFF;
table {
          color: #FFFFFF;
          font-family:source-sans-pro;
#childpageimage2 img {
          width: 50%;
          float: left;
          top: 0px;
          padding-top: 5px;
#content3 {
          color: #FFFFFF;
          font-family: source-sans-pro;
          font-style: normal;
          font-weight: 200;
          text-align: left;
          padding-left: 10px;
          padding-right: 10px;
#contact {
          width: 100%;
          clear: both;
          margin-left: 0;
          float: right;
#contenttitle {
          width: 100%;
          color: #FFFFFF;
          text-decoration: overline;
body {align-content:center}
#content {
          width: 100%;
          clear: both;
          margin-left: 0;
          color: #FFFFFF;
          font-family: source-sans-pro;
          font-style: normal;
          font-weight: 200;
.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: 90.675%;
          padding-left: 1.1625%;
          padding-right: 1.1625%;
          clear: none;
          float: none;
          margin-left: auto;
a {
          color:#FFFFFF;
          text-decoration:none;
a:hover {color:#843F93;
#top {
#mainnav {
#menuSystem {
.menuItem {
width: 23.0769%;
clear: none;
margin-left: 2.5641%;
#hero {
#footer {
#wrapper {
position: static;
#childpageimage {
width: 100%;
#content2 {
width: 100%;
clear: both;
margin-left: 0;
#content3 {
#contact {
          width: 10.2564%;
          clear: both;
          margin-left: 0;
#contenttitle {
width: 100%;
#content {
width: 100%;
clear: both;
margin-left: 0;
.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: 88.5%;
          max-width: 1232px;
          padding-left: 0.75%;
          padding-right: 0.75%;
          margin: auto;
          clear: none;
          float: left;
          margin-left: auto;
#top {
#mainnav {
#menuSystem {
.menuItem {
          width: 23.7288%;
          margin-left: 1.6949%;
          clear: none;
#hero {
#footer {
#wrapper {
          position: relative;
          height: 0%;
#childpageimage {
          width: 49.1525%;
#content2 {
          width: 57.6271%;
          font-size: large;
          margin-left: 1.6949%;
          clear: none;
#content3 {
#contact {
          width: 6.7796%;
          margin-left: 1.6949%;
          clear: none;
#contenttitle {
width: 32.2033%;
#content {
width: 40.6779%;
margin-left: 1.6949%;
clear: none;
.zeroMargin_desktop {
margin-left: 0;
.hide_desktop {
display: none;
index.html
<!doctype html>




<html class="">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kate Farrow</title>
<style type="text/css">
body {background-color:#1F1F1F;} </style>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="fluidgrid.css" rel="stylesheet" type="text/css">


<script src="respond.min.js"></script>
<script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/source-sans-pro:n2,n6,n4:default;fredericka-the-great:n4:default. js" type="text/javascript"></script>
</head>
<body>
<div class="gridContainer clearfix"><div id="wrapper" class="fluid">
<header id="top" class="fluid"><aside id="contact" class="fluid">
    <div align="center"><a href="http://www.linkedin.com/in/farrowkate" style="text-decoration:none;"><span style="font: 80% Arial,sans-serif; color:#0783B6;"><img src="http://s.c.lnkd.licdn.com/scds/common/u/img/webpromo/btn_in_20x15.png" width="40" height="30" alt="View Kate Farrow's LinkedIn profile" style="vertical-align:middle" border="0"></span></a></div>
</aside>
    <h1 align="center">Kate Farrow</h1>
    <nav id="mainnav" class="fluid">
      <div align="center">
        <ul id="menuSystem" class="fluid fluidList">
          <li class="fluid menuItem zeroMargin_desktop zeroMargin_tablet"><a href="index1.html">Home</a></li>
          <li class="fluid menuItem"><a href="about.html">About</a></li>
          <li class="fluid menuItem"><a href="work.html">Work</a></li>
          <li class="fluid menuItem"><a href="resume.html">ResumÉ</a></li>
        </ul>
      </div>
    </nav>
</header><div id="hero" class="fluid"><img src="140210_Kate_044.jpg" alt=""/></div>
<div id="contenttitle" class="fluid">
    <h2>Who am I?</h2>
</div>
<article id="content2" class="fluid">
    <p>My name is <strong>Kate Farrow</strong>. </p>
    <p>I’m a creative spirit with a great imagination, a passion for writing, and a knack for web strategy. Check out my work to see what I’m talking about.</p>
</article>
<footer id="footer" class="fluid">
    <p> </p>
    <p>© Kate Farrow 2014. Photography © L. Farrow and J. Sandhu</p>
    <p> </p>
</footer>
</div></div>
</body>
</html>

The "align" attribute is obsolete. See centering Pages, Images and other elements with CSS
http://cookbooks.adobe.com/post_Centering_web_pages_and_other_elements_with_CSS-16640.html
FluidGrids are for experienced web designers who already understand the core concepts of HTML, CSS and Advanced CSS Media Queries. Don't bite off more than you can chew for a 1st project. Start with a stable, fixed-width layout. When you become proficient with that, then you can take on more challenges.
Go to File > New > Blank page > HTML. Select a layout from the 3rd panel. Hit Create.
Creating your first web site in DW - (5-part tutorial)
http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html
Nancy O.

Fluid Grid Layout -

I added a new Fluid Grid Layout and when I try to add a DIV I receive the message "Could not find Dreamweaver Fluid Grid Style Sheet". I don't see the pink bars on my screen as shown in all of the tutorials. Can I use this option in CS6? I have followed the tutorial but it doesn't seem to work.

No, not a site. I am working with a test folder. I created a new folder called fluid. The folder contains 4 files:
fluid.css (the new FG css file)
fluidpage.html (a new blank page)
boilerplate.css
respond.min.js

Dreamweaver sc6 fluid grid layouts and nivo slider

Similar Messages

Maybe you are looking for