Dreamweaver CS6 - fluid grid content

Similar Questions

• Possible? A presentation of menu responsive nav for Dreamweaver CS6 fluid grid

  Hello Hello!

  Can you recommend a type/style of menu nav responsive to use on my site which is fluid CS6 checkerboard?

  Those I've seen have an absolute positioning.

  Thank you

  jQuery MeanMenu will produce the familiar stacked (aka hamburger) menu on small devices only.

  MeanMenu demo

  You will need to provide your own list of desktop menu.

  If you have a budget to work with, Pop Menu Magic 3 of the seven is a commercial extension to create menus entirely sensitive on desktop and mobile.

  PVII Pop Menu Magic 3: the constructor only sensitive Menu for Dreamweaver

  Nancy O.

• A page grid Dreamweaver CS6 fluid balance

  A grid page Dreamweaver CS6 fluid of centering.

  I thought this would be an easy task and saved it for last. After watching the videos, analyzes the web and this forum, I found a lot of answers, but none of them does not seem to work in CS6. I currently have an extra margin of 1 to 2% on the left to get the page more closely in the Middle, but it does well with all screen sizes and its still not in the middle.
  Page can be found here

  Any advice would be greatly appreciated!

  Looks like you have nested the rest of the content in your #header DIV. And width of the div header is 94.4% - therefore, everything on the site have a margin of 5% on the right.

  You can resolve this issue first to see if it helps you with the result that you want. If this is not the case, after the return.

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

• Bug CSS Dreamweaver Cs6 Fliud grid

  I know about this for some time now and work around it, but it's quite annoying that it happens again. In fluid grid layouts page, when you click on a style sheet in the Panel styles CSS, it opens the stylesheet above it. I have this duplicated on two machines, and Adobe also reproduces the problem some time ago. I wonder if this will be ever fixed and is this another round of upgrade?

  What made me this post, is that when I was working on a fixed pixel site the other day, it happened there also. It is rare, but it happened. Restart Dreamweaver usually clears the question here, but with fluid grids, whenever it opens the map above where you click... like clockwork.

  I understand there is a certain amount of bugginess, that we face, but this?  Windows SDW cs6

  Everyone possible to duplicate this issue? Any input?

  

  Yes, I thought as well. Typical. This is where will the world it seems. Do you buy a new car each year? No, you buy a car that will last you for a while. Features and upgrades are a thing forgotten, but the basic principles and just flat errors. When a company means the quality of its products?

  I heard a lot of complaints on the CC and frankly... upgrade to perhaps solve a problem, to inherit the 10 more doesn't seem practical to me. But that's me.

  Just a discharge. But thanks!

• CS6 fluid grids - how images to resize when the page is resized? [was: Hello]

  I am new to fluid layouts in Dreamweaver cs6 grid, I want to insert a GIF file on my index page but I don't know how to make when the page shrinks the GIF or image shrinks as well. The only code that I found is

  IMG, {}

  Max-width: 100%;

  }

  But this code already exists in the css file when you create a new fluid page layout grid in function

  IMG, object, embed, {video

  Max-width: 100%;

  can someone help a newbie please...

  I fixed it thank you all for the answers

  front

  

  After

  

  This fixed thank you

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

  Hello

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

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

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

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

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

  CSS FIXED WIDTH

  body, td, th {}

  do-family: Calibri;

  do-size: 14px;

  Color: #000;

  }

  {body

  left margin: 0px;

  margin-top: 0px;

  margin-right: 0px;

  margin-bottom: 0px;

  }

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

  {#headerWrapper}

  background-color: #000;

  height: 101px;

  Width: 100%;

  margin-right: auto;

  left margin: auto;

  border-bottom-width: 2px;

  border-bottom-style: solid;

  border-bottom-color: #BDDB6D;

  }

  FLUID GRID CSS

  The fluid layout grid CSS has the following in it:

  {.fluid}

  Clear: both;

  left margin: 0;

  Width: 100%;

  float: left;

  display: block;

  }

  {.fluidList}

  list-style: none;

  list-style-image: none;

  margin: 0;

  padding: 0;

  }

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

  {.gridContainer}

  left margin: auto;

  margin-right: auto;

  Width: 86,45%;

  padding-left: 2,275%;

  padding-right: 2,275%;

  Clear: none;

  float: none;

  }

  {#div1}

  }

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

  {#headerWrapper}

  Max-width: 100%;

  height: 101px;

  background-color: #000;

  border-bottom-width: 2px;

  border-bottom-style: solid;

  border-bottom-color: #BDDB6D;

  }

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

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

  Thanks in advance!

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

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

  IN THE SECTION MULTIMEDIA PHONE REQUEST

  {.gridContainer}

  left margin: auto;

  margin-right: auto;

  Width: 100%;

  padding-left: 0;

  padding-right: 0;

  Clear: none;

  float: none;

  }

  {#headerBar}

  background-color: #000;

  min-height: 101px;

  border-bottom-width: 2px;

  border-bottom-style: solid;

  border-bottom-color: #BDDB6D;

  padding-top: 2.735px;

  }

  {#headerWrapper}

  Width: 86,45%;

  padding-left: 2,275%;

  padding-right: 2,275%;

  Clear: none;

  float: none;

  left margin: auto;

  }

  {#menuAnimationBar}

  background-color: #B7B7B7;

  height: 293px;

  border-bottom-width: 2px;

  border-bottom-style: solid;

  border-bottom-color: #BDDB6D;

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

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

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

  display: none;

  }

  {#contentBar}

  background-color: #F8FCF1;

  min-height: 200px;

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

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

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

  }

  {#contentWrapper}

  Width: 86,45%;

  padding-left: 2,275%;

  padding-right: 2,275%;

  Clear: none;

  float: none;

  left margin: auto;

  }

  {#socialMediaBar}

  background-color: #000;

  min-height: 83px;

  border-top-width: 2px;

  border-bottom-width: 2px;

  border-top-style: solid;

  border-bottom-style: solid;

  border-bottom-color: #BDDB6D;

  border-bottom-color: #BDDB6D;

  }

  {#socialMediaWrapper}

  color: #FFF;

  Width: 86,45%;

  padding-left: 2,275%;

  padding-right: 2,275%;

  Clear: none;

  float: none;

  left margin: auto;

  padding-top: 2,275%;

  }

  {#footerBar}

  color: #FFF;

  background-color: #AAAAAA;

  min-height: 176px;

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

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

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

  }

  {#footerWrapper}

  Width: 86,45%;

  padding-left: 2,275%;

  padding-right: 2,275%;

  Clear: none;

  float: none;

  left margin: auto;

  }

  IN THE MULTIMEDIA TABLET QUERY SECTION

  {.gridContainer}

  Width: 100%;

  padding-left: 0%;

  padding-right: 0%;

  Clear: none;

  float: none;

  left margin: auto;

  }

  {#div1}

  }

  {#headerBar}

  }

  {#headerWrapper}

  Width: 90.675%;

  padding-left: 1.1625%;

  padding-right: 1.1625%;

  Clear: none;

  float: none;

  left margin: auto;

  }

  {#menuAnimationBar}

  display: none;

  }

  {#contentBar}

  }

  {#contentWrapper}

  Width: 90.675%;

  padding-left: 1.1625%;

  padding-right: 1.1625%;

  Clear: none;

  float: none;

  left margin: auto;

  }

  {#socialMediaBar}

  }

  {#socialMediaWrapper}

  Width: 90.675%;

  padding-left: 1.1625%;

  padding-right: 1.1625%;

  Clear: none;

  float: none;

  left margin: auto;

  }

  {#footerBar}

  }

  {#footerWrapper}

  Width: 90.675%;

  padding-left: 1.1625%;

  padding-right: 1.1625%;

  Clear: none;

  float: none;

  left margin: auto;

  }

  {#menuAnimationWrapper}

  }

  IN THE PC MEDIA QUERY SECTION

  {.gridContainer}

  Width: 100%;

  Max-width: 1920px;

  padding-left: 0%;

  padding-right: 0%;

  margin: auto;

  Clear: none;

  float: none;

  left margin: auto;

  }

  {#headerBar}

  }

  {#headerWrapper}

  Width: 88.5%;

  Max-width: 1232px;

  padding-left: 0.75%;

  padding-right: 0.75%;

  margin: auto;

  Clear: none;

  float: none;

  left margin: auto;

  }

  {#menuAnimationBar}

  display: block;

  }

  {#contentBar}

  }

  {#contentWrapper}

  Width: 88.5%;

  Max-width: 1232px;

  padding-left: 0.75%;

  padding-right: 0.75%;

  margin: auto;

  Clear: none;

  float: none;

  left margin: auto;

  }

  {#socialMediaBar}

  }

  {#socialMediaWrapper}

  Width: 88.5%;

  Max-width: 1232px;

  padding-left: 0.75%;

  padding-right: 0.75%;

  margin: auto;

  Clear: none;

  float: none;

  left margin: auto;

  }

  {#footerBar}

  }

  {#footerWrapper}

  Width: 88.5%;

  Max-width: 1232px;

  padding-left: 0.75%;

  padding-right: 0.75%;

  margin: auto;

  Clear: none;

  float: none;

  left margin: auto;

  }

  {#menuAnimationWrapper}

  Width: 88.5%;

  height: 293px;

  Max-width: 1232px;

  padding-left: 0.75%;

  padding-right: 0.75%;

  margin: auto;

  Clear: none;

  float: none;

  left margin: auto;

  }

• CS6 fluid grid background model

  Hello

  I have a 2 part question...

  First of all, how are light pink grid background in fluid layouts grid created? I noticed that they are not part of any style that I can say so I'm curious to know how they were created.

  Second, is there a way to change the fluid grid specifications after have created you already without creating another new layout fluid grid?

  Thank you!

  kit02 wrote:

  I'm very uncomfortable with the CSS, I guess I was wonering if you go back into the dialog box and change the widths and others here.

  No, you cannot change the width of the dialog box. However, you can manually change the grid by changing the following section in the comments near the top of the stylesheet that contains the media queries:

  Properties Grid Dreamweaver fluid

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

  DW-num-CLO-mobile: 5

  DW-num-CLO-Tablet: 8

  DW-num-OCOL-Office: 9

  DW-gutter-percentage: 25

  After you make your changes, save the style sheet, close related web page and relaunch it in the Document window. Pink columns reflect the changes you made. Of course, other styles will be unchanged, you will need to resnap the Divs flow layout grid to the grid has been reorganized.

  Post edited by: David_Powers to correct 'may' to 'not capable' in the first sentence.

• CS6 fluid grid 960px wide

  I'm just getting started with the fluid grid in CS6 but need a bit of help. I've set up with 12 columns and the width of the default desktop is 1232px according to the box options. I won't be wide at 100% of the grid. In fact, I want that it not exceeding the 960px width max. This is equivalent to approximately 78% (77.9) of 1232px. However, if I choose 78% like my width and fall in a DIV to span the whole 12 columns, it is much larger than the width 960px. What am I doing wrong and what I need to do in order to have a possible start as close to 960px width.

  Any help is appreciated.

  You can change the CSS code manually and change % to px widths.

  Nancy O.

• Tools are lacking in Design view in dreamweaver cc-fluid grid

  I have Dreamweaver cc and I changed the code in the cs so I can see the live view and design view in the transmission grid. Now, the tool is missing where you can put something in the trash and adding an additional division attached is

  a screenshot of what I'm trying to see... This attached image shows Dreamweaver with on cs cs changed to see live... The reason why I changed the cs should be able to edit the site in design, because you cannot change mode live view and editing can only be done in the code. Help, please!

  

  Work around the rear Design view disables fluid network tools because to back Design, you're trick DW into thinking that you are not using a GFL.

  If you really need these tools, go back to DW CC 2014.0 where Design and Live work always well with the FGL. 2014.0 is not available through the 'Previous Versions' of the CC desktop application, then you need to use direct links...

  Windows: http://download.adobe.com/pub/adobe/dreamweaver/win/cc/Dreamweaver_14_LS20.exe

  Mac: http://download.adobe.com/pub/adobe/dreamweaver/mac/cc/Dreamweaver_14_LS20.dmg

• problem resolution widescreen CS6 fluid grid layout

  Hi all, I did some poking around but could not find anything that answers this question - if I missed something please pass me the link!

  So I'm doing a new site at cs6 with fluid networking. It is very well in regards to screen sizes, i.e. small medium large, but different resolutions make the content appear differently. Specifically on the desktop screens of size with wide screen resolutions (for example 1600 X 1200) content is tight to the top, to the top of the page. The background image is very well on all resolutions - fillings Exchange in accordance with the resolution of the screen - but the content on the top. On my screen (1600 X 900) there is a nice distribution of content vertically. Is there a way to make sure the content adjusts to the resolution, not only the size? Thanks in advance.

  I think that I have answered your question.  You need more whitespace.  Use a custom for wider screens query.  Adjust the values.

  / * Special rules applicable to larger workstations * /.

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

  .gridContainer {margin-top: 200px ;}}

  }

  Nancy O.

• 2015 Dreamweaver has fluid grid of basic step by step tutorials

  Hi, now I have the 2015 version waiting Train Simple to produce tutorials for beginners on how to use bootstrap.

  I am told that the new tutorials to be released in July.

  Until that happens, I have to use Dreamweaver 2014 which Train Simple covers so well.

  I hope that their tutorials for 2015 following the same easy-to-follow format.

  I tried you are looking for tutorials on You Tube but it seems that it is too early, or suffer very poor examples out there.

  So far, as a graphic designer, I realized sites for some clients using Muse but I don't want to offer sites that are' Mobile friendly 'and '.

  That's why I made the decision to learn coding.  I felt that I was doing so well until 2015 has hit the street!

  You cannot use bootstrap without knowing the code. It's just not possible.  Bootstrap contains a boat load of CSS classes integrated which allows you to create everything from page layouts grid adapted menus, tabbed panels, forms, buttons, etc...  Without knowledge in-depth code and more specifically, startup code, you won't get beyond step 2 with it.

  Best advice: set aside the DW tutorials and spend a week doing anything other than HTML and CSS code exercises.  In the long run, this will help you more than any single DW tutorial.

  http://www.html.NET/

  http://w3schools.com/

  http://www.csstutorial.NET/

  http://phrogz.NET/CSS/HowToDevelopWithCSS.html

  http://webdesign.tutsplus.com/sessions/Web-design-theory/

  After understand more about code bases, go you back and the Bootstrap tutorials and see if they make more sense for you.

  Bootstrap 3 tutorial

  Nancy O.

• Dreamweaver cs6 - fluid layouts

  Hello.

  I have a question about the images. I don't know that the main problem is that I don't know what I really wonder. Here goes...

  I'm doing a mobile website of the environment.  I have an image to put on each screen. The image is long 550px. It goes in the center of the screen. The size is correct for the Tablet and wallpapers, but must shrink to the mobile screen.

  I tried various codes, and I managed to get the image to reduce 100% of the mobile layout. The problem is while it remains 100% screen Tablet and desktop - too much.

  I need a way to reduce the image to fit the screen mobile but stay 550px for other screens. I don't know there is a simple way of this operation that I forgot.

  I hope someone can help!

  Andy

  When you use images in delicate design, you need to delete the attributes width and height of the img src tag.

  Then make you sensitive by adding to your css styles:

  IMG {}

  Max-width: 100%;

  height: auto;

  }

  (Above) are supposed to be the braces, but l can not find the guys on this tablet keyboard

  The braces edited: just so forget the above.

• CC of Dreamweaver may have a problem with Dreamweaver CS6 compatibility?

  I installed Dreamweaver CC on my laptop (Windows 7 OS).  I am able to build new web pages using the checkerboard to fluid.  But when I try to open previously designed web pages that have been built using Dreamweaver CS6, Dreamweaver CC breaks down.

  I was told today in the cat, by Technical Support, it was a problem of compatibility between Dreamweaver CC and Dreamweaver CS6 (for grid of fluid).  This can be confirmed?  I have no problem to return and rebuild previously designed fluid grid of web pages.  I just want to know that there is no fix/work around available?

  Problem solved.  It lacked the brace "}" involving the Media Queries page .css.  (Please see my response to Arindam_G in the Discussion 'Crash Total (CC) on the attempt of fluid to create checkerboard!').

  Thanks for the help of your group.

• {req} Tutorials for Dreamweaver CS6 and sensitive web sites

  Hello! I am Designer with zero knowledge of coding, but have been implemented from many sites from the tutorials wordpress and phpBB.

  I can design a website with tools CS6 failry. But impossible to get the hang of making "sensitive" sites (I know I should learn a bit of coding, but, honestly, it just isn't in my head that if I take structured courses).

  Can someone point me to a simple step by step guide to the development of a sensitive layout? Preferably written (no video).

  (By the way: love the new look of site Web from Adobe.)

  Building modern websites without a basic knowledge of the code is like trying to drive a car the eyes bandaged.  You can reach your destination, but you'll break things (many things) along the way.

  CS6 fluid grid Layouts require a knowledge of HTML, CSS & Media Queries because you will need to manually change the code.   Fluid grids are a quick start; not a quick fix.

  CSS Media Queries

  http://www.Adobe.com/devnet/Dreamweaver/articles/introducing-media-queries.html

  Responsive Web Design

  http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-Web-design/

  Device approach agnostic

  Esign http://Coding.SmashingMagazine.com/2012/03/22/Device-Agnostic-Approach-to-Responsive-Web-d.

  Good luck

  Nancy O.