Dreamweaver. Is it possible to have AP div tags in a fluid Grid Layout Div?

I am putting together a site with a very basic page layout; some titles at the top, each placed in an AP Div, with images below.  But I would use the fluid Grid Layout Div so that the positioning of the change of flags AP div on mobile devices.

I can't figure out how to do so that the AP div inside my fluid Grid Layout Divs tags

Thank you

1. forget the AP Div they are of very little use and can only be deployed in a sensitive site with care (and knowledge).

2 forget the fluid grid layouts, they are not sufficiently stable.

That being said, take a look at create a responsive Web design in Dreamweaver | Adobe Dreamweaver tutorials CC and Bootstrap 3 tutorial

Tags: Dreamweaver

Similar Questions

  • Green highlight when you use fluid Grid Layout Div tags

    That the Green highlight means when working in Live view of a checkerboard mode fluid using fluid Grid Layout Div tags? Sometimes they appear, but sometimes they did not. I think it has something to do with the width setting but I can't understand what is the rule, or which indicates the high point.

    Dreamweaver CS6

    Mac OSX 10.8.2

    Thank you!!

    Brian McNay wrote:

    the Green highlight sometimes disappears when you change the width property of the div. My question is what this means?

    If you change the width of a div manually in Code view or in the Panel styles CSS, Dreamweaver continues to treat it as a fluid grid layout div, and green highlighting disappears.

    To be considered a div of fluid grid layout, the width should be adjusted by dragging the handles in Design view. Dreamweaver snaps divs fluid layout grid to the grid on which is defined when you create the page, and it calculates the width and margin the number of decimals. If the width or margin does not match the dimension of the grid, the highlighting disappears, and the div is treated as any other div.

    It is not a bug, nor is the divs to layout fluid grid different from normal ones. The idea of the grid and the highlight is to allow you to create a layout adapted to a hypothetical grid. Once you have created the basic structure, it is best to disable the Visual guides in any case.

    Personally, I think that the implementation of fluid layouts grid in Dreamweaver CS6 leaves much to be desired. The basic idea is good, but it is difficult to use if you don't have a solid knowledge of CSS.

  • How can I sign up for fluid grid layout div border

    How can I sign up for fluid grid layout div border

    Add this to your CSS:

    {.borderbox}

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    }

    Use the borderbox class where you have a similar scenario. In the present case:

    and

    Here is an example of what box-sizing does and how it is different from a normal border zone or a 'content' box: http://compass-style.org/examples/compass/css3/box_sizing/

  • Could I put in a fluid grid layout, a div with any property?

    Could someone please help me?, thanks

    Could I put another div in a layout fluid grid? Could put a div with a z-index value a fluid page layout grid? I could put a div with a transition to a fluid grid layout? Could I get any property of a div in a layout fluid grid?

    I can create a different stylesheet that takes all the fluid grids?

    forgive, but I have all these questions...

    Thank you and best regards.

    Fluid grid is right DW on "Sensitive" web design

    Any changes made to their fluid grid CSS break Visual AIDS that is displayed in design mode.

    Other than that, I don't see why you can't use a regular DIV within a checkerboard to fluid - and style it with one different CSS file (other than the presentation of the fluid grid CSS files).

    If you're referring to the CSS3 transitions, they work.

    Once again, as I said, fluid Grid layout is terminology just DW - any code you write it will work. However, if you want the full support of Visual AIDS, do not change the code manually in the default .css file. Feel free to add content / code in a different .css file.

    Good luck.

    -ST

  • Why I'm not able to see the fluid Grid Layout Div tag

    Why can't I see no menu fluid Grid Layout Div in the Layout to insert tags

    DW CC changed signs.  If you work in FGLayouts, DW intuitively inserts the correct Div for you.

    Nancy O.

  • Don't see fluid Grid Layout in Dreamweaver cc of the trial

    I downloaded the Dreamweaver CC to see how the new fluid grid works however it dose not give me the opportunity to try it?

    Fluid grids now carry the moniker "fluid grids (legacy)" they should not really be used. It is clear that Adobe does not offer a lot of support for them to proceed.

    If you have PCOC 2015 (check what version you have under help > on Dreamweaver) when you hit file > New in the dialog that appears you must click on the new Document tab at the top left. This will give you a list of the types of documents, fluid grid (inheritance) is the last option at the bottom. Make sure that the 'None' tab is selected on the right (mixture LFGL and Bootstrap basically will implode your site, so don't do it).

  • Is it possible to display the design view in the fluid grid pages?

    After the upgrade to the latest version of DW CC 2014, I noticed that design mode is disabled in the fluid grid pages. You can only use the Live View mode to change these pages. Design/Live button on pages not fluid.

    I wonder if there is a work around to allow the Design mode of publishing on the pages of fluid. It is a major concern to try to change some things in Live View mode. It would be nice to have a choice.

    @Ron

    Ron, thanks for your idea.  I just tried this in my fluid grid css file, and it worked!  The strange thing (at least in my mind) is that the code (below) is commented.  So, even though my web pages ignore this commented code, Dreamweaver is not... use it to control how the Dreamweaver program works. Well, I think that this can happen.  This code behaves as a "directive" in the Dreamweaver program.

    A notable change is that I no longer see the grey bands indicating the fluid grid columns in Live view mode, but I can live with that.

    It's my way of novice look at the situation.  But now I'm happy.

    Here are my exact code (which I deleted) of my css file.  Maybe others can try it and see if that fixes the problem.

    /*

    Properties Grid Dreamweaver fluid

    ----------------------------------

    DW-num-CLO-mobile: 4;

    DW-num-CLO-Tablet: 8;

    DW-num-OCOL-Office: 12;

    DW-gutter-percentage: 15;

    Inspiration of "Responsive Web Design" by Ethan Marcotte

      http://www.alistapart.com/articles/responsive-Web-design

    Golden by Joni Korpi grid system and

      http://goldengridsystem.com/

    */

  • Is it possible to use images cut into slices with fluid grids CS6?

    I have 2 images cut into slices that I use in my page. The site was designed with fluid grids CS6. As soon as the page is rendered more small 1 images contracts while the other remains the same size. Is it possible to make this work or is it just not possible using fluid grids?

    It will never work right in fluid networks.  Decide which is more important to you - your concept of design or a sensitive provision.  Unfortunately, responsive web design requires compromises that some designers are not willing to do.  It is certainly not for everyone.

    Nancy O.

  • Dreamweaver CC fluid grid divs do not stretch to cover 100% of the screen

    Hello

    I do another sensible provision using DW CC and I came across a problem.

    Design colored divs that spans the entire page to 100% with a background color and borders.

    I already did the design upwards as a layout width fixed to get the color codes etc. and that works well, with colors that covers the screen.

    Now, I'm putiing design in DW CC using checkerboard to fluid and there is a white border on the Web site.

    I can't work on how to get rid of this. Here are excerpts from my two lots of CSS stylesheets, one for a presentation grid fixed and one for a structure reactive

    CSS FIXED WIDTH

    body, td, th {}

    do-family: Calibri;

    do-size: 14px;

    Color: #000;

    }

    {body

    left margin: 0px;

    margin-top: 0px;

    margin-right: 0px;

    margin-bottom: 0px;

    }

    * / The wrapper header spans the entire screen no matter what size and does not have a white border on the left and the right

    {#headerWrapper}

    background-color: #000;

    height: 101px;

    Width: 100%;

    margin-right: auto;

    left margin: auto;

    border-bottom-width: 2px;

    border-bottom-style: solid;

    border-bottom-color: #BDDB6D;

    }

    FLUID GRID CSS

    The fluid layout grid CSS has the following in it:

    {.fluid}

    Clear: both;

    left margin: 0;

    Width: 100%;

    float: left;

    display: block;

    }

    {.fluidList}

    list-style: none;

    list-style-image: none;

    margin: 0;

    padding: 0;

    }

    / * Mobile layout: 480px and below. */

    {.gridContainer}

    left margin: auto;

    margin-right: auto;

    Width: 86,45%;

    padding-left: 2,275%;

    padding-right: 2,275%;

    Clear: none;

    float: none;

    }

    {#div1}

    }

    * / This header wrapper extends through the presentation of the grid only and has a white border on the left and the right

    {#headerWrapper}

    Max-width: 100%;

    height: 101px;

    background-color: #000;

    border-bottom-width: 2px;

    border-bottom-style: solid;

    border-bottom-color: #BDDB6D;

    }

    What do I need add to the fluid grid layout to make the headerWrapper div span the screen, no matter what width?

    What should I put in the grid CSS transmissions so that he can do that?

    Thanks in advance!

    I did it! I can't believe. The code I used is followed. The bar divs set color and at the border through the entire page and the wrapper divs to contain content in the various bars across the page.

    I must say that DW CC fluid grids are much more stable to work with and it can take a lot of coding by hand now. This is a great improvement on when I tried to use grids of fluid on a project last year.

    IN THE SECTION MULTIMEDIA PHONE REQUEST

    {.gridContainer}

    left margin: auto;

    margin-right: auto;

    Width: 100%;

    padding-left: 0;

    padding-right: 0;

    Clear: none;

    float: none;

    }

    {#headerBar}

    background-color: #000;

    min-height: 101px;

    border-bottom-width: 2px;

    border-bottom-style: solid;

    border-bottom-color: #BDDB6D;

    padding-top: 2.735px;

    }

    {#headerWrapper}

    Width: 86,45%;

    padding-left: 2,275%;

    padding-right: 2,275%;

    Clear: none;

    float: none;

    left margin: auto;

    }

    {#menuAnimationBar}

    background-color: #B7B7B7;

    height: 293px;

    border-bottom-width: 2px;

    border-bottom-style: solid;

    border-bottom-color: #BDDB6D;

    background-image:-webkit-gradient (linear, 50.00% 0.00%, 50.00% 100.00%, color-stop (0%, rgba (153,153,153,1.00)), color-stop (100%, rgba (192,192,192,1.00)));

    background-image:-webkit-linear-gradient(270deg,rgba(153,153,153,1.00) 0%,rgba(192,192,192,1.00) 100%);

    background-image: linear-gradient (180deg, rgba (153,153,153,1.00) 0%,rgba(192,192,192,1.00) 100%);

    display: none;

    }

    {#contentBar}

    background-color: #F8FCF1;

    min-height: 200px;

    background-image:-webkit-gradient (linear, 50.00% 0.00%, 50.00% 100.00%, color-stop (0%, rgba (245,251,234,1.00)), color-stop (100%, rgba (251,253,247,1.00)));

    background-image:-webkit-linear-gradient(270deg,rgba(245,251,234,1.00) 0%,rgba(251,253,247,1.00) 100%);

    background-image: linear-gradient (180deg, rgba (245,251,234,1.00) 0%,rgba(251,253,247,1.00) 100%);

    }

    {#contentWrapper}

    Width: 86,45%;

    padding-left: 2,275%;

    padding-right: 2,275%;

    Clear: none;

    float: none;

    left margin: auto;

    }

    {#socialMediaBar}

    background-color: #000;

    min-height: 83px;

    border-top-width: 2px;

    border-bottom-width: 2px;

    border-top-style: solid;

    border-bottom-style: solid;

    border-bottom-color: #BDDB6D;

    border-bottom-color: #BDDB6D;

    }

    {#socialMediaWrapper}

    color: #FFF;

    Width: 86,45%;

    padding-left: 2,275%;

    padding-right: 2,275%;

    Clear: none;

    float: none;

    left margin: auto;

    padding-top: 2,275%;

    }

    {#footerBar}

    color: #FFF;

    background-color: #AAAAAA;

    min-height: 176px;

    background-image:-webkit-gradient (linear, 50.00% 0.00%, 50.00% 100.00%, color-stop (0%, rgba (153,153,153,1.00)), color-stop (100%, rgba (185,185,185,1.00)));

    background-image:-webkit-linear-gradient(270deg,rgba(153,153,153,1.00) 0%,rgba(185,185,185,1.00) 100%);

    background-image: linear-gradient (180deg, rgba (153,153,153,1.00) 0%,rgba(185,185,185,1.00) 100%);

    }

    {#footerWrapper}

    Width: 86,45%;

    padding-left: 2,275%;

    padding-right: 2,275%;

    Clear: none;

    float: none;

    left margin: auto;

    }

    IN THE MULTIMEDIA TABLET QUERY SECTION

    {.gridContainer}

    Width: 100%;

    padding-left: 0%;

    padding-right: 0%;

    Clear: none;

    float: none;

    left margin: auto;

    }

    {#div1}

    }

    {#headerBar}

    }

    {#headerWrapper}

    Width: 90.675%;

    padding-left: 1.1625%;

    padding-right: 1.1625%;

    Clear: none;

    float: none;

    left margin: auto;

    }

    {#menuAnimationBar}

    display: none;

    }

    {#contentBar}

    }

    {#contentWrapper}

    Width: 90.675%;

    padding-left: 1.1625%;

    padding-right: 1.1625%;

    Clear: none;

    float: none;

    left margin: auto;

    }

    {#socialMediaBar}

    }

    {#socialMediaWrapper}

    Width: 90.675%;

    padding-left: 1.1625%;

    padding-right: 1.1625%;

    Clear: none;

    float: none;

    left margin: auto;

    }

    {#footerBar}

    }

    {#footerWrapper}

    Width: 90.675%;

    padding-left: 1.1625%;

    padding-right: 1.1625%;

    Clear: none;

    float: none;

    left margin: auto;

    }

    {#menuAnimationWrapper}

    }

    IN THE PC MEDIA QUERY SECTION

    {.gridContainer}

    Width: 100%;

    Max-width: 1920px;

    padding-left: 0%;

    padding-right: 0%;

    margin: auto;

    Clear: none;

    float: none;

    left margin: auto;

    }

    {#headerBar}

    }

    {#headerWrapper}

    Width: 88.5%;

    Max-width: 1232px;

    padding-left: 0.75%;

    padding-right: 0.75%;

    margin: auto;

    Clear: none;

    float: none;

    left margin: auto;

    }

    {#menuAnimationBar}

    display: block;

    }

    {#contentBar}

    }

    {#contentWrapper}

    Width: 88.5%;

    Max-width: 1232px;

    padding-left: 0.75%;

    padding-right: 0.75%;

    margin: auto;

    Clear: none;

    float: none;

    left margin: auto;

    }

    {#socialMediaBar}

    }

    {#socialMediaWrapper}

    Width: 88.5%;

    Max-width: 1232px;

    padding-left: 0.75%;

    padding-right: 0.75%;

    margin: auto;

    Clear: none;

    float: none;

    left margin: auto;

    }

    {#footerBar}

    }

    {#footerWrapper}

    Width: 88.5%;

    Max-width: 1232px;

    padding-left: 0.75%;

    padding-right: 0.75%;

    margin: auto;

    Clear: none;

    float: none;

    left margin: auto;

    }

    {#menuAnimationWrapper}

    Width: 88.5%;

    height: 293px;

    Max-width: 1232px;

    padding-left: 0.75%;

    padding-right: 0.75%;

    margin: auto;

    Clear: none;

    float: none;

    left margin: auto;

    }

  • I have to divs side by side, I want to have the same height

    Hello

    I have divs side by side, I want to have the same height no matter if more content is in div 1 or div 2. I want it to be sensitive so when the window resizes or if the user is on mobile or tablet, it still works. I tried the columns wrong but with the shapes of background / I want that just, it will not work with this technique. I also tried to use the hack 1000px-1000px fill however this cut of the lower part of the div that is unacceptable because the divs have a RADIUS on the corners. He comes to the jquery that I tried and it runs in full screen mode, but when the content inside the div resizing is eliminated. Here is the jquery:

    < script src = "jquery - 1.10.2.min.js" > < / script >

    < script >

    $(document) .ready (function () {}

    {$(window) .resize (function ()}

    resizeDivs();

    });

    var resizeDivs = function() {}

    var highestCol = Math.max ($('.discription').height (), $('.targetinfo').height ());

    $('.discription').height (highestCol);

    $('.targetinfo').height (highestCol);

    var highestCol = Math.max ($('.discription1').height (), $('.targetinfo1').height ());

    $('.discription1').height (highestCol);

    $('.targetinfo1').height (highestCol);

    }

    resizeDivs();

    });

    < /script >

    div help.png

    Please let me know if you have a decent jquery or css solution. So far I have it works in a sensitive environment. Thank you

    If you use fluid grid Layouts, none of these methods do not work.  I think the best you can do is determine the min-height required for desktop computers & tablets.  Mobile devices do not need min-height because these divisions will stack up.

    To illustrate by an example.

    http://ALT-Web.com/FluidGrid/Fluid2.html

    The corresponding CSS code:

    / Special rules for tablets * /.

    @media only screen and (min-width: 481px) {}

    .gridContainer > div {min-height: 255px ;}}

    }

    / * Special rules that apply to workstations * /.

    @media only screen and (min-width: 1025px) {}

    .gridContainer > div {min-height: 325px ;}}

    }

    Nancy O.

  • Dreamweaver CS6 - fluid grid content

    Hello

    I use the fluid grid layout system and I wonder if it is possible to Exchange content when you switch from layout of desktop/tablet smartphone page layout. I know that you have a different CSS for each screensize but I want pictures of smartphone to be smaller files so it downloads faster, I know that the images are resized automatically, but the file size remains the same. Is it possible within dreamweaver or what I need to use a custom code for this?

    Kind regards

    Ransom of Mitchell

    With programming server side, you can dynamically fill the pages based on device-width, or user-agent.

    Nancy O.

  • Change the fluid grid in Dreamweaver CS6?

    I'm trying to understand how do to change my fluid layout grid in Dreamweaver CS6. Can anyone guide me on this issue? I'm also struggling with reorganize my images and text inside the div tags - can't move anything. Can someone enlighten me?

    Project seven Page Packs?  The affinity is their sensitive theme.

    Affinity PVII CSS: Reagents and Mobile-Ready layouts for Dreamweaver

    I use no more than FGLayouts.  At best, it's an OK Starter for your projects of reactive nature.  But I was never enthusiastic with the execution of the interface in DW.  Buggy, very fickle and if you alter the CSS code, it will break the page layouts.  Basically, it's a good idea that was never fully carried out.

    In 2015, CC, it's called fluid grid Layouts (Legacy) which means that it is removed gradually from. IMO, Bootstrap is much better.

    Nancy O.

  • The fluid Div of Grid Layout tag panel?

    I'm not creative Member Cloud but need to update my Dreamweaver 6 with fluid Grid layout panel Div tags

    I'm not creative Member Cloud but need to update my Dreamweaver 6 with fluid Grid layout panel Div tags

    Cloud software is only available to members of cloud.

    Nancy O.

  • How to build a model dreamweaver help than a fluid grid.  My file/save model is grayed out and will not aloow me to save my site as a template page.  Thank you

    Can I do a fluid grid layout template.  If yes how to accomplish this?

    It does not strip the CSS from your code.  If done correctly, deceive you DW thinking that it is a non fluid grid which allows to use design mode.

    Just add an X to code CSS FluidGrid that generates DW for you when you create a new FGLayout.

    Properties Grid Dreamweaver fluid

    ----------------------------------

    DW-num-CLO-mobile: X 4;

    DW-num-CLO-Tablet: 8;

    DW-num-OCOL-Office: 12;

    DW-gutter-percentage: 25;

    =====================================

    To do this, you must manually change the CSS code in Code view. Record. DW to close and reopen DW.

    To return to the mode of FGLayout, you will need to remove the X.  Record.  DW to close and reopen DW.

    Nancy O.

  • Dreamweaver CC has "internal error... when resizing of a vision" when asked to create a fluid grid presentation

    Excited for the scope of the fluid grid layout features, he had, I had creative cloud Dreamweaver SPECIFICALLY for this feature.

    Sign, download, installation went well held. Open Dreamweaver CC, create new flow layout grid, press OK, location name and desigante of the .css file and get the following error.

    "An internal error occurred when resizing to a view. (Cview::ResizeFrameBy) "OK

    I click OK and nothing happens. App freezes. No css, no file. Not nothing.

    Tried to reboot, reinstall, the different names and destinations for .css file. I'm Mac 10.8.2

    Literally, it's the first thing I did w / an app of the ACC, and I am unhappy and frustrated. Via forum or call customer service telephone offshore get less than ideal.

    (my apologies for the misspelling in the subject cannot edit it)

    You can try the steps mentioned on the thread: http://forums.adobe.com/message/5420680

    Fix checked:

    For all the Dreamweaver crashes on the opening of fluid grid pages, closing Documents, or opening files

    Please make sure that the default system fonts are activated all - especially Verdana

    On MAC -.

    Open the police BOOK from Applications

    Activate VERDANA font family

    -Thomas yannick

Maybe you are looking for

  • HP MINI 110-100: video does not

    I have a problem when I play a video. The video isn't smooth, and sometimes it's stagnant causes the audio and video is not sync.Event, I made the video with Sony Vegas Pro 11, take the time 4 - 6 hours for video rendering just 5-6 minutes.I am using

  • What is the best SSD 2016 compatible Mac for a Mid 2010 13 "MBP?

    Hello I'm looking for a compatible Mac (no worries) SSD for my Mid 2010 13 "2,4 Ghz MBP. I can't afford to upgrade to a new MBP. but a 240 GB, 250 GB, 256 GB SSD is desirable. I've read up, and it seems that the Samsungs are a chore for macs. Any sug

  • Does not drive recovery partition creator & data - Satellite L300

    My niece asked me to re - install his Toshiba Satellite L300 laptop computer, because windows setup is a little buggy. She never had a recovery disc. Using Recovery Disk Creator Toshiba I tried to create a recovery disk. However, the program would no

  • Name of the device changed but always communicate with the same device

    Hello! I have two 6501 NIDAQs that I use in two different test of PRINTED circuit board equipment. I gave them names 'Dev1' and 'Dev2.  For some reason they cannot not be plugged into the same computer at the same time (USB), given that my TestStand/

  • Drive hard keeps spinning upwards

    After installation of Windows 7 my disc hard keeps spinning upward every 30 seconds are so.  Any suggestions as to what is the cause and how to fix it?The computer works fine but I have a little busy, accessed HDD for something.