Sitemap

Amicuk Programming Answers

Fluid grid layout problem

2015-10-11   Views:2

Advertisement

I am trying to create a fluid grid layout.  In fact it is why I purchased Dreamweaver CS6.  Problem is after I create the first div which I named header it works fine.  However, on inserting the next div Dreamweaver inserts the following text in my i

I am trying to create a fluid grid layout.  In fact it is why I purchased Dreamweaver CS6.  Problem is after I create the first div which I named header it works fine.  However, on inserting the next div Dreamweaver inserts the following text in my index.html:
@charset "utf-8"; /* Simple fluid media Note: Fluid media requires that you remove the media's height and width attributes from the HTML http://www.alistapart.com/articles/fluid-images/ */ img, object, embed, video { max-width: 100%; } /* IE 6 does not support max-width so default to width 100% */ .ie6 img { width:100%; } /* Dreamweaver Fluid Grid Properties ---------------------------------- dw-num-cols-mobile:3; dw-num-cols-tablet 8; dw-num-cols-desktop: 12; dw-gutter-percentage 20; Inspiration from "Responsive Web Design" by Ethan Marcotte http://www.alistapart.com/articles/responsive-web-design and Golden Grid System by Joni Korpi http://goldengridsystem.com/ */ /* Mobile Layout: 480px and below. */ .gridContainer { margin-left: auto; margin-right: auto; width: 85.9444%; padding-left: 2.5277%; padding-right: 2.5277%; } #LayoutDiv1 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #header { clear: both; 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 styles from: Mobile Layout. */ @media only screen and (min-width: 481px) { .gridContainer { width: 91.0625%; padding-left: 0.9687%; padding-right: 0.9687%; } #LayoutDiv1 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #header { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #nav { clear: both; float: left; margin-left: 0; width: 100%; display: block; } } /* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */ @media only screen and (min-width: 769px) { .gridContainer { width: 88.75%; max-width: 1232px; padding-left: 0.625%; padding-right: 0.625%; margin: auto; } #LayoutDiv1 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #header { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #nav { clear: both; float: left; margin-left: 0; width: 100%; display: block; } }
I suspected the respond.min.js file was causing the problem so I downloaded an update but it didn't help.  At this point I am not able to use this feature of Dreamweaver.  Any help will be appreciated.

The replay answer
Advertisement
Thanks for the help.  I am using version 12.0 build 5861.
I was trying to follow the example in a book I have called Dreamweaver CS6 – The Missing Manual.  When I got to the section discussing Fluid Grid Layout, I attempted to follow the example step by step.  I was able to insert the first div which I named header.  I looked at my css file and it had placed the #header.
I knew that I had to remain within the container  div.  I went into the code view and placed the cursor to the right of the header div.  I then clicked the insert Fluid Grid Layout Div Tag button.  That’s when it automatically inserted all of the code I indicated in my post.
I then started to follow the example in http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs6.html .  I got the same results.
I’m beginning to wonder if there is an error in the Dreamweaver software itself.
Any help you can give will be appreciated.
Sheridan

Go to See the other 9 answers

Fluid grid layout problem

Category:DefaultRelease time:2015-10-11Views:130

I am trying to create a fluid grid layout.  In fact it is why I purchased Dreamweaver CS6.  Problem is after I create the first div which I named header it works fine.  However, on inserting the next div Dreamweaver inserts the following text in my i[More]

Fluid grid layout problem in IE and Firefox

Category:DefaultRelease time:-0001-11-30Views:130

I just got DW CS6 and decided to try the fluid grid layout. This is my first try at doing it. I have 12 grid columns with 3 divs across the page. Each div spans 4 columns. In Opera, Safari and Chrome, everything works fine. However, in IE and Firefox[More]

Dreamweaver 12.0 - Fluid Grid Layout problem - I have 12 columns - but some DIV's are too wide

Category:DefaultRelease time:2015-10-11Views:130

http://skicmsc.org/NewResponsive.htm Working on a new look for a current site.  I have 16 columns. Left div is 3 columns, next is 7 columns, then 3 and 3. Total: 16 The 7 column Div is pushing the right Div's off the layout by several "columns".[More]

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

Category:DefaultRelease time:2015-10-11Views:130

Hi all, I have done a complex fluid grid layout using DW 2014 CC. The site has now gone live on the web masters server setup. Up until now the layout of the site has been working fine and responding to screen size. Early this morning in the USA the s[More]

Problem in desktop layout in "Building fluid grid layouts in Adobe Dreamweaver CS6"

Category:DefaultRelease time:-0001-11-30Views:130

In this tutorial you taught to design a responsive site ....but the Terrestrial Nursery completed page doesnot work well in Internet Explorer in 14 inches Square Monitor........that you have placed the three columns in the same alignment...but while[More]

Problems Creating a "Fluid Grid Layout" with Adobe Dreamweaver CS6

Category:DefaultRelease time:-0001-11-30Views:130

I am trying to create a fluid grid layout in Dreamweaver CS6 (which I know how to do), the problem is Dreamweaver started automatically saving the boilerplate.css & respond.min.js in the Dreamweaver program folder (C:\Program Files (x86)\Adobe\Adobe[More]

Problems with margins and borders in a fluid grid layout

Category:DefaultRelease time:-0001-11-30Views:130

When I create a page using the built-in fluid brid layout option in Dreamweaver CC, I have problems adding margins and borders. to the elements I've added to the page. Is there a method to prevent the above occurring?Hi Ken I'm sizing each element to[More]

Creating new website with Fluid Grid Layout in CS6 - CS3 Transitions problem

Category:DefaultRelease time:-0001-11-30Views:130

I am making my second website with Fluid Grid layout and as with my last one, it seems I can't use CS6 transitions. Each time I go to add a new transition, Dreamweaver stops working and shuts down. Should you be able to use the transitions function w[More]

Problem in Fluid Grid Layout

Category:DefaultRelease time:2015-10-11Views:130

I am trying to edit an My existing html site with a fluid grid layout.  My Layout toolbar doesn't show a fluid grid div widget, and when I go to the 'Insert:Layout' menu, the fluid grid option is also gone.  It used to be there.  How do I get it back[More]

How do I get my Fluid Grid Layout page to resizes from portrait to landscape for iPhones?

Category:DefaultRelease time:2015-10-11Views:130

Starting in portrait on my iPhone 4, the fluid grid layout page does not resize when I turn to landscape.  After I refresh / resize to fit the page on landscape and then turn the iPhone to portrait, the page resizes just fine.  Everything seems to be[More]

How can I convert my web page from a fixed width layout to a fluid grid layout?

Category:DefaultRelease time:2015-10-11Views:130

I'm taking a web design class (I'm using Dreamweaver CS6, btw)  wherein the professor started us out building our websites in a fixed width layout but now I want to change my site into a fluid grid layout. My "site" so far is just one long page,[More]

Hot
Hi, I am working on AR Receipts converison in R12 and trying to create cash receipts using AR_RECEIPT_API_PUB.CREATE_CASH. As per my data file there are 3 receipts that can be created successfully, but 1 receipt that has a couple of errors. I dont wa [More]
How to fix error message:  "remove and check right cartridge" which you have done numerous times, plus cleaned cartridge nozzle.  Also, I have turned off power to printer, but nothing changed.  Help for HP Officejet 7210 All-in-One needed. This [More]
When you import bookmarks from Firefox or another browser into Firefox in a separate computer the bookmarks get imported fine, however their icons get disappeared. You have to click on every single bookmark in order to load its corresponding icon! No [More]
Dear Team, We are facing a issue with PRD server. For last 20 days we restarted the PRD server for 3 times. 1)We restarted the server for TMS issue which is advised by SAP support team in one incident. 2)Another time we restarted the server for the i [More]
Hi all, When I create return order via transaction CIC0 with reference to standard order ( B2C ) then some times system gives error after saving the return order. The text of the error message is very confusing , It says" Message no. CRM_ORDER_MISC 0 [More]
I am doing a project for a friend of mine. I do not have any experience with video in Flash but have been picking my through it today. My question is how you would recommend I do this. The final flash movie will consist of an SWF, and XML file and a [More]
Hi , What is wrong in query parameter? userid=crmodrepo/reports file=crmodrepo4.dmp log=crmodrepo4.log statistics=NONE indexes=Y tables=(ODPERF_REQUEST_DATA) query=\"DATETIME >'10-MAY-08 01.00.00'\" I am getting bellow error. I have tried dif [More]
Once again, a new update, additional problems.  I've removed all of the files from the data cache and described in earlier posts.  Once I click a folder, now the contents wont create previews. The little wheel in the bottom left just keeps spinning, [More]
Is there anyone else out there also on a new BTHub 4 who could tell me where to find the full ADSL connection details? On my previous  BTHomeHub 2 it used to show the full ADSL details (noise margin, attenuation, etc) in the advanced settings. Can't [More]
I can't seem to find any FAQ that explains what RIM and/or third party applications might be available and just how I'd go about installing them.  For example I would like to have an application that would: Export my contacts from my Palm desktop (no [More]