Navbar in fluid grid layout??

I can't for the life of me find anything on changing changing the content and look of the navbar in desktop and mobile view to look different from eachother and fit the browsers properly. If anyone has any links or advice on how to do so please help. Thank you.

If you're building a Responsive Layout, you need Responsive menus.
Project Seven Responsive Tabs
http://www.projectseven.com/products/tools/tpm2/tutorials/responsive/index.htm
Project Seven Tab Panel Magic2 Menus
http://www.projectseven.com/products/tools/tpm2/tutorials/miracle-menu/index.htm
10 Responsive Menus
http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/
Nancy O.

Similar Messages

  • Dw6 fluid grid layout

    trying to make sense of the fluid grid layout.
    can you use <div class> in fluid grid layout?
    is it best to only insert divs using the fluid grid layout div?
    when you insert a new fluid grid div what is the difference between entering a new line or not?
    the html structure seems to be the same regardless of if you start a new line or not, am i wrong?
    any help would be appreciated!

    Ben Pleysier wrote:
    It's not my code, just rubbish I pulled out of the Bootstrap example sites....plenty more like that........ how about this beauty:
    <div class="spb-row-container spb-row-full-width spb_parallax_asset sf-parallax parallax-window-height parallax-fixed spb_content_element bg-type-cover col-sm-12 no-shadow hidden-xs remove-element-spacing col-natural" data-v-center="true" data-top-style="" data-bottom-style=""  data-midnight="dark" style="background-color:#009fc2;margin-top:0px;margin-bottom:0px;background-image: url(http://www.thesign.pt/wp-content/uploads/2014/10/FM.jpg);">
    I thought we were talking about Bootstrap. No Bootstrap in the above.
    <body class="html not-front not-logged-in no-sidebars page-node page-node- page-node-1172 node-type-static-page not-mobile region-content navbar-is-fixed-top"  onunload="">
    No Bootstrap here either.
    <div class="col-lg-3 col-md-4 col-md-offset-1 col-sm-4 col-sm-offset-1 col-xs-22 col-xs-offset-2 col-lg-offset-0">
    Please allow me to explain. Bootstrap is based on 12 columns regardless of screen size. Translating the above we get the following for each of the screen sizes
    large 3 cols offset 0
    medium 4 cols offset 1
    small 4 cols offset 1
    extra small 22 cols offset 2
    Our attention immediately falls on the extra small device with 22 columns that are 2 columns offset, total 24 columns. How can this be when there are only 12 columns available. Why would one have offset columns on the smallest screen size when we are already battling for real-estate. I think that if we make the classes believable we can safely ignore the classes for the extra small device. Continuing, we see the same number of columns for medium and small and the same offset. Being a mobile first approach, the classes that we assign to small will filter through to larger screen sizes making the classes for medium screen sizes ineffective. Looking at the 0 offset for large screen sizes?? Why do that when it is the default value. In other words, had Bootstrap been applied properly, the tag would look like
    <div class="col-sm-4 col-sm-offset-1 col-lg-3">
    The other two examples are even more ridiculous. Once again, I implore you to start learning Bootstrap and you will come to the conclusion that you are supplying us with gibberish.
    I'm not supplying the gibberish it's the many websites that rely on frameworks, be they Bootstrap/Foundation/Wordpress - whatever rubbish they are using that I'm lifting this code from that are supplying it.
    Take the Bootstrap form - every form input field I observe is wrapped in a <div> tag, why - it's bloated and redundant coding. Bootstrap, much like Wordpress was never invented to be used to build websites.
    That IS my whole point - there are numerous examples of where Bootstrap IS NOT being used properly because people rely on something they no nothing about and end up with verbose class names splattered around all over their pages, bloated js and css scripts because they are the default files which come with Bootstrap.
    <div class="col-sm-4 col-sm-offset-1 col-lg-3"> to me this is still nasty and overly complex 'class' mark-up. A page full of this tripe would drive me insane.
    The very worst people you could advise to use Bootstrap are the people in this forum because most will have little knowledge of coding (that's why they turn to a framework) and end up with a page full of crap.
    And I'm not verbalising you - you said it yourself. People use lots of 'short cuts' - it doesnt mean it's a good approach to take. No ones re-inventing the wheel apart from Bootstrap, who are obviously trying too. Media queries already exist to produce responsive design, learn how to implement them and free yourself from being entrapped by frameworks where you have to use their naming convention, their break points by default, their over bloated js and css files and somethimes rubbish html mark-up.

  • 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

  • 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

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

  • Problems with fluid grid layout live site only showing phone view in Chrome and Firefox Feb 2015

    Hi all,
    I have done a complex fluid grid layout using DW 2014 CC. The site has now gone live on the web masters server setup.
    Up until now the layout of the site has been working fine and responding to screen size.
    Early this morning in the USA the site stopped working. The layout for some users, not all, is only showing the phone view, and takes a long time to load.
    This is happening in Chrome and Firefox, but IE is displaying the site properly.
    So it looks like the CSS media queries are not working on all browsers.
    I am using BC for the test site, and one user having this problem can see that version of the site OK.
    I noticed that Chrome has done some updates recently Chrome Releases
    Has anyone else come across this problem with Chrome and Firefox with their responsive layouts?
    Thanks for any help given.

    Hi Ben,
    Yes, thanks for this link. The Travel Health Website is one of ours, hosted on BC, and no reported problems so far. We also have another large BC website with ga code in it and users are not reporting problems with it. The Headless Way
    However the problem website is hosted elsewhere on a different platform to BC. We have been developing it for three months now, and no problems so far until yesterday. The problem of the site taking ages to load, and timing out seems to be happening with about 10% of users in the USA. http://www.harrisonassessments.com/
    The web developer found a user in NZ who was experiencing the slow display problem. They looked at the site with Chrome, Firefox and IE. The site would only display on IE. When the developer removed the google analytics code, the site displayed fine on all browsers for the NZ user. We are waiting for users in the USA to wake up and test the site.
    So the problem definitely is related to the ga code and the responsive layout that was done by me in DW2014.1 fluid grid layout. So the related problem of DW2014.1 not being able to load htm files with ga code in them looks to be a good clue to what is going on here.
    As there was a bug report for DW2014.1 and google analytics code made in the other thread, I would be interested to know if that was ever solved.
    It is interesting that you are pushing Bootstrap and Foundation on me. (Big square websites here I come! lol)
    I wonder if DW is going to persist with fluid grid layout then? I certainly hope so, as I have spent 12 months blood sweat and tears learning how to do it in DW.

  • Dreamweaver CC has "internal error... while resizing a view" when asked to creat a fluid grid layout

    Excited for expanded fluid grid layout features it had, I got Dreamweaver Creative Cloud SPECIFICALLY for that feature.
    Sign up, download, install went smoothly. Open Dreamweaver CC, create new fluid grid layout, hit OK, name and desigante location of .css file and get the following error.
    "An internal error occurred while resizing a view. (Cview::ResizeFrameBy)"  OK
    I click OK and nothing happens. App freezes. No css, no files. No nothing.
    Have tried restarting, re-installing, different names and destinations for .css file. I'm running Mac 10.8.2
    Literally, this is the first thing I've done w/ an ACC app and I am displeased and frustrated. Getting customer service either via forum or offshore phone call less than ideal.
    (apologies for spelling error in subj. can't edit it)

    Can you try the steps mentioned on the thread: http://forums.adobe.com/message/5420680
    Verified Fix :
    For all the Dreamweaver crashes on opening Fluid Grid pages , Closing Documents or opening files
    Please make sure the default system fonts are all enabled - especially Verdana
    On MAC -
    Open Font BOOK from Applications
    Activate VERDANA FAmily of Fonts
    -Harshit yadav

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

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

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

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

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

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

  • Div options toolbar not displayed correctly in fluid grid layout

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

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

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

  • DW CC Fluid grid layout how to change px width for desktop layout

    Hi there,
    I have been going through the various tutorials about fluid grid layout and setting up our bureau's website in a responsive layout.
    The width of the original design was 960 px and the hero pic and others have been exported at that size.
    The first divs in the design look fine, header with the 960 px pic in it, and also the BC menu which is set to 960 wide.
    However the body text goes out to the right, past the 960 px and this is because, right at the start, when starting the file in DW the desktop screen width is set to 1232px.
    How can you change this setting when starting a new fluid grid layout?
    I have tried changing the number of columns, or the percentage, and the width for desktop remains at 1232px.
    Why is this?
    Not all of our clients want a site 1232px wide on a pc.
    Thanks so much.

    Hi Ben and Nancy,
    Thanks for your replies, but maybe you both don't realise I am asking specifically about DW CC and setting up a responsive design using a fluid grid layout?
    I have been following the recent videos from Adobe on this.
    As far as the width of 960 goes, Nancy I am only shortchanging myself, as this is the website for our agency. The original design is 960px wide as I did read somewhere that this width is recommended now that responsive is coming, as it is easily divided into a grid layout. I also am quoting for a client at the moment who wants a responsive design for their website, and they have specifically requested that the site have a maximum width of 960 px. So I would like to find out if this is possible in DW CC at the moment when doing a fluid grid layout.
    So what I am trying to do here is follow the Adobe tutorials on responsive design, using DW CC and I am using the current design for our agency website as a trial to set this up and try and get it working as a responsive website.
    It does not seem to me that many other people are doing this, as most people are recommending that I try Github or Bootstrap.
    However, I am not a coder and I am used to using DW, so I would like to get the DW CC responsive design features working if possible.
    Ben the CSS you are looking at is being generated by DW CC as I follow the steps in the Adobe demonstration videos to set up a fluid grid layout in DW CC.
    One of the things they say in the videos is that you can't program the CSS directly when doing a fluid grid layout, or you break the CSS and it all stops working. So I am using the new panels in DW CC to set up the layout. One thing I cannot get access to is the ability to set a maximum width for the site. It seems to be set in concrete when you start the fluid design up in DW CC.
    Here is a pic of the screen I am talking about that sets the maximum width:
    I cannot click in the pixel width at the top and change it. Also if I adjust the number of gridlines or the percentage for the pc layout, the default maximum pixel width does not change.
    If you click on the preferences button and go into the Window sizes screen, there does not seem to be a way to set the maximum pc width here either, so I am a bit stumped.
    Maybe I just have say to my clients that if you want a responsive design then the max width for pc can only be 1232px? It does seem strange to me that this cannot be changed.

  • How can I make a part of the body of my content full width of the screen with a fluid grid layout in CSS? (In dreamweaver program)

    How can I make a part of the body of my content full width of the screen with a fluid grid layout in CSS? (In dreamweaver program)
    and I know it is being over-ridden by
    .gridContainer {
      width: 88.5%;
      max-width: 1232px;
      padding-left: 0.75%;
      padding-right: 0.75%;
      margin: auto;
      clear: none;
      float: none;

    Abdelqader Alnobani wrote:
    How can I make a part of the body of my content full width of the screen with a fluid grid layout in CSS? (In dreamweaver program)
    and I know it is being over-ridden by
    .gridContainer {
      width: 88.5%;
      max-width: 1232px;
      padding-left: 0.75%;
      padding-right: 0.75%;
      margin: auto;
      clear: none;
      float: none;
    Logically a structure something like below should work BUT whether or not it will upset the FG I don't know as I wouldn't ever use it.
    <div class="gridContainer">
    Top Code Section Goes Here
    </div>
    <!-- close gridContainer -->
    <div id="fullWidth">
    Full width section goes here
    </div>
    <!-- close fullWidth -->
    <div class="gridContainer">
    Bottom Code Section Goes Here
    </div>
    <!-- close gridContainer -->

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

  • Fluid grid layouts do not work in IE 7/8

    Hello,
    I just created a simple fluid grid layout with Dreamweaver CS6, but there is a problem in Internet Explorer.
    IE 9 shows it right.
    When I start IE 9, I press F12 to get to the developer panel. When I switch to IE 7 / 8, the layout crashes. There are no background colors and text styles anymore.
    Later I will upload some screenshots.
    All other browser work fine.
    Where is the problem here?

    When I resize layout in Firefox, the background colors disappear in mobile portrait, mobile landscape, and tablet portrait.
    Reason:  You added styles to your FluidGrid Desktop  but not  mobile & tablet. 
    In order for FluidGridLayouts to work, you must build your mobile styles first because everything else is based on that.
    I find it's much safer to use a separate style sheet for content.  When you start adding stuff to FluidGridLayout.css, things can get screwed up in a hurry.
    CS6 Fluid Grid Layouts (6 min video)
    http://tv.adobe.com/watch/digital-design-cs6/creating-adaptive-designs-using-fluid-grid-la youts-in-dreamweaver-cs6/
    CS6 Fluid Grid layouts (17 min video)
    http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
    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.

Maybe you are looking for

  • Lost work

    I was working on multiple art boards. Illustrator asked me if I wanted to revert. I accidentally hit okay, and all of my artboards disapeared. I tried doing undo, but nothing happened. How do I undo this? I need that work back.

  • What's wrong with my mini?

    i can't figure out wht's wrong with this stupid thing! it was working fine when i was listening to it yesturday until it suddenly froze and turned off. now when i press MENU to turn it on, it makes huming noises, the apple comes up, and a minute late

  • Error: "Mobile java client attributes not maintained" while activating DO

    Hi All, i got error while activating the Data Object: "Mobile java client attributes not maintained". how to resolve this error, and why this error is coming? I am migrating the MI 2.5 application into the MI 7.1 application.In new MI 7.1 application

  • Compressed tunnelling

    I have previously made a simple java port forwarder that uses a Tunnel class I made. The tunnel class basically takes an InputStream, an OutputStream and optionally a buffer size (default size is 1024) then runs copies everything it gets from the inp

  • Premiere 5.0

    昔買ったPremiere 5.0をWindows8.1にインストールしようとしました. AutoPlayで「インストールするにはクリックしてください」というメニュー までいけましたが.その後動きません. Premiere 5.0はもう使えないのでしょうか. Windows8.1で使えるようにするにはどうすればよいでしょうか.