Fluid Flash layout question.

I am working on a flash site with many scenes with movie
clips, different clips but same size and same position.
I just set up the layout using fluid with this function
sizeListener.onResize = function() {
centered._x = Stage.width/2
centered._y = Stage.height/2
centered._width = Stage.width * .5
Works great.
To make it work for all scenes and each instance names of my
movie clips I copy the script on the first frame of each scene and
change the instance names.
Is it the proper way and/or is there another or better way.
Thanks for your help.
Chris.

It's really better to build one layout for your entire site.  You may decide not to use all the elements on every page, but your primary design scheme should take everything into consideration much the way Bootstrap, Skeleton and other RWD frameworks do. 
If necessary, you can use embedded CSS for a few page specific style changes.  Embedded CSS will trump your external style sheets. 
Nancy O.

Similar Messages

  • Fluid Grid Layout - Beginner's Questions

    First, let me explain once again that I can't reply to my own threads because the "Reply" function isn't working in my browsers for some reason. (Thanks for your tips on my other questions, Ben Pleysier and Nancy O.)
    Anyway, I want to modify my websites so they work in mobile devices, and I now have my first Fluid Grid Layout up and running. However, there are some bugs I need to work out.
    I experimented with two or three fluid grids and just realized that they're very different for some reason. I think I inserted the wrong elements or inserted them in the wrong location.
    Does the HTML code below look OK? I understand that everything is supposed to be inside div.gridContainer, which begs the question why are the last two divs (div.fluid and div#div1) OUTSIDE div.gridContainer? Are these extraneous divs that I can delete?
    Am I supposed to have a div#page and div data-role="header"?
    It looks like all my actual content - including the footer? - should go inside div data-role="content", right? And am I going to have to apply class="fluid Paragraph" to every paragraph in my database tables?
    Some of the confusion may be because some of these unfamiliar elements (e.g. "data-role") may be HTML5, which I'm also just learning about.
    If anyone could post a link to a web page(s) using Dreamweaver's Fluid Grid Layout, so I can examine the source code, it would be really helpful. Thanks!
    <body>
    <div class="gridContainer clearfix">
      <div data-role="page" id="page">
        <div data-role="header">
        <?php require_once($BaseINC."/$MyPHP/inc/D/Shared/Body/Header.php"); ?>
        </div>
        <div data-role="content">CONTENT </div>
        <!--This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats--><br class="clearfloat">
        <header class="fluid Header">This is the content for Layout Header Tag "Header"</header>
        <p class="fluid Paragraph">This is the content for Layout P Tag "Paragraph"</p>
        <footer class="fluid Footer"><?php require_once($BaseINC."/$MyPHP/inc/D/Shared/Footer.php"); ?></footer>
      </div>
    </div>
    <!--Are div.fluid/DivBase and div#div1 supposed to be here, outside div.gradContainer? Can I delete them, or do they serve some purpose other than relaying information for getting started?-->
    <div class="fluid DivBase">This is the content for Layout Div Tag "DivBase"</div>
    <div id="div1" class="fluid">Use Insert Panel for additional Fluid Grid Layout Elements. Note: All Fluid Layout tags must be contained within the "gridContainer" div tag.</div>
    <!--I included some files that will be absolutely positioned near the top here.-->
    </body>
    </html>

    #1  Success with FGLayouts comes from experience.  I built 9 test layouts before I got an acceptable one.  A few tips.  Build Mobile first because that is what everything else is based on.  Then build Tablet & finally Desktop.  Do not tamper with code in FluidGrid.css or Boilerplate.css files.  Use a separate, external style sheet for your content styles.
    #2  Depends on whether or not you want the divs to fall outside your #gridContainer.  For example, let's say you want a 100% width header & footer that stretches the entire width of your page in all devices.  In that scenario, you would have to move <header> and <footer> tags above and below gridContainer div.  Otherwise, everything else needs to be inside the gridContainer in order to respond to the media queries.
    #3  APDivs will not work right in FluidGrid Layouts -- or any RWD for that matter -- so don't even go there.  
    Nancy O.

  • I'm designing my first website using Fluid Grid Layouts. CSS question

    I'm designing my first website using CS6 and Fluid Grid Layouts so I need a lot of help. I realize CS6 creates something called a boilerplate css file. However, in addition to that file, do I have to create an individual external style sheet for my desktop, ipad, and smart phone pages (3 separate style sheets) or should I have only one external style sheet for everything?
    Or this is there another recommended way to use Fluid Grid Layouts?

    FluidGrid Layouts creates a boilerplate.css file, a respond.js file & a Fluid.css file for you -- you name it whatever you like.  I like to call mine Fluid.css so I remember what it is. 
    Fluid.css contains mobile first -- upon which all others are based.  Inside, CSS Media queries, you'll find code for tablet and later on desktop.  So one stylesheet generated by DW covers all 3.
    TIPS: 
    FluidGrids are very temperamental.  Do not tamper with boilerplate.css or Fluid.css files.  Instead create a separate external style sheet for your typography & other custom content styles.
    Build mobile first, then tablet and finally desktop.
    Keep your designs simple and uncluttered. 
    Don't worry about content until you get the layout perfected.
    Have fun with it .  You'll probably have to start over a few times before you get what you want.
    Nancy O.

  • How do I get my Fluid Grid Layout page to resizes from portrait to landscape for iPhones?

    Starting in portrait on my iPhone 4, the fluid grid layout page does not resize when I turn to landscape.  After I refresh / resize to fit the page on landscape and then turn the iPhone to portrait, the page resizes just fine.  Everything seems to be working just fine on the desktop, ignoring IE.  Could it be my media query tags?
    If anyone knows a solution, it would be much appreciated.  Thanks.
    Here is my test page: http://www.bedroomandmore.com/1_b_fluidGrid.html
    Here are my media query tags (the first set of rules does not have the media query tag and becomes the default):
    @media only screen and (max-device-width: 480px) and (orientation : landscape) {
    @media only screen and (min-width: 481px) {
    @media only screen and (min-width: 769px) {
    Here is most of my media query CSS:
    @charset "UTF-8";
    /* 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%;
    /* Mobile Layout: 480px and below.(smartphone portrait) */
    .gridContainer {
              width: 95.4184%;
              padding-left: 0.5907%;
              padding-right: 0.5907%;
    #header {
              clear: both;
              float: left;
              display: block;
              margin-left: 0%;
              width: 72%;
              max-height: 0%;
              display: -moz-box; /* Firefox */
              display: -webkit-box; /* Safari and Chrome */
              display: box;
              border: none;
              top: auto;
              padding-top: 0.25em;
    #menuHorizontal {
              clear: both;
              float: left;
              width: 118%;
              height:100%;
              margin-left: auto;
              position:relative;
              top:-1em;
              display: block;
    #slides {
              clear: both;
              float: left;
              margin-left: 0.1em;
              width: 119%;
              position: relative;
              top: -1em;
              display: block;
                        /*Slides container: Important: Use position:relative; with top:-1em; together to position div.
                                  Set the width of your slides container
                                  Set to    display: none     to prevent content flash*/
    .slides_container {
              clear: both;
              width: 100%;
              display: block;
                        /*Each slide: Important:
                                  Set the width of your slides
                                  If height not specified height will be set by the slide content
                                  Set to     display: block     for original setting
                                  slide_container is container size
                                  slides_container div set the size of the image inside--adjust to fit image in it so it is not cropped*/
    .slides_container div {
              clear: both;
              width: 69%;
              display: block;
              /* Mobile Layout: 480px. (smartphone landscape)
                                  Inherits styles from Mobile Layout 480px.
                                  Set to clear:none; to allow div to shift up
                                  Or set to clear:both; to take a whole row of the screen*/
    @media only screen and (max-device-width: 480px) and (orientation : landscape) {
    .gridContainer {
              width: 95.4184%;
              padding-left: 0.7907%;
              padding-right: 0.7907%;
    #header {
              clear:both;
              float: left;
              display: block;
              margin-left: auto;
              width:100%;
              display: -moz-box; /* Firefox */
              display: -webkit-box; /* Safari and Chrome */
              display: box;
              border: none;
    #menuHorizontal {
              clear:both;
              float: left;
              width: 110%;
              margin-left:auto;
              display: block;
    #slides {
              clear:both;
              float: left;
              margin-left: 0%;
              width: 68%;
              display: block;
                        /*Slides container: Important:
                                  Set the width of your slides container
                                  Set to    display: none     to prevent content flash*/
    .slides_container {
              clear:both;
              float: left;
              width: 100%;
              display: block;
                        /*Each slide: Important:
                                  Set the width of your slides
                                  If height not specified height will be set by the slide content
                                  Set to     display: block     for original setting*/
    .slides_container div {
              clear:both;
              width:69%;
              display: block;
                        /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout.
                                  Set to clear:none; to allow div to shift up
                                  Or set to clear:both; to take a whole row of the screen*/
    @media only screen and (min-width: 481px) {
    .gridContainer {
              width: 95.9456%;
              padding-left: 0.5271%;
              padding-right: 0.5271%;
    #header {
              clear:both;
              float: left;
              display: block;
              margin-left: auto;
              width: 100%;
              display: -moz-box; /* Firefox */
              display: -webkit-box; /* Safari and Chrome */
              display: box;
              border: none;
    #menuHorizontal {
              clear:both;
              float: left;
              margin-left:auto;
              display: block;
    #slides {
              clear:both;
              float: left;
              margin-left: 0%;
              width: 70%;
              display: block;
                        /*Slides container: Important:
                                  Set the width of your slides container
                                  Set to    display: none     to prevent content flash*/
    .slides_container {
              clear:both;
              float: left;
              width: 100%;
              display: block;
                        /*Each slide: Important:
                                  Set the width of your slides
                                  If height not specified height will be set by the slide content
                                  Set to     display: block     for original setting*/
    .slides_container div {
              width: 100%;
              display: block;

    I found the problem.  There is a bug in Safari for iPhone 4.  Use code to fix found at http://stackoverflow.com/a/6379407

  • How can I convert my web page from a fixed width layout to a fluid grid layout?

    I'm taking a web design class (I'm using Dreamweaver CS6, btw)  wherein the professor started us out building our websites in a fixed width layout but now I want to change my site into a fluid grid layout. My "site" so far is just one long page, and I've already designed it with fluid grid adjustments in mind (most things are centered  in the layout) so it shouldn't need excessive tweaking.
    Is there a way to duplicate the site folder that holds my first page, re-open a new document in fluid, then copy the code in and tweak the width parameters for the different layouts?
    Did I just answer my own question? Help - I am new at this!!
    Thanks all,
    KC

    Herbert2001 wrote:
    A bit off-topic, but Osgood: have you ever used SASS or LESS? When you are building your own grid systems it can save you a tremendous amount of time, and it's a lot of fun.
    Take the following simple example - it generates all the 23 css classes automatically for a 12 grid system. And simply changing one variable allows you to create and calculate any number of columns!
    //variables
    $desktop: 1025px;
    $large-columns: 12;
    @media only screen and (min-width: $desktop) {
         //regular grid span classes
        @for $i from 1 through $large-columns {
            .span-large-#{$i} {
                width: percentage($i/$large-columns);
         // push classes
        @for $i from 1 through (($large-columns)-1) {
            .push-large-#{$i} {
                margin-left: percentage($i/$large-columns);
    No, not explored it yet, and may never....I don't know. I don't really make much money out of web design. It's becoming more and more difficult to find the desire to learn new techniques when the opportunities aren't really there to put them into practice on as regular basis as I would like.  I've got  a very good handle on css, php, html, jQuery - I'm not sure I want to add another layer at the moment, given I'm never quite sure how long I will continue to 'bang my head against the wall' . I'm getting to the stage where I keep asking myself do I really need the problems associated with learning new stuff to the point of being comfortable with it if the financial rewards at the end don't equate to the efforts of learning it.
    I don't really enjoy web development if truth is known. I come from a Graphic Design background which I much prefer but somehow got side tracked and pushed in this direction and there's no way back now, lol. Whilst I concede Web Development is much more exciting its also 100 times more complex/difficult and the skills needed are considerably more.
    Your example looks interesting and I should think I could pick it up reasonably easily given I work with php which uses variables on a similar basis.

  • Understanding Fluid Grid Layout

    Hi,
    First of all - I apologize - my English is bad, but I hope you will understand me.
    I'm currently watching some video tutorials about responsive web design, particularly about Fluid Grid Layout/Dreamweaver.
    To get to the point and to be as simple as possible, my question is: In what cases elements do NOT need to have class="fluid"?
    For example, here's part of the code from one video tutorial:
    <body>
        <div class="gridContainer clearfix">
            <header id="header" class="fluid">
                <h1>The Best Site Ever!</h1>
                <nav id="mainnav" class="fluid">
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="about.html">About Us</a></li>
                        <li><a href="products.html">Products</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </nav>
            </header>
            <article id="intro" class="fluid">
                <h2>Some Title</h2>
                <p>Some thext... </p>
            </article>
    As you can see above, <header> and <article> elements that are child-elements of <div class="gridContainer clearfix"> have class="fluid". But, let's look inside <header> element - there are two child-elemets: <h1> without and <nav> with class="fluid". 
    Now, correct me if I'm wrong - If some element has child-elements - it must have class="fluid" (except for the case with ul/ol and its child-elements li), right? For example, element <article id="intro"> must have  class="fluid" because it has child element <h2> and <p>, but those child elements will not have class="fluid" because they don't have child-elements. On the other side, child-element (of the <header id="header" class="fluid">) <nav id="mainnav" will have class="fluid" because it has child element (ul). Only in case of lists there are exceptions...

    Thank you for your response. It isn't the snapping that appears to be the problem. This is an example of what I'm trying to do. Excel was the best way for me to provide a visual. Is this possible? Every time I try to place divs in a similar layout, the div will not take up multiple rows. For example div 4 would move down and where row 7 is would now be row 4. Div 2 would have also moved down because of 5. I have a large image that needs to be placed to the left of a header and vertical menu. I'm trying to keep the header and menu seperate and the image needs to be aligned to the top left of the text. I'm sorry that I'm overcomplicating this. I must admit it surprises me that the fluid grid appears to be dictated by rows. I'm wondering if for this particular design I should just stick to a table.

  • 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

  • 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

  • Trouble styling across device views ( Mobile, Tablet, Desktop) in fluid grid layout.

    Hi pros,
    I’m having a problem in Dreamweaver CC laying out and styling my website using the fluid grid layout. For the record, I have not touched the boilerplate.css or JS file and have been using my own.css file to place all my .css in. I’ve managed to get some of the content in little by little but it looks nothing like my mock up. Since I’m new to Dreamweaver and coding in general, I’ve been starting my design in the desktop view. However, when I switch to tablet or mobile view and move something around, it completely moves it when I got back to the desktop view. Also, when I put in on live view or view it in a browser, I get two different looks all together.  I try to make sure that my .css file is selected and under media I tried selecting the predefined media sizes and then under selector, there is usually 3 of each tag (one for each view I’m guessing), I select the tag associated with that view and change the properties from there. That hasn’t worked because when I go to live view or view in the browser, it looks completely off or it will screw with the other views. L
    So here are my specific questions:
    How do I style my elements specifically in each view WITHOUT messing up the desktop, or the other views? Simply clicking on a view using the icons on  the bottom and styling has not worked.
    Why is my live view so different from my browser view? I’m using the presets given in Dreamweaver for the desktop. When I view, say the logo and navigation in live view, everything is aligned but when I switch to my browser (chrome) it’s all crooked.
    Should I be using % throughout all my properties (width, height, margin, padding, positioning)? Currently I have most of my div sized using % but some margins and other properties using px. Will that affect anything?
    Can someone recommend a good tutorial? Everything that I seen either covers the basics that I already know,( adding/moving divs, switch views) but when it comes to the .css styling, they are adding a style sheet from somewhere without showing you how to do it from scratch.
    Should I design the page in a non- fixed layout and then import the .css style sheet from there? If so, how do I do that without messing with the boilerplate.css file.
    I’m taking a course in graphic and web design and we went over this very quickly and was given a lot of the material, however our final project (a full website with 5 pages) must be responsive and built in Dreamweaver. Any advice is greatly appreciated!

    Making an external style sheet.
    Go to File > New > Blank page > CSS. 
    Hit create button.
    Add some style rules to your new style sheet and save it. 
    Link your HTML pages to your new style sheet using the directions below.
    Dreamweaver, Linking HTML to External Style Sheets
    CS6 Fluid Grid layouts (17 min video)
    http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
    Creative Cloud 12.2 Enhancements to Fluid Grid Layouts
    http://blogs.adobe.com/dreamweaver/2013/02/updated-fluid-grids-in-dreamweaver.html
    Step-by-Step tutorial -- Building Fluid Grid Layouts in DW CS6
    http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs6.html
    Nancy O.

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

  • Dreamweaver Fluid Grid Layout

    Hi everybody! Doesn't it feel like the Fall weather? I love it as I see the trees changing colors. I will miss Summer but will enjoy the Fall holidays.
    This question goes back to one I asked a while ago but it is different. I decided to update to DW CC and I can't tell you how much I love it as
    I have watched all of the tutorials and find it much easier than the previous version.
    One thing I decided to do was to use the Dreamweaver Fluid Grid layout. I totally understand how it works for the most part. When I go to DW CC and the load up screen, I Select fluid grid layouts and then I am presented with a smartphone version, a tablet version, and a desktop version. I left the defaults as they seem to be updated and correct. This is the thing, I design my mockups in PS. I guess I am baffled on how to code that offer to DW. When I always created a fixed layout, I would easily just measure out the divs in PS and then create them in DW sizing everything to perfectly match my initial mockup.
    Now that I am using a fluid layout. I am presented with columns. Again, I left them as the default. My question is, I am designing in PS, I am designing for a specific resolution of 1024x768. But I am just confused on if I need to decrease columns or add columns to fit that, or if I even need to at all. For my specific resolution, should I change the desktop columns to somehow correspond to a 1024x768 resolution? The default is 12 columns. In Photoshop, is there a way to insert a fluid like grid to help me with my mockup?
    Sorry if this is a lot, but I would appreciate any help, thank you so much!

    Hi Nancy! I hope you have been well. Thanks so much for taking the time to post screen shots.
    I thought I just needed to create a mockup in PS with a 1024x768 resolution, and slice images. With the fluid layout, I inserted for example, my header image or banner at the top and I inserted it in the desktop view, it looked normal. It was sliced in a 1024 x 768 mockup. But, when I go to tablet and smartphone, it shrinks and it looks distorted almost. Is there something I am doing wrong?
    You stated that I needed to create 3 mockups in PS based on those sizes. Does that mean I would have to slice them all and place them in their proper sized sections smart phone, tablet, and desktop?
    Here is a video I watched. It seems like this guy used the same image and it looks just fine in all sizes. Create fluid, responsive web pages in Dreamweaver | Learn Dreamweaver CC | Adobe TV

  • Trouble in Dreamweaver with fluid grid layouts

    Hi!  This is my first time posting here.  I have been having intermittent problems in the fluid grid layouts.  The sizing handles that are supposed to be there in a fluid element/div sometimes disappear along with the duplication icon and the arrow that moves a div/element up to the previous row.  For instance I am working on a lesson in my online class for Dreamweaver that is asking me to style an unordered list for a menu.  I want to make it into a horizontal menu where each item is 3 columns wide.  Without the handles I cannot size the items in the list nor "bump them up" next to each other.  Does this make any sense?  Sometimes, they are there and sometimes not.  Mostly not there.  This is very frustrating!  Can someone offer any solutions?
    Paula Jo Nyman

    I have the same Issue, I have been trying to get it resolved for a while now, but the live customer support is terrible, I feel like they don't read the initial question and it frustrates me how I am constantly asked questions about my question that is CLEARLY covered in the initial Question. I Have been on hold on the phone for some time now, if I get this resolved I will post an answer. It does disgust me how adobe are slowly parring the technical support over to its users.

  • Fluid grid layouts

    Can I bring an old HTML web site into dreamweaver and "convert" it to a fluid grid layout?  I have several sites that I want to convert.  I am an old FrontPage and Expressions guy.  Just recently upgraded to the creative cloud and Dreamweaver, so if my questions are too elementry let me know.

    Thanks a lot.   That is kind of what I thought.  I want to change my whole site, so I will purchase an already built template that I have found that I like, written as a responsive web site, then open it with dreamweaver and add my custom content.   Appreciate your help and how fast it was.  Have a great weekend!
    Thanks,
    Dennis
    Valcour, Inc.
    Hospitality Lodging Investors, LP                         
    Hospitality Lodging Investors II, LP
    Dennis G. Goodwin
    2501 Catherine Street, Suite 3
    York, PA 17408-4754
    717-852-7702 office
    717-578-3095 cell

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

  • Can I control column color in fluid grid layout?

    The columns in fluid grid layout are gray in CC; they used to be pink. I highly prefer pink, as I almost never design with that color, and I frequently design with gray.
    Is there a way to set a preference for grid column color in CC?
    Thanks.

    NO NO NO NO NO!
    Never make your navigation editable or you will shoot
    yourself in the foot
    when it comes time to change a link there and you would have
    to touch every
    page. <sheesh>
    Give each of those links a unique ID, e.g.,
    <a href="page1.html" id="link1">Page 1</a> |
    <a href="page2.html"
    id="link2">Page 2</a>....
    Then in the head of each child page, add this to the Editable
    Region called
    "head" -
    <style type="text/css">
    a#link2 { color:whatever; otherstuff:whatever; }
    </style>
    Now you would just edit the embedded stylesheet to change
    a#link2 to a#link3
    or whichever button you wanted to affect on that page.
    Alternatively, you can go here -
    http://www.divahtml.com and get
    their
    DivaGPS extension.
    DO NOT MAKE YOUR NAVIGATION EDITABLE.
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    ==================
    "malcster2" <[email protected]> wrote in
    message
    news:ga5dev$e89$[email protected]..
    > make those links editable regions on the template, and
    apply the
    > neccessary styles in the individual html pages

Maybe you are looking for