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.

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 can I insert different sizes of Flash in a Fluid Grid layout?

    I am trying to develop a simple website based on the standard template 10.  For this example there are 3 sizes of each image used, to suit the 3 display sizes.
    I wish to do the same with a flash animation, but cannot see how.
    The "@media screen" feature is a CSS only device, whereas the flash animation has to be in the HTML code.
    Being very new to web design, the answer may be simple, and I hope someone can help.

    Short answer:  Don't use Flash.  It's not web friendly and won't work in most mobile devices.
    Long answer:  Depends on what you're using animations for. Look at Edge Animate or jQuery or CSS3 Transitions which work in all mobile / tablet devices:
    http://html.adobe.com/edge/animate/
    http://jquery.malsup.com/cycle/
    http://wowslider.com/
    http://www.adobe.com/devnet/dreamweaver/articles/css-transitions-panel.html
    Nancy O.

  • Using fluid grid layout in Dreamweaver CC - how do I create a dropdown menu within my main navigation?

    I am new to using the responsive fluid grid layouts in Dreamweaver CC - and I am unable to find any information on creating a dropdown menu within my main navigation.
    Any ideas?

    You'll need to find a menu system that is responsive and mobile friendly for touch screen devices.
    If you have a budget to work with, Project Seven's Pop-Menu Magic3 is a commercial extension for DW that works great out of the box.
    http://projectseven.com/products/menusystems/pmm3/index.htm
    If you don't have a budget, you'll need to create a desktop menu and add a jQuery plugin for mobile devices.
    Basic CSS Drop Menu
    http://jsfiddle.net/mD4zW/28/
    jQuery MeanMenu for mobile/tablet devices
    MeanThemes | MeanMenu
    This is a working example inside a FluidGrid Layout (resize viewport)
    Alt-Web :: Fluid Grid Test
    Nancy O.

  • How to edit fluid grid layout in Dreamweaver CS6

    Hi all
    I am a designer at the company I work for and we've been building repsonsive designs for the past 12months. I've decided that it would be good for me to try out the new fluid grid layout tool in Dreamweaver CS6 to see if we can improve the design process by using dreamweaver to allow us to quickly prototype my designs for mobile, tablet and desktop.
    However I have 2 problems so far.
    1) I've created my first fluid grid layout and saved all the files into a new folder. I set grid widths and gutter but now want to edit the values as I am not happy with the gutter. Can this be done? I can't seem to find the file that does this so can anyone point me in the right direction?
    2) We have traditionally used pixels to define our grids. I normally produce a grid with a fixed pixel gutter, overall width and column size. It seems that Dreamweaver only has the option to use percentages. Can anyone tell me if this can be changed and again where I can do this?
    Thanks for your  help
    Trevor

    In Code View, open your FluidGrid.css file (or whatever you named it) when you created the layout.
    FluidGrid Layouts are not perfect and the interface could use a lot of improvement.  That said, I think they can be used as a starting point for simple layout projects providing you understand their limitations and are willing to manually tweak the FluidGrid.css code.   
    If you've been doing Responsive Layouts for 12 months, you're probably building desktop to mobile whereas FluidGrids build from mobile to desktop.   It takes a little adjustment in thinking.
    Keep FluidGrid.css for layout only.  Use a seperate stylesheet for your content styles. 
    Nancy O.

  • Creating new website with Fluid Grid Layout in CS6 - CS3 Transitions problem

    I am making my second website with Fluid Grid layout and as with my last one, it seems I can't use CS6 transitions. Each time I go to add a new transition, Dreamweaver stops working and shuts down. Should you be able to use the transitions function with CS6 transitions or not? In the end, what I want to do is create a behaviour where one image is swapped with another with a click (not a rollover as it won't work on mobiles, I believe).
    Thank you

    Add a link to jQuery's Latest Library to your document <head> tags.
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    Add the jQuery function code to <script> tags in your document. I typically put them right above the closing </body> tag.
    <script>
    $(document).ready(function () {
        $("#one").click(function () {
            $("#one-a").toggle('slow');
        $("#two").click(function () {
            $("#two-a").toggle('slow');
        $("#three").click(function () {
            $("#three-a").toggle('slow');
    </script>
    </body>
    As to why DW is closing you down, I don't know.  That's not an expected behavior. 
    Without seeing your code, I'm going to guess that your CSS transition logic is incorrect or you're attempting to add transitions to the FluidGridLayout.css which is never a good idea.  Always use a separate, external style sheet for your manually added content styles.  Changes to either boilerplate.css or the temperamental FluidGridLayout.css files can result in problems.
    Nancy O.

  • How do you add a Facebook "like" button to a Fluid Grid layout?

    There are two snippets of javascript from Facebook you're supposed to paste into two different places. Something about the Dreamweaver fluid grid makes it work differently, though, and I can't figure out what it is. I can't figure out what to do with the snippets of code to make the Facebook box/button show up in the browser window.

    Here's what the FB page says to paste just after the body tag:
    <script>
      window.fbAsyncInit = function() {
      FB.init({
      appId  : '196637453839945',
      xfbml  : true,
      version  : 'v2.1'
      (function(d, s, id){
       var js, fjs = d.getElementsByTagName(s)[0];
       if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
       }(document, 'script', 'facebook-jssdk'));
    </script>
    Here's what it says to paste into the spot where you want it to appear:
    <div
      class="fb-like"
      data-share="true"
      data-width="450"
      data-show-faces="true">
    </div>
    Seems simple enough, but it hasn't appeared on the page in a browser.

  • How to increase the width of the Fluid Grid Layout from 1008px to 1080px?

    Good day all, I'm experiencing a slight problem with Fluid Grid Layout in Dreamweaver CS6. I want to increase it's width so that it could be one with my Photoshop CS6 design (which is 1080px), the problem is that I can't as I am limited to 1008px. How do I increase the width? I ultimately am re-coding my design as my client demanded a responsive design but I'm clueless in that avenue which is why I resorted to re-doing everything under the set & safe default (Fluid Grid Layout) that doesn't require me to udnderstand media queries at an expert level.  

    While Fluid Grid Layout can save you some production time, you still need a good understanding of CSS Media Queries to use it.
    Introduction to CSS Media Queries
    http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-que ries.html
    CS6 Fluid Grid Layouts (6 min video)
    http://tv.adobe.com/watch/digital-design-cs6/creating-adaptive-designs -using-fluid-grid-layouts-in-dreamweaver-cs6/
    CS6 Fluid Grid layouts (17 min video)
    http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layou ts/
    Step-by-Step tutorial -- Building Fluid Grid Layouts in DW CS6
    http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs 6.html
    Instead of fixed-widths in pixels, FLG code is all % based.  It starts with the mobile layout and cascades to tablet, then desktop.  If you want to use fixed-widths in pixels, you must manually change the CSS code for all three devices.
    Nancy O.

  • Dreamweaver CS6 - New Feature - Fluid Grid Layouts

    For those interested in what is coming in CS6, John Nack just posted a video on his blog to see about Fluid Grid Layouts:
    http://blogs.adobe.com/jnack/2012/04/sneak-peek-of-fluid-grid-layouts-in-dreamweaver-cs6.h tml

    A bit more http://www.dwcourse.com/dreamweaver/dreamweaver-cs6-features.php
    Gramps

  • How to set default size for .chm window?

    I know there is an answer at grainge.org, but it seems to be
    referring only to a .chm using skins, which I am not.
    Anybody know how to make the default size of the .chm larger?
    thanks, Leisa

    Lacona,
    The default window size is set in your windows properties
    dialog in RoboHelp. It can also be set manually in the .hhp file
    before you compile. If you open the .hhp file in a text editor,
    such as Notepad, you will see a [WINDOWS] section and for each
    window defined there will be a series of numbers. One of these is a
    vector [in square brackets] that defines the original position.
    These are absolute screen pixels.
    In older versions of RoboHelp, one of which I use, there was
    a limit to the size of the window RH would allow but when I changed
    the .hhp, RoboHelp didn't try to overwrite it unless I reopened the
    Windows properties dialog. I'm not sure how the latest versions
    handle this but you might try editing the .hhp with Notepad and
    then compiling the .chm.
    John

  • How to set default size for published SWF in Catalyst CS5.5

    I create a 800*600 pixel project in Catalyst CS5.5 and published it as .swf.
    But when I opened the published .swf, the default size is smaller than 800*600. I have to resize it by myself.
    So is there any method that I can set the default size for published .swf?
    Thank you guys! Best regards.
    Nick

    When you start new Flash Catalyst project, you have the option to enable resizing
    This setting is enabled by default.
    If you need to change this later, you can go into Modify > Artboard settings.
    Now when you publish your project, the width and height will be used instead.
    As to manually editting the HTML file, there are 3 tag sets that define the width and height of the project (to handle various browsers). You will need to adjust the values in each of those tag sets. You should only need to do this if you can't republish the file.
    Chris

  • How can I permanently enlarge the default size for pop-ups?

    I use several sites that employ pop-ups. The default size is too small, so I have to manually enlarge each pop-up. How can I set the default size for pop-ups to a larger size. I don't want them maximized, just larger than the default.

    A pop-up should fit normally unless you are zooming images or text or increasing elements otherwise.
    Reset the page zoom on pages that cause problems.
    *<b>View > Zoom > Reset</b> (Ctrl+0 (zero); Cmd+0 on Mac)
    *http://kb.mozillazine.org/Zoom_text_of_web_pages
    If you have increased the minimum font size then try the default setting "none" as a (too) high value can cause issues.
    *Tools > Options > Content : Fonts & Colors > Advanced > Minimum Font Size (none)
    Make sure that you allow websites to choose their fonts.
    *Tools > Options > Content : Fonts & Colors > Advanced > [X] "Allow pages to choose their own fonts, instead of my selections above"
    *https://support.mozilla.org/kb/Changing+fonts+and+colors
    It is better not to increase the minimum font size, but use an extension to set the default page zoom to prevent issues with overlapping text.
    *Default FullZoom Level: https://addons.mozilla.org/firefox/addon/default-fullzoom-level/
    *NoSquint: https://addons.mozilla.org/firefox/addon/nosquint/

  • How do I change the default zoom for New Tab only?

    The New Tab zoom in Firefox 33 is too high to see all 12 of my thumbnails. I changed it using ctrl- but the next time I opened a New Tab, the zoom was back at 100%. How do I change the default zoom for New Tab only?

    cor-el, what am I looking for in '''content-prefs.sqlite'''?

  • How do I set the default zoom for new sheets to 150%?

    I'm using the latest edition of Numbers and I'd like to set the default zoom for new sheets to be 150% when they are created rather than the default 100%. Does anybody know how to do this?
    Thanks,
    d.

    Try Numbers menu > Preferences > Rulers >Default Zoom.

  • How to setup a global artwork for a TV Show

    Hi, I've a TV Show composed by 45 episodes where each one have his artwork but I don't know how to setup a global artwork for the TITLE of the TV Show while retaining the 45s artworks.
    ie. when watching the Tv Shows (library on iTunes) I would like to see the global artwork of the Tv Show that is different of the other 45s episodes contained.
    Bye, Roberto.

    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.

Maybe you are looking for