Cannot drag divs in fluid grid layout

I am running Dreamweaver CS6 in OS X Mavericks.
When I am building pages in fluid grid layout I seem to reach a point where I can no longer grab div boxes on the left or right to resize. Is this because you cannot edit a fluid grid layout from a template?
Thanks,
Joshua

I can tell you from personal experience that once the FGLayouts are built for mobile, tablet and desktop, fully tested and validated, you should put a HALT on that phase of your project.
Then SaveAs Template. Everything from that point forward is sans the FG Design Panels and just about adding content.
And yes, keeping content styles in a separate physical file is highly recommended. That way if something awful happens to your CSS styles, you're not putting your FGLayouts in peril.
Nancy O.

Similar Messages

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

Hi,
how to setup a default direction for new divs in fluid grid layout in dreamweaver? I am an RTL interface user, I need my new divs to be inserted from right to left not Left to Right! could it be in dreamweaver?
Thanks.

This may get me into strife, but my experience is that you are better off finding another platform for your RWD.
The framework that I tend to use is by Zub-Foundation http://foundation.zurb.com/.
A commercial product that I have come to appreciate can be found here http://www.projectseven.com/products/tools/composer/index.htm. Please do not mention me if you happen to choose this product.

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

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

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

Full width slider in a fluid grid layout ???

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

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

Green highlight when working with Fluid Grid Layout Div tags

What does the green highlight mean when working in Live view of a Fluid Grid Layout using Fluid Grid Layout Div Tags? Sometimes they show up, but sometimes they don't. I think it has something to do with the width setting but I can't figure out what the rule is or what the highlight indicates.
Dreamweaver CS6
Mac OSX 10.8.2
THANK YOU!!

Brian McNay wrote:
the green highlight sometimes disappears when modifying the width property of the div. My question is what does this signify?
If you change the width of a div manually in Code view or in the CSS styles panel, Dreamweaver ceases to treat it as a fluid grid layout div, and the green highlighting disappears.
To be treated as a fluid grid layout div, the width must be adjusted by dragging the handles in Design view. Dreamweaver snaps fluid grid layout divs to the grid that is defined when you first create the page, and it calculates the width and margins to many decimal places. If the width and/or margin doesn't match the grid dimensions, the highlighting disappears, and the div is treated as any other div.
It's not a bug, nor are fluid grid layout divs any different from normal ones. The idea of the grid and the highlighting is to allow you to create a responsive layout according to a hypothetical grid. Once you've created the basic structure, it's best to turn off the visual guides anyway.
Personally, I think that the implementation of fluid grid layouts in Dreamweaver CS6 leaves a lot to be desired. The basic idea is good, but it's difficult to use if you don't have a solid understanding of CSS.

Repositioning DIVs in a DW6 fluid grid layout

I've followed James Williamson's video tutorial on fluid grid layouts http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/ and have created something similar.
Williamson gives his DIVs fairly standard ID names. He starts with "header", ends with "footer" and places three DIVs in between: "article", "interview" and "artwork" (around 6:20 in the video).
The desktop layout is a standard three column layout with a header and footer while in the mobile layout all the divs stack up one on top of the other.
In Williamson's tablet layout, he adjusts the width of the DIVs so two site below the header ("article" and "interview") and he makes the third ("artwork") span the full width (he shows the three layouts in a browser from 15.00 to 15.20 in the video).
What I would like to do in the tablet layout is have the third column ("artwork") sits below "article" while the middle div, "interview" (which in my case is taller, due to having more content) sits to the right of them both.
Is this possible using DW6's fluid layout grid, or would I have to create the layout manually from scratch?

eddieduggan wrote:
What I would like to do in the tablet layout is have the third column ("artwork") sits below "article" while the middle div, "interview" (which in my case is taller, due to having more content) sits to the right of them both.
Is this possible using DW6's fluid layout grid, or would I have to create the layout manually from scratch?
No. The way that Dreamweaver's Fluid Grid Layouts work is by floating all divs to the left. New rows are created by setting the clear property to left. As a result, you cannot have a div on the right that spans the height of multiple divs on the left.
The divs must be displayed in rows in the same order as they appear in the underlying HTML. To get two divs on the left alongside a taller one on the right, you would need to wrap the left-hand divs in an outer div. The outer div can be snapped to the grid, but not the inner ones.
As Nancy says, failing miserably with the Fluid Grid Layout feature is much easier than succeeding. It reminds me of Dreamweaver's earlier love affair with "layers" (absolutely positioned divs) -- well intentioned, but fatally flawed.

Div options toolbar not displayed correctly in fluid grid layout

When I select an inserted element in fluid grid layout, the options to hide, duplicate or delete the Div are not displayed. I only have the 'move up a row' arrow displayed. How do get the other options to display on the mini toolbar? My DW CS6 version is V12.0 Build 5861.

It is called as the 'Smart HUD' and was made available in 12.2 CCM (Creative Cloud) update. Your version is 12.0 which looks like a regular non-cloud license.
Are you actually a Creative Cloud subscriber? If not, you'll have to wait for a perpetual license upgrade in order to see/ use this feature.

How To Center Fluid Grid Layout Div Tag

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

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

Insert Fluid grid layout div tag pastes CSS

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

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

Fluid Grid Layout Div's not snapping correctly?

Hello, how come my fluid grid layout div's are not snapping correctly?
Here is a picture:
As you can see, the div tag "iphone1" is halfway in the other column. Shouldn't it be snapping to the nearest column? My mobile layout snaps perfectly fine but my tablet and desktop do not. Is it because my div tag "iphone1" is in another fluid grid layout tag "main-body"> Can you not place div's inside of div's with id's?
I would appreciate any help as I am sure I am doing something wrong that can easily be fixed.
Also, it is possible to change the number of columns you want for each design view after creating the page? For example, I have 20 columns in desktop view, it is possible to change to 16 if I wanted to?
Thanks in advance!

Hi dhint4,
Hope things are working out for you while using new Fluid Grids.
To answer your question around nesting of elements :
12.2 upgrade of DW fully supports the Nesting of different fluid elements within other fluid element.
Infact it also supports insertion of non-fluid(normal) element within fluid elements.
This was not available in 12.0 release.
Only caveat while nesting is not to apply same class on both Child and Parent unless the the width of both is 100%.
Also, it is possible to change the number of columns you want for each design view after creating the page? For example, I have 20 columns in desktop view, it is possible to change to 16 if I wanted to?
Currently its not possible to change the number of columns on the fly. We already have couple of feature request to support the same.
Please feel free to add your vote by creating a feature request @ :https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform
Kindly revert if you have any issues or concerns.
Cheers,
Puneet

Why I am not able to see Fluid Grid Layout Div tag

Why I am not seeing Fluid Grid Layout Div tag In the Insert Layout menu

DW CC changed the panels. If you're working in FGLayouts, DW intuitively inserts the correct Div for you.
Nancy O.

In Fluid Grid layout, I have hidden 2 div for mobile layout. How do I unhide them?

In Fluid Grid layout, I have hidden 2 <div> for mobile layout. How do I unhide them?

Hi there,
I visited your site using Dreamweaver CC and tested it using the default Desktop, Tablet and Mobile sizes, followed by the Smart Phone Size.
The CSS you currently have sets the featurest <div> to 'display: none' when viewed on screen sizes lower than 480px:
Another helpful way to find out what is going on with your CSS is to test the site with Firefox using Web Developer Tools to inspect the element (or alternatively, Adobes Inspect tool). You can right-click the image and "Inspect Element" then resize the browser window so you can see exactly which CSS rule is being applied and overrided.
My suggestion would be to add an additional media query in Dreamweaver to handle all screen sizes below 480px and then set divs or elements you want to hide or show display property to visible.
Hope this helps!

How can i apply border for fluid grid layout div

How can i apply border for fluid grid layout div

<!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 rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>

<script type="text/javascript" charset="utf-8">
$(window).load(function() {
    $('.flexslider').flexslider();
</script>


<script src="respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1"><img src="SJV-Images/Banners/Dark-green-curved-header.png"/></div>
<div id="LayoutDiv2">
<div class="flex-container">
<div class="flexslider">
    <ul class="slides">
      <li>
        <img src="SJV-Images/Stud1.jpg"/>
      </li>
      <li>
        <img src="SJV-Images/Stud2.jpg" />
      </li>
      <li>
        <img src="SJV-Images/Stud3.jpg" />
      </li>
    </ul>
</div>
</div> </div>
<div id="Nav">This is the content for Layout Div Tag "Nav"</div>
<div id="Special_Features"><h3 align="center">SPECIAL FEATURES</h3>
<ul>
<li>
It is one of the oldest school.</li>
<li>It was first started as an orphanage for the children of British soldiers, and later moved to its current location.</li>
   <li>Rich in Anglo-Indian tradition dating back to three centuries.</li>
<li>The campus now has separate buildings within the campus for year 1 to year 8 (Junior and Sub Junior block) and year 9 to year 12 (Senior and   Super Senior block).</li>
<li>The school has montessori facilities in a separate building.</li>
<li>The School also has boarding facilities for students from distant places.</li>
</ul></div>
<div id="History"><img src="SJV-Images/His_Image.png" alt="Hisimage" class="floatleft">
<h3>HISTORY OF OUR SCHOOL</h3><P>In 1750 – a very long time ago,a missionary and a teacher, Christian Frederick Schwartz came to India to work in the Danish Mission at Tranquebar.Due to his own personal charm, genius and integrity, soon he became a trusted envoy to the court of Princes ,both hostile and friendly. He even helped in the training and education of Serfogee Rajah, the adopted son of the Tanjore Raja Tuljagee.</P></div>
<div id="Photo_Gall"><center>
    <strong>PHOTO GALLERY</strong>
</center>
<p><img src="SJV-Images/Photogall.png" width="174" height="70" class="floatright"/></p>
</div>
<div id="News_Events"><center>
    <strong>NEWS & EVENTS</strong>
</center><center>Annual Day<br><center>
    Alumni Meet<br>
    Exam Time Table<br>Parents-Teacher's Meet</center>
</center>
<br></div>
<div id="footer">This is the content for Layout Div Tag "footer"</div>
</div>
</body>
</html>

What must i do to get Insert Fluid Grid Layout Div Tag on dreamweaver?

Why an i not able to get the Insert Fluid Grid Layout Div Tag on dreamweaver?
I am using Creative Cloud

Hi Leroy, this post in the Adobe Dreamweaver Team Blog may assist you with the updates to Dreamweaver: http://blogs.adobe.com/dreamweaver/2013/02/updated-fluid-grids-in-dreamweaver.html
Let me know if you still require assistance.

I downloaded Dreamweaver CC 2014.1, started using it but cannot find Show Fluid Grid Layout Guides button, Resize LI.link sizing handle and 'move up a Row' arrow. Where can I find them?

I downloaded Dreamweaver CC 2014.1, started using it but cannot find Show Fluid Grid Layout Guides button, Resize LI.link sizing handle and 'move up a Row' arrow. Where can I find them?

You have the latest version (CC 2014.1 or 2014.1.1) in which the interface condenses Design View with Live View buttons in normal layouts. See screenshot.
However, in FGLayouts, Live View is the only option which poses some editing problems and has been highly criticized.
Is there any way to display the Design View in fluid grid pages?
New Features in CC 2014.1 October Release
http://helpx.adobe.com/dreamweaver/using/whats-new.html
New Features in CC 2014.1.1 February Release
https://helpx.adobe.com/dreamweaver/using/whats-new.html#Enhancements%20to%20Live%20View%2 0editing
You can disable this restriction by adding an X to the FGLayout CSS.
    Dreamweaver Fluid Grid Properties
    dw-num-cols-mobile:      X 4;
    dw-num-cols-tablet:        8;
    dw-num-cols-desktop:    12;
    dw-gutter-percentage:    25;
=====================================
Having said that, it might just be simpler to revert to an earlier version. Log-in to Creative Cloud Desktop app. Go to Filters & Versions > Previous Version. See screenshot.
Nancy O.

Cannot drag divs in fluid grid layout

Similar Messages

Maybe you are looking for