DW CC - fluid grid & media interview questions

Similar Questions

• Several CSS files accessed by Media Queries vs. Dreamweaver fluid grid approach

  Is it better to insert the media in the head of a HTML file that refers to one of several CSS files depending on whether the device moble, plate, or office or is it possible to use the approach of fluid grid of Dreamweaver layout that evokes a single large CSS file with all the instructions for the three formats. I understand that it is the only choice you have if you use the grid to fluid. I just worry that this could slow down a mobile connection to load three sets of instructions CSS when only one is necessary.

  Take a look at the load time of my site that contains a huge CSS file.

  

• IE8 question: fluid grid/reagents nav bar - cancel or in css overide?

  For a sensitive Bootstrap site: how to replace the fluid grid and the foldable navbar on a separate stylesheet for IE8 to render the page not compliant? Is it a question of weight or destroy?

  Respond.js may address other elements of "screen" for IE8, assuming that no one with a smartphone or Tablet using IE older browsers in any case.

  But if someone could give me a branch of How to deal w/ the navbar and grid of fluid in the css without modifying the markup in my doc, I would be grateful to him

  Do you really need support IE8?  Very few people still use it.

  If you are compatible with IE8, create a style sheet IE only with your office layout styles.  Insert it inside a conditional comment for browsers of pre - IE9.

  Don't forget to insert this after all other styles and style, sheets just before your closing tag.

  Nancy O.

• Page when enlarged kicks / fluid grid Video resize

  I have some problems with my foot on this page: http://pauldhart.com/tf_teaser.html

  I applied the code to allow for the video, incorporate scalability in the fluid grid and the footer is in the EXACT right place when the window is reduced in size, however, when that maximize the footer jumps down below the scroll.

  I guess it has something to do with my code for the video scaling, since it disappears when I cut this CSS but I can't identify the problem.  Here is the code in question.

  HTML PART:

  < div id = "contentbody" >

  < div class = 'container-video' >

  " < iframe src =" Byline = 0 & portrait = 0 & https://Player.Vimeo.com/video/128816726?color=f6ecca "width ="500"height ="281"frameborder ="0"allowfullscreen mozallowfullscreen webkitallowfullscreen > < / iframe > "

  < / div >

  < div id = 'fb-root' > < / div >

  < script > (function (d, s, id) {})

  var js, SJF = d.getElementsByTagName (s) [0];

  If (d.getElementById (id)) return;

  js = d.createElement (s); js.ID = id;

  js. SRC = "/ / connect.facebook.net/en_US/all.js#xfbml=1";

  fjs.parentNode.insertBefore (js, SJF);

  (} (document, 'script', 'facebook-jssdk')); < /script >

  " < div align ="left"id ="footer"> < div class ="fb-like"data-href = ' http://Facebook.com/threefingersmovie "data-width ="330"data-colorscheme = data-show-faces of the 'light' = 'false' data-send ="true"> "

  < / div >

  CSS PART:

  {#contentbody}

  Clear: both;

  float: left;

  Width: 100%;

  display: block;

  margin: 0px;

  padding: 0px;

  box-shadow: 3px 10px 20px #000;

  max height: 600px;

  }

  .video-container {}

  position: relative;

  padding-bottom:56.25%;

  padding-top: 30px;

  height: 0;

  overflow: hidden;

  }

  . Video-container iframe, .video-container object, container-.video incorporate {}

  position: absolute;

  top: 0;

  left: 0;

  Width: 100%;

  height: 100%;

  max height: 600px;

  }

  If you follow the link above and resize the browser, you will see the question.  Any suggestions would be very helpful!  Thanks guys/girls.

  The problem is caused by padding-bottom on the container-video class. When the fill is specified as a percentage, the value is always calculated the width of the parent element. This applies not only to the horizontal padding, but also vertical filling. Therefore, the page becomes, more the footer is pushed away from the video.

  The solution is very simple. Once the video has reached its maximum height, you must change the fill from the bottom to a fixed value instead of a percentage. Add this to your style sheet:

  @media screen and (min-width: 769px) {
     .video-container {
         padding-bottom: 576px;
     }
  }
  

• Max-height in fluid grid

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

  Here is my current code of .css:

  #whf-content {
      clear: both;
      float: left;
      margin-left: 0;
      width: 100%;
      display: block;
      color: #FFF;
      background-attachment: fixed;
      background-repeat: repeat;
      background-color: #000;
      max-height: 278px;
      overflow: hidden;
  }
  #whf-content {
      clear: both;
      float: left;
      margin-left: 0;
      width: 66.6666%;
      display: block;
      max-height: 190px;
  }
  #whf-content {
      clear: both;
      float: left;
      margin-left: 0;
      width: 32.6007%;
      display: block;
      -webkit-transition: all .75s ease 0s;
      -moz-transition: all .75s ease 0s;
      -ms-transition: all .75s ease 0s;
      -o-transition: all .75s ease 0s;
      transition: all .75s ease 0s;
  }
  #whf-content:hover {
      max-height: 999px;
  }

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

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

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

  CSS Spry Collapsible Panel:

  @charset "UTF-8";

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

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

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

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

  * about the widget.

  *

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

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

  * a space available.

  *

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

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

  * CollapsiblePanel container.

  */

  . CollapsiblePanel {}

  margin: 0px;

  padding: 0px;

  }

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

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

  * to open or close the Panel.

  *

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

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

  * The CollapsiblePanel tab panel container.

  */

  . {CollapsiblePanelTab}

  margin: 0px;

  padding: 2px;

  cursor: pointer;

  -moz-user-select: none;

  -khtml-user-select: none;

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

  do-size: 14px;

  make-weight: bold;

  text-align: center;

  color: #FFF;

  }

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

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

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

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

  *

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

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

  * CollapsiblePanel content container.

  */

  . {CollapsiblePanelContent}

  margin: 0px;

  padding: 4px;

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

  do-size: 14px;

  color: #FFF;

  }

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

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

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

  * as the non-anchor (normal) text.

  */

  . CollapsiblePanelTab a {}

  text-decoration: none;

  }

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

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

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

  */

  . CollapsiblePanelOpen. {CollapsiblePanelTab}

  }

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

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

  * whenever the CollapsiblePanel is closed.

  */

  . CollapsiblePanelClosed. {CollapsiblePanelTab}

  / * background color: #EFEFEF * /.

  }

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

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

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

  */

  . CollapsiblePanelTabHover. CollapsiblePanelOpen. {CollapsiblePanelTabHover}

  }

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

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

  * whenever the CollapsiblePanel WINS or loses the keyboard focus.

  */

  . CollapsiblePanelFocused. {CollapsiblePanelTab}

  }

  CSS layout:

  @charset "utf-8";

  / * Simple fluids

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

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

  */

  IMG, object, embed, {video

  Max-width: 100%;

  }

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

  . IE6 img {}

  Width: 100%;

  }

  /*

  Properties Grid Dreamweaver fluid

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

  DW-num-CLO-mobile: 4;

  DW-num-CLO-Tablet: 8;

  DW-num-OCOL-Office: 12;

  DW-gutter-percentage: 15;

  Inspiration of "Responsive Web Design" by Ethan Marcotte

  http://www.alistapart.com/articles/responsive-Web-design

  Golden by Joni Korpi grid system and

  http://goldengridsystem.com/

  */

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

  {.gridContainer}

  left margin: auto;

  margin-right: auto;

  Width: 88.0326%;

  padding-left: 1.4836%;

  padding-right: 1.4836%;

  }

  {#LayoutDiv1}

  Clear: both;

  float: left;

  left margin: 0;

  Width: 100%;

  display: block;

  }

  #header {}

  Clear: both;

  float: left;

  left margin: 0;

  Width: 100%;

  display: block;

  }

  #maincontent {}

  Clear: none;

  float: left;

  margin left: 2.6785%;

  Width: 100%;

  display: block;

  }

  #navigation {}

  Clear: none;

  float: left;

  left margin: auto;

  Width: 100%;

  display: block;

  top of the margin: 80px;

  margin-bottom: 80px;

  background-color: #300;

  height: 16px;

  top: 5px;

  }

  {#whf - content

  Clear: both;

  float: left;

  left margin: 0;

  Width: 100%;

  display: block;

  }

  {#theride - content

  Clear: both;

  float: left;

  left margin: 0;

  Width: 100%;

  display: block;

  }

  {#donate - content

  Clear: both;

  float: left;

  left margin: 0;

  Width: 100%;

  display: block;

  color: #FFF;

  background-repeat: repeat;

  background-attachment: fixed;

  border: 0px solid #666;

  }

  #footer {}

  Clear: both;

  float: left;

  left margin: 0;

  Width: 100%;

  display: block;

  color: #FFF;

  background-attachment: fixed;

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

  background-repeat: repeat;

  top of the margin: 20px;

  }

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

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

  {.gridContainer}

  Width: 91.4836%;

  padding-left: 0.7581%;

  padding-right: 0.7581%;

  }

  {#LayoutDiv1}

  Clear: both;

  float: left;

  left margin: 0;

  Width: 100%;

  display: block;

  }

  #header {}

  Clear: both;

  float: left;

  left margin: 0;

  Width: 100%;

  display: block;

  }

  #maincontent {}

  Clear: none;

  float: left;

  margin left: 1.6574%;

  Width: 100%;

  display: block;

  }

  #navigation {}

  Clear: both;

  float: left;

  left margin: 0;

  Width: 100%;

  display: block;

  height: 16px;

  }

  {#whf - content

  Clear: both;

  float: left;

  left margin: 0;

  Width: 100%;

  display: block;

  }

  {#donatecontent}

  Clear: none;

  float: left;

  margin left: 1.6574%;

  Width: 100%;

  display: block;

  }

  {#theride - content

  Clear: both;

  float: left;

  left margin: 0;

  Width: 49.1712%;

  display: block;

  }

  {#donate - content

  Clear: none;

  float: left;

  margin left: 1.6574%;

  Width: 49.1712%;

  display: block;

  }

  #footer {}

  Clear: both;

  float: left;

  left margin: 0;

  Width: 100%;

  display: block;

  }

  }

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

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

  {.gridContainer}

  Width: 89.0217%;

  Max-width: 1232px;

  padding-left: 0.4891%;

  padding-right: 0.4891%;

  margin: auto;

  }

  {#LayoutDiv1}

  Clear: both;

  float: left;

  left margin: 0;

  Width: 100%;

  display: block;

  }

  #header {}

  Clear: both;

  float: left;

  left margin: 0;

  Width: 100%;

  display: block;

  color: #FFF;

  }

  #maincontent {}

  Clear: both;

  float: left;

  left margin: 0;

  Width: 32.6007%;

  display: block;

  }

  #navigation {}

  Clear: both;

  float: left;

  left margin: 0;

  Width: 100%;

  display: block;

  }

  {#whf - content

  Clear: both;

  float: left;

  left margin: 0;

  Width: 32.6007%;

  display: block;

  }

  {#donatecontent}

  Clear: none;

  float: left;

  margin left: 1.0989 per cent;

  Width: 100%;

  display: block;

  }

  {#donate - content

  Clear: none;

  float: left;

  margin left: 1.0989 per cent;

  Width: 32.6007%;

  display: block;

  }

  #footer {}

  Clear: both;

  float: left;

  left margin: 0;

  Width: 100%;

  display: block;

  }

  {#theride - content

  Clear: none;

  float: left;

  margin left: 1.0989 per cent;

  Width: 32.6007%;

  display: block;

  }

  }

  #whf - content: hover {}

  Max-height: 999px;

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

  }

  {#whf - content

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

  }

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

• Navigation of the site legacy fluid grid.

  I recently used Dreamweaver to build custom WordPress Bootstrap themes. Apart from indigestion, I like things like the navigation... To upgrade a mobile nav friendly burger on my site of fluid grid, it would be easier to try and extract only parts of nav of the bootstrap or are at - it recommendations for an alternative solution. In an ideal world, I'd like something that did not rely on any Ajax/JS and was as compatible as possible.

  Not sure if this will allow a link to the site in question, but it's my http://www.websitesbymark.co.uk/ home page, which is marked on my profile.

  Any suggestions are welcome...

  Look at the Menu means that using CSS and jQuery for the sensitive menu only.

  MeanThemes | MeanMenu

  If you are worried about the increase in the code, do not use WordPress.

  Regarding rationalization Bootstrap, you can customize your package to include only the components & other features you actually use.   Extra leverage can be done with LESS / SASS before processors.  I also recommend only the use of scripts compressed with gzip enabled on servers.  This reduces a full installation of Bootstrap to about 30 KB.

  Nancy O.

• DW CS6 - best fluid grid multilevel MENUS for scaling mobile (big site)?

  Hi I currently have a non-mobile-friendly site that contains 450 + pages (www.midlifebachelor.com), and my search rankings go wrong to cause not to be mobile-friendly.   I use Dreamweaver CS6 on the Windows 8.1 as a development platform and would like to stay with her.  [I have also a site different, much smaller that I recently successfully migrated to a fluid grid layout, and it works very well... and that was my experience very first/only with grid encoding, using DW CS6 fluid.]

  So I need migrating my site page 450 + big a checkered to fluid and I have several problems to solve - the first / most obvious are to know how to deal with some of the complex menus. Today as top-level menus, I have reversals of the image at the top of every page of my site, for a customized mobile version running desktops, tablets and mobile devices - I tried (on different threads here) and one that seems to meet my needs the most is the 'Vertical Drop Down Mode"projectseven:

  http://www.Projectseven.com/products/templates/pagepacks/DMM/affinity/menu-modes/index.htm

  Some menus multi-level migration is important to me because many of my existing main/top level (currently image hover) menu selections now go to pages that contain Spry tabs - which go far.   So the migration of pages with these Spry tabs in new multi-level menus (using checkerboard to fluid, etc.); those without something complex on the landing page would be one level of menu in the upper part.   Goal is to have a system menu unique uniform at the top of each page of the site page 450 +.

  As my site is so great, I clearly don't want to modify the code any time soon the whole site (once I do it immediately, using the menu system above or?).   I want to test my design as much as possible.

  MY QUESTION to THE GURUS - do you think that the "Drop Down Mode Vertical" Projectseven is a very good choice for me to migrate to (for the multi-level menus, using a fluid grid - for scaling of the bureau, to table for mobile)?   Are there other choices that I have to look?  [If there is something different that I should, can you please give me a link that shows examples for this?]

  Thank you very much for your time!

  MLBdesigner wrote:

  (2) another section of the site is more like a book - so not as a collection of independent articles (as with the link you quoted above), but more like 100 pages of content that is usually read in order.  The player has the opportunity to watch an 'index' on the right side of the page that contains links that allow the reader to move from things that are of interest.  Example:

  It's exactly the same principle. Think of each page of the book stored in a column of data.

  You have 1 book page on the site with the index of linked pages / registered associated will be filled with data. According to link (page) is chosen by the user that it is then retrieved from the database in the database identification number that is attached to the link of the page-based.

  This all sounds quite complicated I don't know if you have little experience of database. But if you take the time to research - master-detail in Dreamweaver pages it might help you better understand the principle and how your needs would adapt.

  I don't know how effective the information below are to the current version of DW, but it explains the procedure:

  Using Dreamweaver | Main and detail page design

  MLBdesigner wrote:

  So the above is the other half of the site that I need an approach to understand.  The mobile aspect where it migrates to probably means that I lose the index on the right that allows the reader to spend.  If anyone has any ideas or suggestions on how to manage this migration to something easy to mobile, then I'm all ears.

  You might just have a single link "Choose a Page" at the top in mobile, BUT it's a heck of a lot of links to scroll down, or you can break it down into manageable chapters.

• Do not stretch the fluid grid header image

  The grid of fluid image (hero div) meets the mobile and Tablet level queries, but not at the office 1232 px.

  Image develops only for a max of 1125 px of 1540 px for the nav main div, which is 73%.

  the CSS code is as follows for the desktop mode:

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

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

  {.gridContainer}
  Width: 88.7142%;
  Max-width: 1232px;
  padding-left: 0,6428%;
  padding-right: 0,6428%;
  margin: auto;
  Clear: none;
  float: none;
  left margin: auto;
  }
  #top {}
  }
  {#mainNav}
  }
  {#menuSystem}
  }
  .menuItem {}
  Width: 13.0434%;
  Clear: none;
  margin left: 1.4492%;
  }

  Any suggestions how I can develop and stretch the image to the same width as the main nav (7 horizontal buttons) in the fluid grid container?

  If the value of 88.7142% should be increased to 100%, why then the image only develops to 73% and not of 88.7142%

  URL is < tyndall.net.au >

  Any suggestions greatly appreciated.

  Thank you

  Jonathan

  By default, FGLayout sets the images with a maximum width of 100%. The image can resize up to its native file size but not more.

  To do this, your image must be at least as wide as the layout of office max AND you should not add height or width attributes to the image itself.

  

  Nancy O.

• Fluid grid Tablet: hidden divs live show

  I'm new to model fluid grid, but I use Dreamweaver CS6 and I understand that the mobile CSS reverberates down to Tablet, and then to the office. However, I thought that I could hide divs by adding display: none; the CSS code in the view of the tablet. When I do this, it works very well in edit mode. Looks quite right. But when I check the live and browser hidden div view (s) is clearly visible, for example:

  
  

  I have 3 divs and I want everyone to be visible in only a point of view.

  
  

  Div 1 = #mobile

  Div 2 = #tablet

  Div 3 = #desktop

  
  

  I have do this in CSS:

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

  {#mobile}

  Clear: both;

  float: left;

  left margin: 0;

  Width: 100%;

  display: block;

  }

  {#tablet}

  display: none;

  }

  {#desktop}

  display: none;

  }

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

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

  {#tablet}

  Clear: both;

  float: left;

  left margin: 0;

  Width: 100%;

  display: block;

  }

  {#mobile}

  display: none;

  }

  {#desktop}

  display: none;

  }

  }

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

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

  {#desktop}

  Clear: both;

  float: left;

  left margin: 0;

  Width: 100%;

  display: block;

  }

  {#tablet}

  display: none;

  }

  {#mobile}

  display: none;

  }

  }

  Everything looks good in edit mode. But when I see it alive, mobile is fine, office is fine, but Tablet view includes any mobile even if it is not supposed to show.

  What I am doing wrong? Any help is greatly appreciated, and I can add my real code if necessary.

  Thank you!

  In your liquid - grid.css, line 124, you have a useless (and invalid) "}". This prevents the other CSS is expressed.

• Fluid grid tutorial

  One that will really explain what is happening and how to operate it in terms SIMPLE, assuming that you have never worked with this kind of things before...

  How are you good with CSS Media Queries?  This is what FGLayouts is from.

  The principle is firstly build Mobile layout.  That's what all the other layouts are based on.  Then, build a Tablet and last office.  DW created the media code to query for you.

  You don't have to worry about adding content.  Just focus on the 3 layouts, save often as you work.

  Do not alter the CSS code in FGLayouts.  It is whimsical and easy to break.

  Do not tamper with the boilerplate.css.  It's basically just a CSS Reset.

  Do not use an external stylesheet separated for your content styles - backgrounds, typography, colors, etc...

  CS6 (17 min video) fluid grid layouts

  http://TV.Adobe.com/watch/learn-Dreamweaver-CS6/using-fluid-grid-layouts/

  Creative cloud 12.2 grid improvements in fluid layouts

  http://blogs.Adobe.com/Dreamweaver/2013/02/updated-fluid-grids-in-Dreamweaver.html

  Step by step tutorial - fluid construction grid Layouts in DW CS6

  http://www.Adobe.com/inspire/2012/08/fluid-grid-layouts-Dreamweaver-CS6.html

  More videos from CC

  http://TV.Adobe.com/videos/fluid-grid-layouts/?p=2&r=20

  Nancy O.

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

  }

• Layouts fluid grid

  Hello

  Love the fluid grid system, but I have a question about this:

  Is it in anyway possible to create different dimensions with it?

  I want my headers to have different sizes, as office 275px height by width of 1232px and adjust the height for Tablet and mobile. Been trying to pull this off, but I really do not do the job.

  Seen a few tuts, but could not find an answer to it. Only the approach that worked, I saw created an Adaptive page from scratch.

  Is this possible? If so, how do I work?

  Thanks for any response.

  vVwd

  The fixed. My bad. No0b@work here.

  (the background in the wrong css file layer was to blame)

  Should be easy to go now. Thanks for the tips. Appreciated.

• "Cannot find error in stylesheet Dreamweaver fluid grid" in Dreamweaver CS6

  I have error in Adobe Dreamweaver CS6 which is part of the Creative Suite 6 Master Collection.

  Mistake was when I try to use 'rubber' < div > layout: "Could not find style of grid sheet fluid Dreamweaver. When I clicked on the button in the sidebar, in the new document.

  For anyone that has this problem, I thought it... On your style sheet! YOU MUST HAVE THIS CODE AT the TOP: Or it won't work and it gives this error and you can't see your fluid grid guides all... This will fix it if you are missing this code on your STYLE SHEET... Took me a few days to find out the reason, but I dug deep...

  @charset "utf-8";

  / * Simple fluids

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

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

  */

  IMG, object, embed, {video

  Max-width: 100%;

  Color: #000;

  text-align: center;

  }

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

  . IE6 img {}

  Width: 100%;

  }

  /*

  Properties Grid Dreamweaver fluid

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

  DW-num-CLO-mobile: 5;

  DW-num-CLO-Tablet: 8;

  DW-num-OCOL-Office: 10;

  DW-gutter-percentage: 25;

  Inspiration of "Responsive Web Design" by Ethan Marcotte

  http://www.alistapart.com/articles/responsive-Web-design

  Golden by Joni Korpi grid system and

  http://goldengridsystem.com/

  */

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

• Since the last update of CS6 DW, impossible to find arrow in fluid grids be silent div... any suggestions?

  Since the last update of CS6 DW, impossible to find arrow in fluid grids be silent div... any suggestions?

  Hi JoshuaACertain,

  That is a good Question.

  DW now inserts the new item of default new line fluid.

  If the user does not want to start a new line, then they can click on the button "Move up a line" (like on the screenshot), after insertion of the element.

  This was done mainly because after the class supports in place now, user, use this option once and then simply duplicate the item to get the desired result (i.e. the brothers side by side) with a single click...

  

  Please let me know if something was not too clear in the video, I'll be happy to explain the same thing.

  See you soon,.

  Puneet