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.

Similar Messages

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.

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

Dreamweaver CC fluid grid, can I change the position of DIV's based on Mobile, Tablet, Desktop view?

Hi all,
Currently working on my first Dreamweaver CC fluid grid / responsive site. I want to optimise the pages layout for Mobile, Tablet and Desktop.
I can see that I can hide individual div elements by adding "display: none;" to the mobile media query code in the CSS.
I am wondering am I able to change the position of DIV's in relation to the order of each other some how using a similar way?
Eg I have a webpage design for desktop like.
Title
Nav
Description
Buy Button
Photo
On mobile I'd like to be able to bring that Photo up towards the top of the layout eg.
Title
Nav
Photo
Description
Buy Button
I was hoping those up and down arrows you see in the Dreamweaver CC interface was going to some how make the changes to each view Mobile, Tablet, Desktop, but all that is doing is moving the position of code in the HTML amoung each of the main DIV sections.
Or am I at the point where I will need to create a seperate page for mobile only to make a layout change like this?
Any help would be great

Hi Complexity,
I have got some further info, and if I have lead you astray I am sorry.
I don't think you can change the order of the divs in a responsive layout in DW CC.
However, you can arrange the divs to sit under or beside each other differently in each of the layouts, for pc, tablet or phone.
You can also switch divs off and on in each of the layouts, having them display in one size screen and not in another.
So what you would need to do is to create a couple of nav divs, if you want a nav at the top of one type of screen and one at the bottom. You could duplicate the content in both of them and switch one on in one layout and one off in the other.
I hope this helps!
I am doing my first layout for a client using DW CC responsive layouts. I have done two test/hobby sites already.
It is a bit of a mission learning it but I am getting there.
I do find it interesting that most people recommend using other programs to do responsive rather than Dreamweaver's fluid grid layouts. I don't think many people are using it yet.
Regards,
Mary

How to add an extra page to the index.html page on dreamweaver CS6?

How to add an extra page to the index.html page on dreamweaver CS6?

Index.html = your domain's home page. There is only one home page per site.
To create a new page from your index, go to File > SaveAs > filename.html. Repeat for other site pages. Add links on your index page that lead to other site pages.
See Creating your first web site in DW CC (5-part tutorial)
https://helpx.adobe.com/dreamweaver/learn/tutorials/how-to/first-website-part1.html
Nancy O.

Creating a dynamic web page with Dreamweaver CS6 academic version

To create a dynamic web page with Dreamweaver CS6 academic version, setting up for testing server menu box just shows up and disappear. what is that issue?

Anderson51 wrote:
I'm new to this area ... ...Like I said, I'm new and in way over my head - I think???? Help???
Hmmm,
I don't want to be the one to put you off. I'm in over my head too but I really enjoy the pain of grappling with Dreamweaver. It isn't really for the novice user and unlike any other app I know, it will be of greater benefit to those who have some knowledge of the underlying languages it deals with. i.e. HTML, CSS and some others. Strangely, I also hear from people that know the coding well, that they don't like/use/need Dreamweaver.
If you only want one site, and don't really need to wrench your own unique identity from what you are doing, why not look at a free site from Wordpress.com? I am sure you can use your own domain, and as you get proficient at it, you can expand what's there by paying for it.
Just a thought
Martin

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

Can you make a Testimonial page in dreamweaver CS6

Is a Testimonial page hard to build in Dreamweaver CS6. I working in the fluid grid layout for a site and I was checking online and no real answers if someone wanted to comment on your site or respond to some work you did for them.
Thanks for your time.
Tom

Not quite sure how to answer this in a meaningful way for you. No, a testimonials page is not hard to make, but you need to have some skills with HTML and CSS to do so. Would the difficulty of doing this depend on whether you were using a fluid grid? No.
But the right way to do it is to use a data-dependent page, so that you keep your individual testimonials in a database and simply pull them out to be shown on the page.
What is your skill level with HTML and CSS (and with server scripting like PHP)?

Dreamweaver CC fluid grid perfect in Chrome, not great in Firefox, disaster in IE.

I got past the problem of the fluid grid layout lines disappearing along with handles/etc., and was so excited that I got our site to work responsively in Chrome, but I don't understand why it won't work in the other browsers (seems this was also a problem with CS6?).   I build with both design and code, and I just can't find the problem, or any online help for this. Any ideas where I can look for more information? Thanks!!

Thanks for the advice to validate. I found some minor end tag errors on the page and was able to fix them. However, I still have the browser problem. In FF, the only problem is that the logo slides behind the main body in larger screen sizes. In IE, the swf is absent, the logo loses the rounded border, the accordion obscures everything at the top of the main body and squishes the text together, I lose the background attributes for both the main body, Kuali nav panel and both background and text features for the footer. Unfortunately, I don't know how to share a link for assistance, as the testing server is behind the JHU firewall. I've copied the source code for the index page below in hopes that someone can see some noob error I've made... Thanks so much for your help!!!!
<!doctype html>



 <html class="">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JHU Coeus Help</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="Alternate.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.accordion.min.css" rel="stylesheet" type="text/css">


<script src="respond.min.js"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery-ui-1.9.2.accordion.custom.min.js" type="text/javascript"></script>
<script>
var __adobewebfontsappname__="dreamweaver"
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
</script><script src="http://use.edgefonts.net/lobster-two:n4:default.js" type="text/javascript"></script>
</head>
<body onLoad="MM_preloadImages('Images/StructuralGraphics/PremiumSwap.gif','Images/StructuralGr aphics/LiteSwap.gif','Images/Buttons/what_you_need_first_sel.gif','Images/Buttons/proposal _help_icon_sel.gif','Images/Buttons/budget_help_clean_rgb_sel.gif','Images/Buttons/video_c lean_rgb.gif','Images/Buttons/user_guides_clean_rgb_sel.gif','Images/Buttons/admin_guides_ clean_rgb.gif','Images/Buttons/classes_clean_rgb.gif','Images/Buttons/ORIS_clean_rgb_sel.g if','Images/StructuralGraphics/MedicineResourcesSwap.gif','Images/StructuralGraphics/Resea rchSwap.gif','Images/StructuralGraphics/NursingSwap.gif','Images/StructuralGraphics/EmailS wap.gif','Images/StructuralGraphics/TimelineHover.gif','Images/StructuralGraphics/Document ationSwap.gif','Images/StructuralGraphics/BARASwap.gif','Images/StructuralGraphics/KualiKJ HUHover.gif')">
    <div class="fluid SystemStatus">
   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="680" height="30" id="FlashID" title="System Status">
     <param name="movie" value="Images/StructuralGraphics/Flash Objects/SystemYellow.swf" />
     <param name="quality" value="high" />
     <param name="wmode" value="opaque" />
     <param name="swfversion" value="11.2.0.0" />
     
     <param name="expressinstall" value="Scripts/expressInstall.swf" />
     
     
     <object type="application/x-shockwave-flash" data="Images/StructuralGraphics/Flash Objects/SystemYellow.swf" width="680" height="30">
       
       <param name="quality" value="high" />
       <param name="wmode" value="opaque" />
       <param name="swfversion" value="11.2.0.0" />
       <param name="expressinstall" value="Scripts/expressInstall.swf" />
       
       <div>
         <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
         <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
          </div>
       
        </object>
     
      </object>
</div>
<div class="fluid Header">
    <div class="fluid LogoWrapper">
    <div class="fluid LogoWhite">
    <div class="fluid Logo"><img src="Images/StructuralGraphics/ExternalLogo_Blue2.gif" alt=""/></div>
    </div>
    </div>
    </div>
<div class="gridContainer clearfix">
<div class="fluid MainBody">
          <div class="fluid Body">
          <div class="fluid LaunchWrapper">
     <div class="fluid LaunchButtons"><img src="Images/StructuralGraphics/LaunchPremium.gif" alt="" id="Image1" onClick="MM_goToURL('parent','http://prcoeus.johnshopkins.edu/coeus/coeus.jnlp');return document.MM_returnValue" onMouseOver="MM_swapImage('Image1','','Images/StructuralGraphics/PremiumSwap.gif',1)" onMouseOut="MM_swapImgRestore()"/></div><div class="fluid LaunchButtons"><img src="Images/StructuralGraphics/LaunchLite.gif" alt="" id="Image2" onClick="MM_goToURL('parent','http://prcoeus.johnshopkins.edu/coeus/userAuthAction.do');return document.MM_returnValue" onMouseOver="MM_swapImage('Image2','','Images/StructuralGraphics/LiteSwap.gif',1)" onMouseOut="MM_swapImgRestore()"/></div>
     <div class="fluid LaunchText">Use the Coeus buttons at left to launch Coeus Premium and Coeus Lite, until our transition to Kuali Coeus, targeted for November 2015.</div>
   </div>
          <div class="fluid CoeusHelp">
     <div class="fluid CoeusButtons"><a href="Documents/NeedFirst.htm"><img src="Images/Buttons/what_you_need_first.gif" alt="" id="Image3" onMouseOver="MM_swapImage('Image3','','Images/Buttons/what_you_need_first_sel.gif',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
     <div class="fluid CoeusButtons"><a href="Documents/PropHelp.htm"><img src="Images/Buttons/proposal_help_icon.gif" alt="" id="Image4" onMouseOver="MM_swapImage('Image4','','Images/Buttons/proposal_help_icon_sel.gif',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
            <div class="fluid CoeusButtons"><a href="Documents/Budget.htm"><img src="Images/Buttons/budget_help_clean.gif" alt="" id="Image5" onMouseOver="MM_swapImage('Image5','','Images/Buttons/budget_help_clean_rgb_sel.gif',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
            <div class="fluid CoeusButtons"><img src="Images/Buttons/video_clean.gif" alt="" id="Image6" onMouseOver="MM_swapImage('Image6','','Images/Buttons/video_clean_rgb.gif',1)" onMouseOut="MM_swapImgRestore()"/></div>
            <div class="fluid CoeusButtons"><a href="Documents/UserGuides.htm"><img src="Images/Buttons/user_guides_clean.gif" alt="" id="Image7" onMouseOver="MM_swapImage('Image7','','Images/Buttons/user_guides_clean_rgb_sel.gif',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
            <div class="fluid CoeusButtons"><a href="Documents/AdminGuides.htm"><img src="Images/Buttons/admin_guides_clean2.gif" alt="" id="Image8" onMouseOver="MM_swapImage('Image8','','Images/Buttons/admin_guides_clean_rgb.gif',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
            <div class="fluid CoeusButtons"><a href="Documents/Training.htm"><img src="Images/Buttons/classes_clean.gif" alt="" id="Image9" onMouseOver="MM_swapImage('Image9','','Images/Buttons/classes_clean_rgb.gif',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
            <div class="fluid CoeusButtons"><a href="Documents/ORIS.htm"><img src="Images/Buttons/ORIS_clean.gif" alt="" id="Image10" onMouseOver="MM_swapImage('Image10','','Images/Buttons/ORIS_clean_rgb_sel.gif',1)" onMouseOut="MM_swapImgRestore()"/></a></div>
   </div>
          <div class="fluid CoeusText">Use the buttons above for help with building proposals and budgets in Coeus, as well as finding information about administrative functions such as the approval process. See what instructor-led training is available under the "Training Classes" button.</div>
                    </div>
           <div class="fluid AccordionWrapper">
           <div class="fluid AccordionBack">
           <div class="fluid AccordionHolder">
              <div id="Accordion1">
         <h3><a href="#">Research Administration Offices</a></h3>
                <div>
           <p>
                  <div class="fluid ResearchOffices"><strong>School of Medicine Research Administration (SOM)</strong> <br>
733 North Broadway, BRB 117<br>
Baltimore, Maryland 21205<br>
<a href="http://www/hopkinsmedicine.org/">http://www/hopkinsmedicine.org/<br>
Research/ora/</a></div>
<div class="fluid ResearchIcon"><img src="Images/StructuralGraphics/MedicineResources.gif" alt="" id="Image11" onClick="MM_goToURL('parent','http://www/hopkinsmedicine.org/');return document.MM_returnValue" onMouseOver="MM_swapImage('Image11','','Images/StructuralGraphics/MedicineResourcesSwap.g if',1)" onMouseOut="MM_swapImgRestore()"/></div>
                  <div class="fluid ResearchPersonnel"><table>
<tr>
    <td><strong>Joanne Frantz-Doggett</strong> <br>
Associate Director<br>
410-955-8921<br>
[email protected]</td>
    <td><strong>Nicole Leonard</strong><br>
Deputy Director<br>
410-502-6655<br>
[email protected]</td>
</tr>
</table>
</div>
<p>
                  <div class="fluid ResearchOffices"><strong>Johns Hopkins University Research Administration (JHURA)</strong><br>
Wyman Park Center, W400<br>
3400 North Charles Street<br>
Baltimore, Maryland 21218<br>
<a href="http://www.jhuresearch.jhu.edu/rpa/">http://www.jhuresearch.jhu.edu/rpa/</a></div>
                  <div class="fluid ResearchIcon"><img src="Images/StructuralGraphics/Research.gif" alt="" id="Image12" onClick="MM_goToURL('parent','http://www.jhuresearch.jhu.edu/rpa/');return document.MM_returnValue" onMouseOver="MM_swapImage('Image12','','Images/StructuralGraphics/ResearchSwap.gif',1)" onMouseOut="MM_swapImgRestore()"/></div>
                  <div class="fluid ResearchPersonnel">
<table><tr>
    <td><strong>Alexandra A. McKeown<br></strong>
Associate Vice Provost for Research Administration<br>
410-516-8444<br>
[email protected]</td>
    <td><strong>Jennifer Barron<br></strong>
Executive Director<br>
615 N. Wolfe Street, W1600<br>
Baltimore, Maryland 21205<br>
410-614-1856<br>
[email protected]</td>
</tr>
</table>
</div>
<p>
                  <div class="fluid ResearchOffices"><strong>Business and Research Administration (BARA)</strong> <br>
Wyman Park Center, N600<br>
3400 North Charles Street<br>
Baltimore, Maryland 21218<br>
<a href="http://www.jhu.edu/kasper/sponsored_projects/">http://www.jhu.edu/kasper/sponsored_projects/</a></div>
                  <div class="fluid ResearchIcon"><img src="Images/StructuralGraphics/BARA.gif" alt="" id="Image13" onClick="MM_goToURL('parent','http://www.jhu.edu/kasper/sponsored_projects/');return document.MM_returnValue" onMouseOver="MM_swapImage('Image13','','Images/StructuralGraphics/BARASwap.gif',1)" onMouseOut="MM_swapImgRestore()"/></div>
                  <div class="fluid ResearchPersonnel"><strong>Mary Louise Healy</strong><br>
Associate Director<br>
Office of Research Administration<br>
410-516-8617<br>
[email protected]
</div>
<p>
                  <div class="fluid ResearchOffices"><strong>School of Nursing Office of Research Administration (SON)</strong><br>
525 North Worlfe Street<br>
Baltimore, Maryland 21205<br>
www.nursing.jhu.edu/<br>
<a href="http://faculty_research/administration/index.html">http://faculty_research/administration/index.html</a></div>
                  <div class="fluid ResearchIcon"><img src="Images/StructuralGraphics/Nursing.gif" alt="" width="109" height="109" id="Image14" onClick="MM_goToURL('parent','faculty_research/administration/index.html');return document.MM_returnValue" onMouseOver="MM_swapImage('Image14','','Images/StructuralGraphics/NursingSwap.gif',1)" onMouseOut="MM_swapImgRestore()"/></div>
                  <div class="fluid ResearchPersonnel"><strong>Maggie Brewer</strong><br>
ORA Administrator<br>
443-287-2902<br>
[email protected]
</div>
             </div>
                <h3><a href="#">Research-Related Administration</a></h3>
         <div>
           <p><div class="fluid Offices"><strong>Sponsored Projects Shared Services</strong><br>
3910 Keswick Road, 5th Floor;
Baltimore, Maryland 21211<br>
443-997-8151<br>
<a href="http://ssc.jhmi.edu/sponsoredprojects/index.html">http://ssc.jhmi.edu/sponsoredprojects/index.html</a><br>
<br>
<strong>Office of the Controller</strong><br>
3910 Keswick Road, 5th Floor; Baltimore, Maryland 21211<br>
Wanda Adams, Administrative Coordinator;<br>
443-997-8155<br>
<a href="http://finance.jhu.edu/depts/controller/office_controller.html">http://finance.jhu.edu/depts/controller/office_controller.html</a><br>
<br>
<strong>Compliance and Interdivisional Research Services</strong>
<br>
Wyman Park Center, W400; <br>
3400 North Charles Street; Baltimore, Maryland 21218<br>
Marge Dolly; [email protected]<br>
<br>
<strong>Licensing and Technology Development</strong><br>
100 North Charles Street, 5th Floor;<br>
Baltimore, Maryland 21201;<br>
410-515-8300<br>
<a href="http://www.techtransfer.jhu.edu">http://www.techtransfer.jhu.edu</a><br>
<br>
<strong>Export Controls Office</strong><br>
Wyman Park Center, W400; Baltimore, Maryland 21218<br>
Frank Barker; [email protected]<br>
<br>
<strong>Health, Safety & Environment</strong><br>
600 North Wolfe Street; Billing Administration 1290<br>
Baltimore, Maryland 21287-1629<br>
<a href="http://www.hopkinsmedicine.org/hse/">http://www.hopkinsmedicine.org/hse/ </a></div>
             </div>
         <h3><a href="#">ORIS Executive Committee</a></h3>
                <div>
                  <p>Mike Amey<br>
Associate Dean of Research Affairs<br>
School of Medicine Research Administration<br>
733 North Broadway, BRB 117; Baltimore, Maryland 21205<br>
410-955-3061; [email protected]
<br>
<br>
Mary Louise Healy<br>
Associate Director, ORA<br>
Zanvyl Krieger School of Arts and Sciences<br>
Wyman Park Center, N600; <br>
3400 North Charles Street; <br>
Baltimore, Maryland 21218-2685<br>
410-516-8617; [email protected]<br>
<br>
Alexandra A. McKeown<br>
Associate Vice Provost for Research Administration<br>
Johns Hopkins University Research Administration<br>
Wyman Park Center, W400; <br>
3400 North Charles Street; Baltimore, Maryland 21218-2685<br>
410-516-8668; [email protected]<br>
<br>
Kelly Welsh<br>
Associate Dean, Finance and Administration<br>
School of Nursing<br>
525 North Wolfe Street, Suite 338;<br>
Baltimore, Maryland 21205<br>
410-955-4766; [email protected]</p>
                </div>
                <h3><a href="#">ORIS Leadership</a></h3>
                <div>
                  <p>Alexandra A. McKeown<br>
Associate Vice Provost for Research Administration<br>
Johns Hopkins University Research Administration<br>
Wyman Park Center, W400; <br>
3400 North Charles Street; Baltimore, Maryland 21218-2685<br>
410-516-8668; [email protected]<br>
<br>
<strong>Robert E. Taylor</strong><br>
IT Manager<br>
Office of Research Information Systems<br>
Wyman Park Center, W400; <br>
3400 North Charles Street; Baltimore, Maryland 21218-2685<br>
[email protected]<br>
<br>
</p>
                </div>
       </div>
     </div></div>
   </div>
          <div class="fluid KCNavWrapper">Kuali Coeus Information <div class="fluid NavPanel">
     <div class="fluid ButtonWrapper">
       <div class="fluid ButtonWhite">
         <div class="fluid ButtonWrappers"><img src="Images/StructuralGraphics/KualiKJHU.gif" alt="" id="Image15" onMouseOver="MM_swapImage('Image15','','Images/StructuralGraphics/KualiKJHUHover.gif',1)" onMouseOut="MM_swapImgRestore()"/></div>
                <div class="fluid ButtonWrappers"><img src="Images/StructuralGraphics/Email.gif" alt="" id="Image16" onMouseOver="MM_swapImage('Image16','','Images/StructuralGraphics/EmailSwap.gif',1)" onMouseOut="MM_swapImgRestore()"/></div>
                <div class="fluid ButtonWrappers"><img src="Images/StructuralGraphics/TimelineButton.gif" alt="" id="Image17" onMouseOver="MM_swapImage('Image17','','Images/StructuralGraphics/TimelineHover.gif',1)" onMouseOut="MM_swapImgRestore()"/></div>
                <div class="fluid ButtonWrappers"><img src="Images/StructuralGraphics/Documentation.gif" alt="" id="Image18" onMouseOver="MM_swapImage('Image18','','Images/StructuralGraphics/DocumentationSwap.gif', 1)" onMouseOut="MM_swapImgRestore()"/></div>              </div>
     </div>
   </div>
          </div>
</div>
    </div>
          <script type="text/javascript">
swfobject.registerObject("FlashID");
$(function() {
$( "#Accordion1" ).accordion();
</script>
<div class="fluid Footer">
     <div class="fluid FootHead">Office of Research Information Systems</div>
     <div class="fluid FootAddress">Wyman Park Center, W400<br>
3400 North Charles Street; Baltimore, Maryland 21218-2685
</div>
     <div class="fluid Twitter">This is the content for Layout Div Tag "Twitter"</div>
   </div>
</body>
</html>

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.

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.

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

Dreamweaver CC fluid grid controls disappearing and other info

Hi All,
I have finally completed my first commercial fluid grid design in Dreamweaver CC and it was a bit of a mission.
One disconcerting thing about the program is that the fluid grid controls keep disappearing. You know, the ones where you can hide the div, duplicate it, move it up or down, or delete it.
I have found that when this happens, I need to close the html file I am working on in DW CC and then open it again. The controls then appear again, so you can rearrange your various layouts as demonstrated in those breezy demo videos about DW CC fluid grid layouts.
So don't just conclude you have broken the code when these controls disappear, try closing and opening the file again first.
Also you need to insert all the divs you need for all layouts in the mobile phone layout, as that is the main layout, governing all the others because of the way the media queries are set up in the CSS file that is created when you start your fluid grid layout.
I could not work out how to reorder divs in the different layouts, this may not be possible at the moment. Instead I created divs in the phone layout to cover all of the divs needed in the three layout sizes and switched them off and on in the various layouts. This works really well, but I found that DW behaved strangely if I switched a div off in the mobile layout and then tried to style it in one of the other layouts. So I suggest styling all of the divs first for all the layouts before switching any of them off in the mobile layout.
Also you can't copy the contents of one div and put them in another without freaking the program out, especially if you are working in a div that is hidden in the mobile layout.
I suggest saving regularly as you add new divs and style them and view live in a browser immediately, as the preview in DW CC is not reliable. It can't show rounded div corners or shadows for example.
Keep an eye on the code as it is built by your use of the CSS Properties panel. If it starts going wrong, close the html file without saving it or the attached CSS file. Then go back in and try what you want to do again.
If you save weird code errors, your work could be so compromised that you need to start all over again. So quit out without saving if you notice this.
After much experimentation I now insert images into a div, rather than make them a background image, as the background image will not completely show if the content of the div is not long enough. This may require a rethink of your design.
Doing any absolute sizes in a div will make the responsive design very hard to style and possibly break the code, so I don't suggest it.
Adding padding to a div can make it stick out of right edge of the design, I am not sure why this is the case and could not work out how to stop it. So use low pixel numbers in the padding of a div.
Also control z seems to be a sudden death move, so I stopped doing that.
So my first job has been a bit of a ride, but I seem to be nearly there on my first design.
I think DW CC is still a work in progress and I look forward to further updates of the software.

Hi Top Ten,
You can't get them back once they go. You now need to edit the css code manually to do the same thing.
For instance if you want divs to sit beside each other you put this in the css for that div:
clear: none;
This css means that div will allow other divs to sit beside it.
Then put in a width in percentages. For example if you have three divs that need to sit beside each other put:
width: 33%;
in each of them. Or maybe:
width: 31%;
margin-right: 2%;
Fortunately in DWCC it is now robust enough for you to do those code changes by hand. My original question in this thread was posed when DW CC fluid grid had just come out and crashed easily. A year later all is well, so you can do those changes in the css code without problems now.
Regards,
Mary

Centering a page in Dreamweaver CS6 Fluid grid

Similar Messages

Maybe you are looking for