CS6 Fluid Grid 960px wide

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

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

Similar Messages

Cs6 fluid grid layout wide-screen resolution issue

Hi all, I've done some poking around but have not found anything that answers this question - if I missed something please pass me the link!
So I'm doing a new site in cs6 with fluid grid layouts. It's fine in terms of screen sizes, that is, small medium large, but different resolutions make the content appear differently. Specifically on desktop size screens with wide-screen resolutions (eg 1600X1200) the content is squeezed up towards the top of the page. The background image is fine on all resolutions - fills the screen - but the content on top changes according to the resolution. On my screen (1600X900) there's a nice distribution of content vertically. Is there any way to make it so that the content adjusts for resolution, not just size? Thanks in advance.

What I'd like is for the widescreen view not to change the vertical distribution. That is, on my screen the content fills about 3/4 of the screen, which looks fine. On widescreen resolution, it barely covers 2/3 and it looks top-heavy - users I've asked with widescreen resolutions have said "it looks squished towards the top, why don't you move it down?". I guess I don't understand, if height as well as width is determined in percentage, why this happens (that lack of understanding could reveal my fundamental lack of understanding of aspect ratio/mathematics in general ).
I suppose I could give a bigger margin at the top to move the content down the page in all cases, but on my screen, not widescreen, that's not ideal. And I'm hoping there's a way to adjust for widescreen without affecting all resolutions.

Centering a page in Dreamweaver CS6 Fluid grid

Centering a page in Dreamweaver CS6 Fluid grid.
I figured this would be an easy task and have saved it to last. After watching videos, scanning the web and this forum I have found many answers but none of them seem to work in CS6. I currently have an extra 1-2% margin on the left to get the page closer to the middle but this doesn't work well with all screen sizes and its still not in the middle.
Page can be found here
Any advice would be greatly appreciated!

It looks like you've nested the rest of content within your #header DIV. And header div's width is 94.4% - this results in everything on the site have a ~5% margin on right.
You may want to fix this first to see if it helps you with the result you intend to get. If not, do post back.

Dreamweaver CS6 fluid grid with slideshow

I am trying to create a slideshow page for my DW CS6 fluid grid site, preferably with previews.
I want the images to scale with the width of the browser.
I checked out different plugin's and apps but one does not integrate with DW, the other can't combine Landscape and Portrait pictures ect....
After looking in the forums I could only find 1 discussion about this resulting in there is no solution.
But a year has past and...... does anyone know a good solution?
Don't want to use Flash.
thx.

"Try and find a "Responsive jQuery Slideshow" plugin? The biggest issue
that javascript-slideshows will have is that many rely on having a
specific width"
Non-jQuery extensions sometimes present solutions:
http://www.projectseven.com/products/galleries/igm2/examples/demo-01.htm
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
Since 1998

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.

CS6 Fluid Grids - how to make images resize when page is resized? [was: Hello]

I am new to fluid grid layouts in Dreamweaver cs6, I want to insert a GIF file on my index page but I do not know how to make it so when the page shrinks the GIF or image shrinks as well. The only code that I have found is
img, {
    max-width: 100%;
But this code already exists in the css file when you create a new fluid grid based layout
img, object, embed, video {
    max-width: 100%;
can anyone help a newbie please..

this is my source code
<!doctype html>




<html class="">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kyle Childress Foundation</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="/layout.css" rel="stylesheet" type="text/css">


<script src="respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="animation"><img src="images/images/kyleanimation2014gif2.gif" alt="kylechildressfoundationanimation"></div>
</div>
</body>
</html>
this is my css
@charset "UTF-8";
@import url("/kyle.css");
/* 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:        5;
    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: 87.36%;
    padding-left: 1.82%;
    padding-right: 1.82%;
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#animation {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#image {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
/* 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%;
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#animation {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#image {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    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: 88.2%;
    max-width: 1232px;
    padding-left: 0.9%;
    padding-right: 0.9%;
    margin: auto;
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#animation {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#image {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
the animation GIF is 700 x 908
I changed the code from max-width to just width 100% but it still did not work ,, please help

DW CS6 fluid grid insert menu options

I'm using Dreamweaver CS6, purchased via Adobe Creative Cloud Suite. I've created a new site and fluid grid. I want to begin inserting fluid grid divs, however, my Insert>Layout menu does not have a menu pick for "insert fluid grid layout div tag"?

The 12.2 update added improvements to the Fluid Grid interface. You no longer need to insert FluidGrid Div. Just insert Div and DW will know what you need.
Creative Cloud 12.2 - Updated Fluid Grid Layouts
http://blogs.adobe.com/dreamweaver/2013/02/updated-fluid-grids-in-dreamweaver.html
Nancy O.

CS6 Fluid Grid Layouts - opening CSSTransitions panel crashes program

Hi there, I'm on my second web page and this old problem has come up again.
I've asked about this before but I'm afraid I never got to the end of it, I just worked around it.
After I open the transitions panel, I then press the + button, then it crashes. Here are the error messages:
Does CSS Transitions work in Fluid Grid Layout? Thank you.

This aging mind gets very easily confused, so please bear with me.
In reply #3, I gave you an answer to you not being able to find the file to delete as in reply #2. Ticking the box next to 'Hidden Items' will allow you to find that file. By default it would be hidden. Ticking the box will not delete the cache file. For that to happen, you need to follow the process as set out in the link supplied in reply #1.

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.

CS6 Fluid Grids Can you use a sliced images?

I sliced to pictures and was hoping that I could some how figure a way to make it work with fluid grids but no luck.
I tried slicing it both ways but I guess it will always fall apart: http://www.lavishvegas.com/las_vegas_barsx.html
Thaks for any help!

DWQuest wrote:
I sliced to pictures and was hoping that I could some how figure a way to make it work with fluid grids but no luck.
I tried slicing it both ways but I guess
What does "make it work with fluid grid" means? What exactly are you trying to do and how much do you know about HTML and CSS?
To make things work as you want it requires working with the code and so some knowledge is required.
Good luck.

DW CS6 Fluid-grid to Wordpress theme

I have the standard files for wordpress to have a very plain theme. It works on it's own, but I can't figure out how to get the fluid-grid layout to interact with the index.php file. The index.php file contains the contentWrapper that displays new blog posts on the page, but I'm having a problem integrating the layout into the files.
I copied out the following code from index.php to paste in the "content" div shown on the screenshot below as well. Now, if I am correct in my code, what should be recommended for the file name of the .css and .html files created by DW in the fluidgrid layout?
<div id"contentWrap">
    <div id="content">
        <?php if ( have_posts() ) : ?>
            <?php while ( have_posts() ) : the_post(); ?>
                <article <?php post_class() ?> id="post-<?php the_ID(); ?>">
                    <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?><a/></h2>
                    <div class="meta>
                        <em>Posted on:</em> <?php the_time('F jS, Y') ?>
                    </div>
                    <div class="entry">
                        <?php the_content(); ?>
                    </div>
                    <div class="postmetadata">
                        <?php comments_popup_link('No Comments »', '1 Comment »','%                                   Comments &#187:'); ?>
                        </div>
                </article>
            <?php endwhile; ?>
            <?php else : ?>
            <h2>Not found</h2>
        <?php endif; ?>
    </div>
Thanks for your time!

I've never used FGLayouts for WP theme development and most likely never will. But maybe this tutorial will help get you going in the right direction.
Making a DW Template into a WP Theme.
http://cmswithwordpress.com/dreamweaver-templates-wordpress-themes/
Nancy O.

Adobe has made upgrades with the Dreamweaver CS6 fluid grids. Is there a better tutorial than this?

It there a better tutorial than this anywhere http://blogs.adobe.com/dreamweaver/2013/02/updated-fluid-grids-in-dreamweaver.html ? I can't seem to understand this guy. I know he means well. I really want to learn fluid grids. Thanks any reconmandations?

If you want to learn to make responsive Web pages, do not rely on
Adobe's fluid grid system. Learn CSS yourself. If you need to rely on a
grid framework, then you are barking up the wrong tree. I can absolutely
guarantee that if you do not fully understand the theories behind
responsive design and you use the Adobe fluid grid (or the open source
frameworks/scripts that Adobe uses) your site will eventually break.
Study and learn. If you are sharp enough, you will quickly come to
understand that nearly every article and tutorial on the subject is
plain wrong. The essence of responsive design is very easy and does not
require anyone's code but your own.
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
Since 1998

Building my first CS6 Fluid grid in DW and why am I having problems saving as template?

When I save my page as a template and then add a new page based on the template my css files do not automatically attached plus the Title of the page is locked. Has anyone else had this same problem? Any ideas?

Before trashing your work, validate code and fix reported errors.
Code Validation Tools
CSS - http://jigsaw.w3.org/css-validator/
HTML - http://validator.w3.org/
Nancy O.

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.

More insight on divs with fluid grids please!

Help me come further up the CS6 fluid grid learning curve, please!
I'm adapting an exiting site to fluid grids. After creating the template for the primary pages, I have two major issues at this point(yeah, only two, SO FAR).
1- I have a vertically expanding menu in the first layout div. For tablets, I want to preserve the left grid column space for the menu, regardless of its length, and all other content would use just the right gid columns. But when the menu happens to be short, the "excess" content floats left under the menu grid columns. How can I force main page content to only occupy the right grid columns, regardless of the length of the menu?
As a side point to the menu, what happens when I try to put this (or the footer) all back in an SSI, as it originally was?
2 - I've seen the note about no support for nested layout divs. Thru trial and error, I'm still trying to figure out just what this means. Pragmatically, what is the greater implication of this? Can format be controlled only on fluid grid layout divs? Can't I have divs inside of a grid layout div to control image palcement around the text for instance? I've had hit=n-miss experience with this so far.
Can anybody point me to a more in-depth discussion on this topic?
Sorry if this ol' dog seems like he's learning div layout all over again. But hey! That IS how it feels!
Thanks for any education, or pointers to such, that you can provide.

Not sure I completely understand what you want. But in this example, I have set nav and LayoutDivs 5, 6, 7 to display:none in smaller devices.
http://alt-web.com/FluidGrid/Fluid2.html
I did this inside a media query within my Content.css file:
/* Special Rules for Mobiles. */
@media only screen and (max-width: 480px) {
   /**hide some divs**/
     nav, #LayoutDiv5, #LayoutDiv6, #LayoutDiv7 { display: none }
     /**show jQuery buttons**/
     #togglenav { display: block }
     #showDivs { display: block }
Then I used a simple jQuery toggle to show/hide divs.
http://jsfiddle.net/NancyO/AP9Hm/
Nancy O.

CS6 Fluid Grid 960px wide

Similar Messages

Maybe you are looking for