helps to create a fluid grid / muse of tile layout

Hello, I am new in muse and try to create a fluid grid presentation.

I want to achieve is the images rearrange dependent selves on their size. I've seen this in a few other places, like this is the case here...

ZAVEN - Zaven is a design, research, and communications studio based in Venice, Italy.

As you will see, depends on the size of the browser window, the images rearrange to fit.

It is a website created in wordpress. And if I can recreate this kind of tile / grid Muse would be great.

I've also attached a few images, showing the effect I want to achieve, these images are from my email client, I like the way the window rearranges literally just the images to fit.

Fluid-tilling..jpg

If anyone out there knows how to achieve that would be great...

Kind regards

Andrew

In Muse can make a checkerboard to fluid. You can manually set the breakpoints and manually change the location of the content in each breakpoint.

Watch this tutorial Responsive web design in Adobe Muse | Adobe Muse CC tutorials

Tags: Adobe Muse

Similar Questions

  • 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

  • Is it possible to have a fluid grid Muse presentation?

    I recently created a fictitious Web site for a mid-term that I needed to do, and the instructor wants a sensitive site. Is it possible to do what only in Muse? Because I rather not head back to Dreamweaver and do all this again just to start from scratch. @

    Hello

    Take a look at this topic, discussing the same topic,

    You can use grid to fluid on the websites built with Muse?

    If you still have questions, please let us know.

  • I need help in creating one (Table / Grid) using Flash Builder (not a datagrid)

    I'm looking for a way to create a dynamic table / grid somewhat like a sheet or spread html table. but I want to create all the cells via a loop.

    The following diagram was created using php to execute a loop and writing on the cells and the duration for each cell in the grid/table. But I have no idea where to start in flash builder to build something like this.

    Some cells will last 2 to 4 columns as shown in the following diagram.

    grid-table.gif

    Any suggestions on how to create this type of table or grid in Flash Builder?

    I looked through most of the components, but I'm not sure which component to use.

    Help in this would be greatly appreciated.

    Thank you to

    Maurice

    It's ok, I thought about it.

    just by using containers grid Flash builder 4.5

  • Creating fluid grid templates

    I have a very large site for a real estate company that I sold as a RWD. They have 175 pages or lists.

    I have a good handle on the DW grid design tools of fluid. When a try to create a DIV inside an editable area of the DIV loses it's grid commonly features like copy, hide, sizing, etc..

    Anyone working with models and grid of fluid of DW. Is there a way around this problem. For any help or suggestion would be appreciated.

    Thank you

    dlipscombe

    I'm still able to get the fluid grid HUDs inside an editable area.

    Can you try to activate the mode live view and see if you can get the HUDs?

    Keep us informed.

  • Is it possible to create a model using fluid grids?

    I'm working on a new site and now starting to really try and arrange everything correctly, so what I want to do is to create a master page to work from universal.  I understand that this is not a master page as such, I read that you need to create a template and a link to that, but I don't see how to do this with a checkerboard in fluid.

    Is it possible to use fluid grids, keeping a 'template' link to and do NOT have to redo all the work I've done so far?

    Thanks for any help in advance =]

    Read F1 help on DW models to gain an understanding on how they work.

    1. Make your prototype of FluidGrid page.  Check in all browsers, and when you are satisfied of how it looks and reads the file save as Template.dwt.
    2. Add editable regions for things that will change the page.  Save and close the template.
    3. Go to file > new model page.  Press the button create.
    4. This new file is a page of the child.  SaveAs index.html (your home page) or a different file name.
    5. Repeat steps 3 & 4 for your other pages of the site.
    6. Re-open the model and add links to your navigation menus.
    7. Save the model and fill changes to the child pages.
    8. Child pages look in browsers before uploading to your remote server.
    9. Repeat steps 7 & 8 whenever you make changes to your file main template.dwt.

    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.

  • Help! I created a website in Muse. But he resumed the model in the Tablet and phone version?

    Help! I created a website in Muse. But he resumed the model in the Tablet and phone version?

    I deleted the version Tablet and phone. -J' then looked on my devices after refreshing the browser / history of compensation. He is always picking the layout of the model and not all my changes.
    That is to say: don't default to the version of office.

    I also tried to add the alternative layouts again, asking him to copy from the desktop version. Still no luck.

    I downloaded this on www.yourtestsite.co.za

    I have the same problem with another site, I did for www.rockerdistributors.co.za

    Hello

    I replied to your other thread, Help! I created a website in Muse. But he resumed the model in the Tablet and phone version?

  • Total Crash (CC) to try to create a presentation grid of fluid!

    I hope that someone can recreate it, because I'm climbing on the walls now.  Where to start?  I am trying to create a single page of fluid-grid.  I'm too tired to repeat the steps with brevity, but after being prompted to save my CSS, I do.  That's when mistakes start.

    A first:

    Screen Shot 2013-06-18 at 1.22.41 AM.png

    (2) then, when you open files, it is just blank.  No grids, no code layout, just a simple HTML file.  So, then, I tell myself that I should record everything, to 'generate', the standard CSS and JQuery min page, which should probably appear by default, but I'll save anyway.  This is when it crashes.  So, I open again.  Try to open the first file I created: crash.

    (3) so, I thought that maybe my installation had been botched.  I uninstall and reinstall.  Accidents of same.  So, I thought that maybe it could be corrupted in my web folder files (really just trying anything at this point.) So, I create a brand new site. Same exact scenario.

    Now, I understand that nobody has really had the opportunity to experience, then this is probably a stupid exercise, but perhaps someone can recreate it?

    I'm too tired to explain more, but I was really, really hoping that I could use this option away a model of work for a client.  Work begins on Wednesday. It is not possible to learn the delicate design in a week, as someone suggested, so I'm really at a loss... Simple I don't know what to do!

    Arindam_G,

    That was my problem, requests for information on the page of styles.css.  Lack a '} '.  It solved the problem for one of the sites that I had built.   Works through other sites to see if it solves the problems.

    Thank you all!

    EDLT: Solved the problem for all the fluid grid sites that I had built using Dreamweaver CS6.  I can now get up to speed on the new features added in Dreamweaver CC.

    Once again, thank you all!

  • Can you add a video to a fluid grid project in CS6

    Hi again;

    I think of the CS6 upgrade to help with my video problem in CS 5.5 and I was wondering if you can add video to a web project of fluid grid.  Of that I looked on the web, it seems that everything is a web site to a page with links to an area on the index page.  I need to get the video into my site as examples of what I'm doing and the fluid grid is superb.  I also suspect that I could put a link to a site of videos like Vimeo.

    Thanks for your help.

    Tom

    wondering if you can add video to a web project of fluid grid.

    Sure.  You can drop your own HTML5 videos or embed Vimeo, YouTube, etc...

    Of that I looked on the web, it seems that everything is a web site to a page with links to an area on the index page.

    Not true.  jQuery Mobile and fluid grid Layouts differ a little, not to get confused.

    JQuery Mobile is essentially a website a page for mobile devices.

    With fluid grid Layouts however, you can make a layout of reagent website in a few minutes, then save as template.  Use file > new template page to create the rest of your site pages. Or, you can use the jQuery tab panels inside the fluid grid layouts.  It is entirely up to you.

    Nancy O.

  • layout and fluid grid div tags

    so now, I start my journey of learning the layout feature fluid grid dw6.  just started and have already fallen on a problem. When to create a div, I prefer to give them a width and height seems just to help put on the page, but in fgl when I put the value for these it just seem to ignore it, is this true?  If so, how does this work?

    Hello

    The idea of using a fluid grid presentation is that the size of the div elements will adjust themselves based on the width different screen sizes.

    It is difficult to say without seeing your design/layout that you work to say whether or not you should actually try to set the fixed width and height for your div elements fixed width setting is fine if you are designing a traditional presentation, fixed width, it can help you to read this article on the differences between fixed vs fluid layouts http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-r ight-one-for-you /

    Since you mention that you are just starting to work with fluid grid, maybe check out Adobe TV can help you get started...

    Alassane http://TV.adobe.com/watch/Learn-Dreamweaver-CC/Create-Fluid-Responsive-Web-pages-in-dreamw.

    Good luck!

  • Fluid grid width

    Hey!

    When you create a new fluid grid in Dreamweaver Web site - why the desktop width is set to 1232px? Why not for example, 1280px?

    I know that you can set the max width for all you want, but why is the default desktop width to 1232px?

    Bildschirmfoto 2013-07-30 um 20.35.30.png

    I would be really grateful if you can help me!

    See you soon

    SHORT ANSWER: To allow for chrome browser.

    LONG ANSWER: The max-width must be less than your device bandwidth target (1280px) so that your page will fit comfortably inside the browser window, without lifting the horizontal scroll bars.   Same rule applies if you are targeting 1024px or 1900px.  Always shave about 1% for the browser scrollbars, gutters, curbs, etc...

    Nancy O.

  • Max-height in fluid grid

    I created a transition .css for expand/collapse to the overview of a div in CS6.  I set the max-height for the div for the office, however, I would like to set different max heights for the Tablet and mobile page layouts since the Office max height is too big to hide the info in these layouts.

    Here is my current code of .css:

    #whf-content {

        clear: both;

        float: left;

        margin-left: 0;

        width: 100%;

        display: block;

        color: #FFF;

        background-attachment: fixed;

        background-repeat: repeat;

        background-color: #000;

        max-height: 278px;

        overflow: hidden;

    }

    #whf-content {

        clear: both;

        float: left;

        margin-left: 0;

        width: 66.6666%;

        display: block;

        max-height: 190px;

    }

    #whf-content {

        clear: both;

        float: left;

        margin-left: 0;

        width: 32.6007%;

        display: block;

        -webkit-transition: all .75s ease 0s;

        -moz-transition: all .75s ease 0s;

        -ms-transition: all .75s ease 0s;

        -o-transition: all .75s ease 0s;

        transition: all .75s ease 0s;

    }

    #whf-content:hover {

        max-height: 999px;

    }

    As you can see, I tried to do two different values of max height with 278px and 190px above BUT when I do that, the 190px affects the view of the Office of the substitution of the value of 278px.

    My question is, how can I set different heights max for the same div only affect each individual fluid grid view?  Any help would be greatly appreciated.

    Thanks a lot for your help Nancy.  I chose to stay in FluidGrid.css and exchanged the transition .css hover with a Panel widget reducible Spry.  Who managed the problem of resizing, as well as the absence of Hover on the tablets and phones.  In case someone has a similar problem, I'll include the .css for the layout as well as the Spry .css.

    CSS Spry Collapsible Panel:

    @charset "UTF-8";

    / * SpryCollapsiblePanel.css - version 0.5 - Pre - Release Spry 1.6.1 * /.

    / * Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

    / * This is the selector for the main container of CollapsiblePanel. For our

    * style by default, the CollapsiblePanel is responsible to draw borders

    * about the widget.

    *

    * If you want to limit the width of the CollapsiblePanel widget, set a width

    * the CollapsiblePanel container. By default, our CollapsiblePanel extends horizontally to fill

    * a space available.

    *

    * The name of the class ("CollapsiblePanel") used in this switch is not necessary

    * make the widget function. You can use any class name you want to style the

    * CollapsiblePanel container.

    */

    . CollapsiblePanel {}

    margin: 0px;

    padding: 0px;

    }

    / * This is the selector for the CollapsiblePanelTab. This container houses

    the Panel personnel. It is also the container where the user clicks

    * to open or close the Panel.

    *

    * The name of the class ("CollapsiblePanelTab") used in this switch is not necessary

    * make the widget function. You can use any class name you want to style a

    * The CollapsiblePanel tab panel container.

    */

    . {CollapsiblePanelTab}

    margin: 0px;

    padding: 2px;

    cursor: pointer;

    -moz-user-select: none;

    -khtml-user-select: none;

    do-family: Georgia, "Times New Roman", Times, serif;

    do-size: 14px;

    make-weight: bold;

    text-align: center;

    color: #FFF;

    }

    / * This is the selector for the content area of a CollapsiblePanel. It is important to note that

    * You should never put any filling on the element of content area if you plan to

    * use opening and closing of the CollapsiblePanel animations. Place padding non-zero on the content

    * item may cause the CollapsiblePanel suddenly increase in height, while signs alive.

    *

    * The name of the class ("CollapsiblePanelContent") used in this switch is not necessary

    * make the widget function. You can use any class name you want to style a

    * CollapsiblePanel content container.

    */

    . {CollapsiblePanelContent}

    margin: 0px;

    padding: 4px;

    do-family: Georgia, "Times New Roman", Times, serif;

    do-size: 14px;

    color: #FFF;

    }

    / * An anchor tag can be used inside a CollapsiblePanelTab so that the

    * keyboard focus ring will appear * inside * the tab rather than around the tab.

    * This is an example of how to make the text in the eyes of anchor tag

    * as the non-anchor (normal) text.

    */

    . CollapsiblePanelTab a {}

    text-decoration: none;

    }

    / * This is an example of how to change the appearance of the tab of the Panel which is

    * currently open. The "CollapsiblePanelOpen" class is added and removed programmatically

    * to panels as long as the user clicks on the tabs within the CollapsiblePanel.

    */

    . CollapsiblePanelOpen. {CollapsiblePanelTab}

    }

    / * This is an example of how to change the appearance of the tab panel when the

    * CollapsiblePanel is closed. The "CollapsiblePanelClosed" class is added and removed programmatically

    * whenever the CollapsiblePanel is closed.

    */

    . CollapsiblePanelClosed. {CollapsiblePanelTab}

    / * background color: #EFEFEF * /.

    }

    / * This is an example of how to change the appearance of the tab of the Panel as the

    * mouse passes over it. The "CollapsiblePanelTabHover" class is added programmatically

    * and removed containers tab panel as the mouse enters and leaves the tab container.

    */

    . CollapsiblePanelTabHover. CollapsiblePanelOpen. {CollapsiblePanelTabHover}

    }

    / * This is an example of how to change the appearance of all the Panel tabs when the

    * CollapsiblePanel has focus. The class "CollapsiblePanelFocused" is programmatically added and removed

    * whenever the CollapsiblePanel WINS or loses the keyboard focus.

    */

    . CollapsiblePanelFocused. {CollapsiblePanelTab}

    }

    CSS layout:

    @charset "utf-8";

    / * Simple fluids

    Note: Fluid requires that you remove the attributes height and width of the media of the HTML

    http://www.alistapart.com/articles/fluid-images/

    */

    IMG, object, embed, {video

    Max-width: 100%;

    }

    / * IE 6 doesn't support max-width so 100% width by default * /.

    . IE6 img {}

    Width: 100%;

    }

    /*

    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/

    */

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

    {.gridContainer}

    left margin: auto;

    margin-right: auto;

    Width: 88.0326%;

    padding-left: 1.4836%;

    padding-right: 1.4836%;

    }

    {#LayoutDiv1}

    Clear: both;

    float: left;

    left margin: 0;

    Width: 100%;

    display: block;

    }

    #header {}

    Clear: both;

    float: left;

    left margin: 0;

    Width: 100%;

    display: block;

    }

    #maincontent {}

    Clear: none;

    float: left;

    margin left: 2.6785%;

    Width: 100%;

    display: block;

    }

    #navigation {}

    Clear: none;

    float: left;

    left margin: auto;

    Width: 100%;

    display: block;

    top of the margin: 80px;

    margin-bottom: 80px;

    background-color: #300;

    height: 16px;

    top: 5px;

    }

    {#whf - content

    Clear: both;

    float: left;

    left margin: 0;

    Width: 100%;

    display: block;

    }

    {#theride - content

    Clear: both;

    float: left;

    left margin: 0;

    Width: 100%;

    display: block;

    }

    {#donate - content

    Clear: both;

    float: left;

    left margin: 0;

    Width: 100%;

    display: block;

    color: #FFF;

    background-repeat: repeat;

    background-attachment: fixed;

    border: 0px solid #666;

    }

    #footer {}

    Clear: both;

    float: left;

    left margin: 0;

    Width: 100%;

    display: block;

    color: #FFF;

    background-attachment: fixed;

    background-image: url (.. / bkgdContent.png);

    background-repeat: repeat;

    top of the margin: 20px;

    }

    / * Tablet Layout: 481px to 768px. Inherits the styles of: Mobile layout. */

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

    {.gridContainer}

    Width: 91.4836%;

    padding-left: 0.7581%;

    padding-right: 0.7581%;

    }

    {#LayoutDiv1}

    Clear: both;

    float: left;

    left margin: 0;

    Width: 100%;

    display: block;

    }

    #header {}

    Clear: both;

    float: left;

    left margin: 0;

    Width: 100%;

    display: block;

    }

    #maincontent {}

    Clear: none;

    float: left;

    margin left: 1.6574%;

    Width: 100%;

    display: block;

    }

    #navigation {}

    Clear: both;

    float: left;

    left margin: 0;

    Width: 100%;

    display: block;

    height: 16px;

    }

    {#whf - content

    Clear: both;

    float: left;

    left margin: 0;

    Width: 100%;

    display: block;

    }

    {#donatecontent}

    Clear: none;

    float: left;

    margin left: 1.6574%;

    Width: 100%;

    display: block;

    }

    {#theride - content

    Clear: both;

    float: left;

    left margin: 0;

    Width: 49.1712%;

    display: block;

    }

    {#donate - content

    Clear: none;

    float: left;

    margin left: 1.6574%;

    Width: 49.1712%;

    display: block;

    }

    #footer {}

    Clear: both;

    float: left;

    left margin: 0;

    Width: 100%;

    display: block;

    }

    }

    / * Office Layout: 769px to a maximum of 1232px.  Inherits the styles of: Mobile and tablet. */

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

    {.gridContainer}

    Width: 89.0217%;

    Max-width: 1232px;

    padding-left: 0.4891%;

    padding-right: 0.4891%;

    margin: auto;

    }

    {#LayoutDiv1}

    Clear: both;

    float: left;

    left margin: 0;

    Width: 100%;

    display: block;

    }

    #header {}

    Clear: both;

    float: left;

    left margin: 0;

    Width: 100%;

    display: block;

    color: #FFF;

    }

    #maincontent {}

    Clear: both;

    float: left;

    left margin: 0;

    Width: 32.6007%;

    display: block;

    }

    #navigation {}

    Clear: both;

    float: left;

    left margin: 0;

    Width: 100%;

    display: block;

    }

    {#whf - content

    Clear: both;

    float: left;

    left margin: 0;

    Width: 32.6007%;

    display: block;

    }

    {#donatecontent}

    Clear: none;

    float: left;

    margin left: 1.0989 per cent;

    Width: 100%;

    display: block;

    }

    {#donate - content

    Clear: none;

    float: left;

    margin left: 1.0989 per cent;

    Width: 32.6007%;

    display: block;

    }

    #footer {}

    Clear: both;

    float: left;

    left margin: 0;

    Width: 100%;

    display: block;

    }

    {#theride - content

    Clear: none;

    float: left;

    margin left: 1.0989 per cent;

    Width: 32.6007%;

    display: block;

    }

    }

    #whf - content: hover {}

    Max-height: 999px;

    do-family: Georgia, "Times New Roman", Times, serif;

    }

    {#whf - content

    do-family: Georgia, "Times New Roman", Times, serif;

    }

  • 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

  • CS6 fluid grids and creation of models

    I use only CS6 for two weeks and have bought after a trial because Expression Web Design seems to go nowhere with regard to future facilities.

    In particular, fluid grids attracted me and I created a site using this and am satisfied with the result.

    Now, I want to take a second site, that I had in development and change it to a fluid design grid.

    My question is it please, can I copy a page of this first site, together wih boilerplate.css and layout.css and paste it into the second site, that I will then edit and convert to grids of fluid using Dreamweaver.

    Or do I have to create a new design of the grid of fluid in the root of the second site so that DW has hidden references to this particular to each site or something.

    After only two weeks and a site I have not yet watched the templating integrated with Dreamweaver, I mean a self created the model from another site

    You should start with a fluid layout grid - either a new or one that you have previously built by copying all the files of the site concerned in the 2nd Local site folder.

    • fluidgrid.html
    • fluidgrid. CSS,
    • boilerplate. CSS,
    • Respond.min.js

    Then add content in the appropriate LayoutDivs.

    Before attempting to use the DW template features, read everything in F1 (help) about them.  Templates can be difficult if you don't use them correctly.

    Nancy O.

Maybe you are looking for