100% width div inside the fluid grid

Similar Questions

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

• How can I create a slide show 100% width, but have the caption in different positions for each slide.

  How can I create a slide show 100% width, but have the caption in different positions for each slide.

  There is placement of the legend only one for all the images in a slide show.

  The slideshow widget is specialized to create slideshows of the image. The widget of composition is a much more flexible widget which allows any combination of images and text in the trigger containers or containers of target of the widget. A widget of composition could be used to create a slide show with several legends by image and/or legends of different places for each image. The disadvantage of the widget of composition is that, due to the nature flexible widget, very little is automated for you and so it is much more intensive work to create a slideshow of images using the widget of composition.

  Thank you

  Sanjit

• The fluid grid columns disappeared. How to make a comeback?

  I need help for the fluid grid columns is displayed.

  

• Is it possible to display the design view in the fluid grid pages?

  After the upgrade to the latest version of DW CC 2014, I noticed that design mode is disabled in the fluid grid pages. You can only use the Live View mode to change these pages. Design/Live button on pages not fluid.

  I wonder if there is a work around to allow the Design mode of publishing on the pages of fluid. It is a major concern to try to change some things in Live View mode. It would be nice to have a choice.

  @Ron

  Ron, thanks for your idea.  I just tried this in my fluid grid css file, and it worked!  The strange thing (at least in my mind) is that the code (below) is commented.  So, even though my web pages ignore this commented code, Dreamweaver is not... use it to control how the Dreamweaver program works. Well, I think that this can happen.  This code behaves as a "directive" in the Dreamweaver program.

  A notable change is that I no longer see the grey bands indicating the fluid grid columns in Live view mode, but I can live with that.

  It's my way of novice look at the situation.  But now I'm happy.

  Here are my exact code (which I deleted) of my css file.  Maybe others can try it and see if that fixes the problem.

  /*

  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/

  */

• Why I'm not able to see the fluid Grid Layout Div tag

  Why can't I see no menu fluid Grid Layout Div in the Layout to insert tags

  DW CC changed signs.  If you work in FGLayouts, DW intuitively inserts the correct Div for you.

  Nancy O.

• Help with my drop-down list in the fluid grid view

  

  I built the site of "fluid" and that's great, up and running and I am delighted!  A big thank you to the DW forum. URL is: tyndall.net.au

  Now, I want to add a drop-down in the three 3 sizes: mobile, Tablet and desktop. And I want it to develop the ' Services ' section. On the 'Services' page there are links to 21 different types of services.

  It is these types of different services, have to be displayed in the drop-down list button.

  Objective: in hover mode, the fall down to look identical to the head key, centered with a complete history! To inherit.

  You can see on the screenshots:

  In Mobile, there is a complete history, but it is not centered and not the same size

  Tablet & Desktop - background not complete, not centered, not the same size

  I can't find a tutorial on this issue. Tutorial of Daniel Walter - Scott in BYOL helped a long way, thanks mate.

  Can someone help me with this problem?

  Concerning

  Jonathan

  Byron Bay, Australia

  __________________________________________________________________

  Reach:

  Here is the HTML code for the nav div:

  < nav id = 'mainNav' class = "fluid" > < ul id = "menuSystem" class = "fluid fluidList" > "" ""

  < li = class "menuItem fluid zeroMargin_tablet zeroMargin_desktop" > < a href = "/ index.html" > home < /a > < /li >

  "< class li ="fluid menuItem"> < a href="/About/about.html "> on < /a > < /li >

  "< class li ="fluid menuItem"> < a href="/Services/services.html "> Services < /a >

  < ul >

  < class li = "fluid menuItem" > < a href="/Services/otherpage.html" > Immigration < /a > < /li > ".

  < class li = "fluid menuItem" > < a href="/Services/otherpage2.html" > Banking < /a > < /li > ".

  < class li = "fluid menuItem" > < a href="/Services/otherpage3.html" > bankruptcy < /a > < /li > ".

  < /ul >

  < /li >

  < class li = "fluid menuItem" > < a href="/Articles/publication.html" > items < /a > < /li > ".

  < class li = "fluid menuItem" > < a href="/Migrate/migrate.html" > migrate < /a > < /li > ".

  "< class li ="fluid menuItem"> < a href="/Journal/journal.html "> Blog < /a > < /li >

  < class li = "fluid menuItem" > < a href="/Contact/contact.html" > Contact < /a > < /li > < /ul > < / nav >.

  < / header >

  Here are all the css in style.css code:

  @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: 7;
  DW-num-OCOL-Office: 14;
  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/
  */

  {.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;
  font size: small;
  }
  #top {}
  }
  #top img {}
  left margin: auto;
  margin-right: auto;
  display: block;
  }
  {#mainNav}
  }
  {#menuSystem}
  list-style-type: none;
  }
  .menuItem {}
  top of the margin: 2px;
  margin-bottom: 2px;
  padding-top: 1px;
  padding-bottom: 1pk;
  text-align: center;
  color: #FFFFFF;
  background-color: #051383;
  border-radius: 5px;
  Width: 100%;
  left margin: 0;
  Clear: both;
  }
  {.photois}
  }
  body p {}
  do-family: Arial;
  }
  {.jonofigcaption}
  make-style: italic;
  Police-family: Garamond;
  font size: small;
  text-align: left;
  }
  body figcaption p {}
  }
  {motto}
  Police-family: Garamond;
  font size: large;
  make-style: italic;
  text-align: left;
  }
  .Text1 {}
  }
  . Header {}
  do-family: Tahoma;
  font-size: medium;
  }
  {.jonotext}
  do-family: Arial;
  text-align: justify;
  }
  .Text2 {}
  do-family: Arial;
  text-align: left;
  }
  {.footer1}
  text-align: right;
  do-family: Arial;
  do-size: x-small;
  }
  {.footer2}
  text-align: right;
  Police-family: Garamond;
  do-size: x-small;
  }
  {.footer3}
  text-align: right;
  do-family: Arial;
  Police-weight: 900;
  make-style: italic;
  }
  . gridContainer.clearfix. fluid.footer2 p img {}
  }
  {#jonominibutton}
  left margin: 1px;
  right margin: 1px;
  padding-left: 1px;
  padding-right: 1px;
  }
  #mainNav a {}
  display: block;
  text-decoration: none;
  color: #FFFFFF;
  }
  #mainNav a: hover, #mainNav a: active, #mainNav one: {emphasis
  background-color: #A3C3FF;
  text-decoration: none;
  color: #051383;
  }

  . gridContainer.clearfix #top img {}
  padding-bottom: 5px;
  padding-top: 5px;
  }
  UL {}
  list-style-type: none;
  }
  {body
  }
  a: link {}

  }
  {.footer4}
  do-family: Arial;
  font size: small;

  }
  . gridContainer.clearfix. fluid.footer2 p an img {}
  }
  {.officearea}
  }
  .officearea img {}
  vertical-align: bottom;
  }
  {.jonofooter4}
  do-family: Arial;
  do-size: x-small;
  text-align: left;
  }
  .jonothumb img {}
  vertical-align: baseline;
  }
  {.footer7}
  do-family: Arial;
  Police-weight: 900;
  make-style: italic;
  font size: small;
  }
  {.zeroMargin_mobile}
  left margin: 0;
  }
  {.hide_mobile}
  display: none;
  }
  #mainNav ul ul {}
  display: none;
  position: absolute;
  }
  #mainNav li: hover ul > ul {}
  display: block;
  }
  #mainNav ul ul li {}
  float: none;
  text-align: center;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;

  
  background-position: center
  %;
  }

  #mainNav a: hover, a: active {}
  }

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

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

  {.gridContainer}
  Width: 90.3428%;
  padding-left: 1.3285;
  padding-right: 1.3285;
  Clear: none;
  float: none;
  left margin: auto;
  }
  #top {}
  }
  {#mainNav}
  }
  {#menuSystem}
  }
  .menuItem {}
  Width: 11.7647%;
  Clear: none;
  margin left: 2.9411%;
  }
  {.photois}
  }
  .Text1 {}
  }
  .Text2 {}
  }
  {.footer1}
  }
  {.footer2}
  }
  {.footer3}
  }
  {.footer4}
  }
  {.officearea}
  }
  {.footer7}
  }
  {.hide_tablet}
  display: none;
  }
  {.zeroMargin_tablet}
  left margin: 0;
  }
  }

  / * 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%;
  }
  {.photois}
  }
  .Text1 {}
  }
  .Text2 {}
  text-align: left;
  }
  {.footer1}
  }
  {.footer2}
  }
  {.footer3}
  }
  {.footer4}
  }
  {.officearea}
  }
  {.jonoboldarial}
  Police-weight: 900;
  do-family: Arial;
  make-style: italic;
  }
  {.footer7}
  }
  {.zeroMargin_desktop}
  left margin: 0;
  }
  {.hide_desktop}
  display: none;
  }

  }

  It's these types of different services, I should show up in the drop-down buttons. >

  Drop-down lists that appear to move the mouse do not work on touchscreens because they do not have a mouse.  The current trend is to keep the navigation simple & simplified.  21 links dropdown under Services is going to be too expensive for mobile users.   Just keep the simple navigation with a link to the Services page you did and your users will have fewer problems with your site.

  Either way, justified text links seem strange.  See screenshot.   You can see that.

  

  Finally and most importantly, provide enough space between links to help mobile users.  Android recommended that links be 10mm high providing for easier faucet finger gestures.  When the links are stacked too close together, which makes it very difficult selecting the link desired without the aid of a stylus.

  Nancy O.

• Change the fluid grid in Dreamweaver CS6?

  I'm trying to understand how do to change my fluid layout grid in Dreamweaver CS6. Can anyone guide me on this issue? I'm also struggling with reorganize my images and text inside the div tags - can't move anything. Can someone enlighten me?

  Project seven Page Packs?  The affinity is their sensitive theme.

  Affinity PVII CSS: Reagents and Mobile-Ready layouts for Dreamweaver

  I use no more than FGLayouts.  At best, it's an OK Starter for your projects of reactive nature.  But I was never enthusiastic with the execution of the interface in DW.  Buggy, very fickle and if you alter the CSS code, it will break the page layouts.  Basically, it's a good idea that was never fully carried out.

  In 2015, CC, it's called fluid grid Layouts (Legacy) which means that it is removed gradually from. IMO, Bootstrap is much better.

  Nancy O.

• Hide / show the fluid grids on Dreamweaver CC 20141

  Hello!

  How can hide us the grid of fluid on 20141 version?

  Thank you very much!

  Hide how exactly?

  Do you mean to use FGLayouts in 20141 with Design view?

  Open your fluid Grid CSS file and add an X as shown below.  This trick DW into thinking that it is a normal page layout, so you can use the Design mode, spell checking, copy & paste text, etc...

  /*

  Properties Grid Dreamweaver fluid

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

  DW-num-CLO-mobile: X 4;

  DW-num-CLO-Tablet: 8;

  DW-num-OCOL-Office: 12;

  DW-gutter-percentage: 25;

  =====================================

  Nancy O.

• Presentation of the fluid grid in Dreamweaver CS6

  How to use the grid to fluid for a Web site with multiple Web pages with different layout?

  Currently, the first "Home Page" page - index.html has three attached files (boilerplate.css, respond.min.js and fluid.css). Do I have to create a new flow layout grid for each page, and thus have three files attached to each of them? Please help. Thank you.

  When I tried to create a new page "Fluid Grid Layout", DW wonder first of all save the new css file, and then when I want to save my page we will say 'What We Do', DW wonder where I woul like save the two generated files (boilerplate.css and respond.min.jr), my answer is of course in the folder "styles" I saved the first files generated for my homepage. A window opens and has this message "file" boilerplate.css in the directory of destination c: / / xampp\htdocs\ is the NEWER than the source. "" Copy the file? " I hit the copy.

  My conclusion: whenever you create a new page, the boilerplate.css file is updated and replace the old. In this way, you can have checkered to different for different pages. PROBLEM SOLVED.

  Thanks for your time Gamps.

• How can I change the columns in the fluid grid to a darker color.  The default color is too gray for me to see them on my screen

  Thanks for any comments I receive. This version is CC2015.

  peoj

  Dreamweaver does not create columns colored for a grid "bootstrap" for good reason: each line has its own set of columns in the layout. So, if you nest a row within another column, the nested line gets a new grid layout of 12 columns (assuming you are using a default grid). Although having a color grid layout looks like a good idea, it would become very difficult to work as soon as you start the nesting of the lines.

  In Live View mode, Dreamweaver adds a handle to resize the column to the right edge of the currently selected column:

  

  There are also a handful of column Offset on the left edge

  

  When you drag handles, Dreamweaver snaps to the next column and it will update the .col-*-* or the classes in the display of the item. In the previous screenshot, you can see immediately that the currently selected column is an important feature of 10 columns wide and is offset by a column.

  It takes a little practice to get used to its operation, but it quickly becomes clear what are the columns of size without the distraction of a color to the background grid.

• Handles and options have disappeared from the fluid grid last in divs Dreamweaver cc?

  What happened to make these options disappear?

  

  Would it be something simple?

• Center a div in a fluid grid?

  I can't get a div with text inside to Center on the page in a fluid layout.

  I tried auto margins and display block.  And a few other things.

  Nothing seems to work.

  
  

  Could someone please explain to me how to do this? I've read about 20 sites that say auto margins should work.

  
  

  Thank you!
  

  Put this in your query support desktop, Tablet & Mobile.  Be sure to get a glimpse into a good browser like FF, Chrome or Opera.  IE8 does not support questions from the media.

  {#TextBlock}

  border: 1px solid red;

  left margin: 25%;

  right margin: 25%;

  Width: 50%;

  }

  Nancy O.

• Presentation of the fluid grid - THE problem with the size of the Image

  Hello

  I worked on a new Web site using the provision of grid of fluid CS6. My site works fine in Chrome and Firefox but in Internet Explorer 9 and 10 and most probably other versions, images resize normall in Chrome and Firefox stay at maximum size in Internet Explorer. Please what could someone take a look at my site and see where I went wrong in the code because I can't find the problem anywhere.

  www.moleseyhire.com/index2.html

  Kind regards

  Ransom of Mitchell

  Try to add to your css:

  TD img {}

  Width: 100%;

  }

• Why do "Switch to the fluid grid view" toggle button does not?

  I don't see the grids in the grid to fluid and nothing happening this button On / Off stages.

  Also get an error "not found smooth Dreamweaver grid style sheet." when insert any item as a component of fluid.

  Please help, thanks.

  @Binson: I'm following your post on another thread.

  In any case, the FG elements can be introduced into FG page layout documents

  On the layout page FG Si you get this error, you have probably some problems of integrity of the files, and DW is unable to locate your stylesheet FG.