Problem of fluid page layout grid

I am trying to create a fluid grid presentation.  In fact, this is why I bought Dreamweaver CS6.  Problem is after you have created the first div which I named header it works very well.  However, on the insertion of the other div Dreamweaver inserts the following text in my index.html:

@charset 'utf-8'; / * Simple Note fluids: fluids 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 does not support width max so by default 100% width * / img .ie6 {width: 100% ;} / * Dreamweaver fluid grid properties - dw-num-CLO-mobile: 3; 8; dw-num-OCOL-Office dw-num-CLO-Tablet: 12; dw-gutter-percentage 20;}} Inspiration of "Responsive Web Design" by Ethan Marcotte http://www.alistapart.com/articles/responsive-web-design and gilded with Joni Korpi grid system http://goldengridsystem.com/ * / / * Mobile layout: 480px and below. * / .gridContainer {left margin: auto; margin-right: auto; width: 85.9444%; padding-left: 2.5277%; padding-right: 2.5277% ;} #LayoutDiv1 {clear:; float: left; margin-left: 0; width: 100%; display: block ;} #header {clear:; float: left; margin-left: 0; width: 100%; display}}} : block ;} #nav {clear: both; float: left; margin left: 0;} Width: 100%; display: block; } / * Tablet Layout: 481px to 768px. Inherits the styles of: Mobile layout. * / @media screen only and (min-width: 481px) {.gridContainer {width: 91.0625%; padding-left: 0.9687%; padding-right: 0.9687% ;} #LayoutDiv1 {clear: sentences; float: left; margin-left: 0; width: 100%; display: block ;} #header {clear:; float: left; left margin: 0; width: 100%; display: block ;} #nav {clear:; float: left; left margin: 0; width: 100%; display: block ;}} / * Desktop Layout: 769px to a maximum of 1232px.}}}}} Inherits the styles of: Mobile and tablet. * / @media screen only and (min-width: 769px) {.gridContainer {width: 88.75%; max-width: 1232px; padding-left: 0.625%; padding-right: 0.625%; margin: auto ;} #LayoutDiv1 {clear: sentences; float: left; left margin: 0; width: 100%; display: block ;} #header {clear:; float: left; margin-left: 0; width: 100%; display: block ;} #nav {clear:; float: left; left margin: 0; width: 100%; display: block ;}} }}}}}

I figured that the respond.min.js file has been the cause of the problem so I downloaded an update, but it did not help.  At this point, I'm not able to use this feature of Dreamweaver.  Any help will be appreciated.

Nancy,

I managed to do the work.  I went very slowly on the instructions and realized that I had not put the boilerplate.css and respnd.min.js files in the scripts folder.  That makes the difference.

Thanks a lot for your help.

Sheridan

Tags: Dreamweaver

Similar Questions

  • Problem of fluid page layout grid DW6: writing to the page instead of the css file

    DW6 using (version 12, ownership, build 5861) on Windows 7 64 bit.

    After the tutorials and help files to use the grid to fluid.

    1. Launch a blank page on a new site, which inserts the div of starter and the new css file
    2. Immediately save page which also generates / saves auxiliary files (js and css).
    3. Remove inner div that is created in order to use my own (tried also leaving room for a default value and use)
    4. Insert the new div within the div 'clearfix gridContainer.
    5. Place the cursor just after this new div, always inside the "gridContainer clearfix" and add a new 'fluid grid layout div tag', new line.
    6. Following the same method, do it again.
    7. Dreamweaver adds the CSS code generated to the actual page instead of the expected div visibly (minified)... and everything breaks. To do this, * not * add the code in the CSS file from there and the only way to have it show the div (which show no visual indicators since the CSS is essentially lost who would do it, CTRL-Z to undo the last step. It cancels the CSS presentation as the only content in the HTML file, and * is * display a div with the name I had given him. If I copy and paste this CSS generated in the fluid css file * so * CTRL-Z, he looks at the way she's supposed to, with drag handles, visible fingerprints and so on.
    8. If I then change div widths or position, it saves these changes in the CSS file, it seems that it is only when inserting new div tags after another is a problem third div inside the container is when it starts choking; no overlap).

    It is repeatable, desktop or laptop, running the same version. I tried to save after each insert div, only at the beginning, only rescue code view, split only...

    I tried looking for someone else having this problem and must not be worded research properly, impossible to find someone else saw it. It's weird.

    If someone can point me to something to try then workaround is not necessary, it would be appreciated.

    Work within a Site defined properly?

    Is the folder of your site in the disk/volume even as DW?

    Nancy O.

  • I use Dreamweaver cc 2014 and after styling css to my fluid page layout grid I lose him resize, delete, duplicate and move up / down ability.

    I use Dreamweaver cc 2014 and after styling css to my fluid page layout grid I lose him resize, delete, duplicate a high displacement / low capacity.

    For this reason I can't build new pages by copying a page to create a new one.

    I have a third style sheet that I use for the styles of navigation and h1 - h6 ect. Tags. and I'm also using a dropdown menu CSS, if one of them can be the problem?

    The menu css that I use has the following script: I spend at the bottom of the html page. Before the closing tag, body

    < script >

    $(function () {})

    $("#nav").tinyNav ();

    });

    < /script >

    I also use the following for an image - I have put it to the top of the fluid

    grid style sheet.

    * {

    box-sizing: border-box; / * Opera/IE 8 + * /.

    -moz-box-sizing: border-box; / * Firefox, another Gecko * /.

    -webkit-box-sizing: border-box; / * Safari/Chrome, another WebKit * /.

    }

    Can you please help.

    My experience is that you should not touch the style sheets that have been created by the system of FGL. Also, there is no need to copy and paste whenever it could disrupt the spoilsports. If you need to apply your own styles and then put them in a second stylesheet, that way if something goes wrong, you can always revert to the original.

  • questions of fluid page layout grid

    try my hand at this thing of fluid page layout grid and I'm having a few problems. part of the problem is I can just try to do too much, which makes an ecommerce site and the page has a certain div inside, a header, description, photo, basket and price div by each element. the layout looks good in the mobile display but I can't get the divs to match the Tablet and the desktop view.

    I know there are other programs as data boot out there, but just don't know if they're going to face the same question.  the simple solution would be just to create each of these elements in photopshop and then each item would be just a div, instead of 5. but the question would then become I create the size of each element of the mobile view, but at the time it gets to the desktop view the quality of the image is going to be lousy.

    the last solution would be just to get a different url and build this page for mobile, have a link on the page to view this complete site and just towards my url which has the site office facing up and running and do the opposite on the desktop site.

    HELLLLLPPPPPPPP! advice or direction would be appreciated.

    My url is http://www.coloredfortunecookies.com If you want to see my questions. you can play with the size of the screen in your browser and see all look great in the mobile display, but not the other.

    Thank you!

    Thank you nancy, makes sense.

  • First Div in the inoperable fluid page layout grid

    I created a grid of fluid layout with lots of divs.  Once I created the full page the first div in the grid container is not green and cannot be changed in size.  It shows as follows:

    < div class = "gridContainer clearfix" >

    < div id = "Logo" > OWL logo < / div >

    < div id = "PhoneSample" > This is the content of the div layout "PhoneSample" < / div >

    etc.

    etc.

    etc.

    The div logo does not work and is all black and white - no green layer.  When I click in the blue border mobile is not upward as it does on all of the following divs.

    Please, I beg you. What I did and how can I solve this problem?  Thanks in advance.

    Thank you Nancy.  I changed the description of html back to accord with the CSS and I'm back in business.  It should have been obvious to me, but it wasn't somehow.   I found you and this forum are very useful.

  • SIZING QUESTION in FLUID PAGE layout GRID (READING AND I'll EXPLAIN) Please help

    I have 2 asides placed side by side each width of 50% for the layout of the content. The width works very well stay in proportion, but the height is not stay the same proportion when the size of the screen changes. I need 2 asides to stay the same size as each other across the screen of different sizes to help please

    Here is my code:

    < side class = "roofingaside" >

    < class header = "roofingheader" > ROOFING AFFORDABLE < / header >

    < ul class = "fluidList fluid roofinglist" >

    < class li = 'fluid rooginglistiteam' > ROOFING NEW < /li >

    < class li = 'fluid rooginglistiteam' > < /li > REPAIRS

    < class li = 'fluid rooginglistiteam' > WINTERIZE < /li >

    < class li = 'fluid rooginglistiteam' > SERVICES 24/7 < /li >

    < /ul >

    < / side >

    < side class = "electricalaside" >

    < class header = 'fluid electricalheader' > ELECTRIC SERVICES < / header >

    < ul class = "fluid fluidList ELECTRICALLIST" >

    < class li = 'fluid ELECTRICALLISTITEAM' > INTERIOR & EXTERIOR LIGHTING < /li >

    < class li = 'fluid ELECTRICALLISTITEAM' > outlets, SMOKE DETECTORS, DRYER CIRCUITS < /li >

    < class li = 'fluid ELECTRICALLISTITEAM' > FANS, CIRCUITS of a/c, HEATING ELECTRIC < /li >

    < class li = 'fluid ELECTRICALLISTITEAM' > CALLED SERVICES < /li >

    < /ul >

    < / side >

    Type in capital LETTERS, it's the same as shouting in the web forums.  Please do not shout out your answers.

    You have 2 choices.  Either build your site with FGLayouts and do not worry about the columns the same height.   Or re - build with a layout of fixed width in pixels.   Whatever approach you use, height is always determined by the content.  Then accept this fact and sleep well at night.

    Welcome to the web design 101

    Nancy O.

  • How can I increase the maximum width of a fluid page layout office 1232px at 1920px grid?

    How can I increase the maximum width of a fluid page layout office 1232px at 1920px grid?

    You will need to manually alter the query from media CSS for desktop computers.

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

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

    .gridContainer {width: 90% ;}}

    }

    Nancy O.

  • Why are there no paper/page layout grid system? !

    Since before the age of darkness, the grid system has been the Holy Grail of typography and print design. Of course, you should not use it, but sometimes you really need to rely on this system to make sure that your creations are test balls.

    SO WHY ON EARTH IS THERE NO OPTION IN ILLUSTRATOR TO CREATE GRIDS? !

    In my case I'm working on a page 5 of tabloid layout. IM using Illustrator because I want this way and since InDesign is the most horrible software worlds never imagined (IMHO).

    How the other ppl to address this lack in Illustrator?

    Thanks by the way!

    Try this:

    Make a layer.

    Drag a Rectangle

    Choose: Object > path > split into grid...

    (or change your opinion about InDesign).

  • Problem with Web page layout

    How to take a flash image and send behind my menu drop down Fireworks?

    Try to place this inside the tag

  • WHY 100% fluid width layout-design covers only 60%

    I have big problems with the DW/CS6 create fluid page layout option, because even if it is configured to use 100% width - I get only the equivalent of 960 width.

    I want to be able to create a design similar to the one on the Wordpress.com site (I know it is a competitor, but stick with me!)

    I want to be able to set the background in the entire width of the page and remain responsive.

    It is not to do so.

    I spent days on this - many questions - spent all night on this (it is 06:00 and I worked on this put 18 hours of the 24 last)

    I can't get DW to give me a width of 100% with a reactive provision that will wrap up a menu in its container div.

    I will not repeat my previous posts - it's just that I can't just simply appear to get what I'm after with my limited knowledge.

    It's a very steep for me, learning curve as I only did 960px sites in the past.

    I managed to develop so far, but having problems to make any kind of sensitive menu in the menu bar which will not overlap outside the area of the menu bar.

    example on www.tdrd.karoo.net

    I'm getting so frustrated (and now tired)

    Thanks for all the help on other issues, but I need a simple to understand the fluid/sensitive/Adaptive design (another thing I learned tonight)

    that will allow me a background image 100% behind the content area width.

    Terry

    terryfoster wrote:

    Ah the content area is 960 ok, but my problem is to get a menu to display in the menu bar is the problem

    {I took the code from your other post - you had extra} in the css that stop to the css cascade as I thought you use floated

  • Tags for menu - you must clear the floats that is why I made a request ' overflow: hidden;' to the container menuArea force it to wrap the floating
  • Tags.

    {#menuArea}

    background-color: #F6F;

    overflow: hidden;

    }

  • Summary page layouts.

    Hello

    I explore BI Publisher. I have a data model that contains the attributes and measures of OBI EE area. (Date model is based on the SQL query and not OBI EE analysis.)

    For example, country, State, city, year, month, day and sales.

    Based on the data model, I created two layouts, one giving all the elements of the report above in a data table. Available on the other, I want display summaries of sales by attributes with a maximum of three attributes included per Table/table - all in a single page layout grid.

    The question is, at least looking at the tables, it doesn't create summaries of sales values. For example, if I remove the day in a Table, it still shows me 30 rows (for November). If I try to use a custom formula "Summons" on sales, BI Publisher shows me a warning message giving reason "the selected component does not support the aggregate function.

    How to display summaries appropriate, please?

    Thank you

    Maury.

    Have you considered using a Pivot?

  • Dreamweaver layout grids do not work in browsers of IE9 pre

    I put in place of the pages with Dreamweaver Templates page layout grids, and they work very well in IE9, Chrome and Firefox (etc.), but NOT in the browsers of pre - IE9! it does load that the mobile style sheet, it does not account for all subsequent @media css. What is happening here? http://leighjackson-co-nz-dev.web4.pbstaging.com/

    As it says on https://github.com/scottjehl/Respond, respond.js is not parse CSS referenced through @import. All your media queries use @import.

  • Problem in Dreamweaver with fluid layouts grid

    Hello!  This is my first post here.  I had intermittent problems in page layouts fluid grid.  The sizing handles that are supposed to be there in a liquid/div element sometimes disappear with duplication icon and the arrow that moves a div element / to the previous row.  For example I'm working on a lesson in my class online for Dreamweaver that wonder of an unordered for a style menu list.  I want to make a horizontal menu where each item is 3 columns wide.  Without handles I can't size the elements in the list or "inflate them" next to each other.  What's a sense?  Sometimes, they are there and sometimes not.  Especially not here.  It's very frustrating!  Can someone offer solutions?

    Paula Jo Nyman

    Finally talk to someone on the phone and let them copy my movements on their own screen after I managed to get it solved very quickly, the red highlighted button seems to be what was missing! I hope this helps

  • How to replace the gutter while using fluid layouts grid?

    Hello

    My problem occurs when I try to take two of my divs in the checkerboard to fluid and make them so that they are all built-in. I removed the left margin of the div on the right side and makes the two divs side by side in the designer view. However when I take a glance on the site in IE or Chrome a gap remains between the div where the gutter is to.

    I don't know exactly what we call this technique, but I'm trying to get the look that it is beveled and it separates the columns. problem w divs.png Two areas of the circles are where I want the divs to be routed via line side by side with the other. It is supposed to look like this.

    correct.png

    As I mentioned above, I use the grid to fluid. I don't know there must be a way to move the div is above. However, I believe that the problem may have to do with the "locked" for Gates div. I tried to remove the left margin which had some divs, this seems to solve the problem in DW, but isn't actually once I have test.

    I'm fairly new to DW but I was able to pull this off so far and this is the only problem that keeps me from this site to complete.

    Another idea I had was to just wrap the 3 layers of content I want to be together and put them in a div that surrounds all 3 and set the background image of the main div to this image. However, the problem with this is that as scales the image down the page is cut and then before you know I do not have the look I want. If there is a way to make the background image to maintain its width and the scale of the page, I think this might be an easier solution.

    If anyone has any ideas on how to fix it please let me know.

    Thanks in advance

    Hello again,

    So after a few hours messing around I was able to solve my problem. I'll just tell you guys what I have any pack that is facing the same problem, I got in the future.

    After that I had this moment where I expected to find, how have I not think of this before?

    Basically if you look at the first image I posted above I put 1 part of the dark line on the left image and the white line on the Middle image. This caused a problem when the page has been updated to the scale about because the sides of the Middle image might get cut and so I lost the look indented.

    To solve this, I have simply returned to Photoshop, took all the lines out of the Middle image, and then I put the two lines on the left and the right image. Once I inserted the pictures in DW I had lined up on the left edge (for the photo on the right) and the right edge (left on the photo). This made sure that, even if the sides got "cut" as page scaling, the other would stay in place.

    My page is now able to scale properly with the background image remains in the right place.

    In addition to "spend addition" gutters and remove rules space, I found that I had to just go into my CSS in each of these boxes and set light to the times, left or right. This definition seems to forget that the gutters were there and so my divs go next door.

    Thanks for all the help guys gave. It got me thinking and helped me to find this solution.

  • Page layout in V11 license problem

    Hello

    I got a support request on an error with page layout in V11 license. The same project works very well in V10, but while trying to open in V11 layout options only are not enabled (attached screenshot). They have the MWO-449. Can someone tell me what the problem is here?

    Thank you!

    Hey Jake,

    Did you put your license file in the installation directory or elsewhere?

    You can if you put it in the installation directory:

    1. move the license out of the installation file

    2. open the software.  It will put you in the configuration dialog of the licences where you can press set location.

    3 browser to the new license file location and select the license.

    4 restart the design environment and see if the problem is corrected.

    Thank you

    Shane C

Maybe you are looking for

  • Portege R700-1E8: DVD player will not eject tray

    HelloMy DVD does not open the tray.When I hit eject I hear any attempt to open and after a few seconds the lights go on but the drawer does not open. Is there a solution for this. I unplugged my PC and I tried ejecting with power on my PC and it work

  • Qosmio G30 broke down

    My Qosmio G30 crashed last night. It worked fine all day.Restart a blue page appeared but went so quickly that I couldn't read. Tried to restart in normal mode, crashed again. Running in safe mode has made the virus check, looked at the Manager of de

  • Random number

    Hello I want to build the app to get a random number between 200 and 250 How can I do in labview nots I have labview 9 Thank you

  • Security Center has been disabled by a virus, how do I turn this back?

    Hello My computer has been infected with a virus that has disabled the Security Center Service. I cleaned my computer since the virus and other viruses (with the help of Microsoft Security Essentials) and everything seems to be clean. Now when I try

  • Where to download Windows Vista Italian?

    My client to have Windows Vista Italian, finally he left the original CD to the Italy, so where I can download Windows Vista full in Italian? Thank you