Fluid Grid and IE7/8?
I'm using Dreamweaver CC with a one page fluid grid design (www.stratum-group.ca/index_fix.html). It checks out everywhere except with a client who is getting some weird behaviour. In trying to replicate the effect, it seems like the problem is either an IE 7 browser (using IE developer toolbar in IE8 with document mode set to "IE7 standards" seems to replicate the situation), but she says she's running 8.
Every other platform I'm testing in, right down to mobile and various flavours of Firefox, Chrome and Safari, seems to come through okay.
Does anyone have any other suggestions?
TIA
Reach Puneet may have a good solution for you here. I'm not sure what he is talking about concerning the HTML5 shiv bug but you to have to put http: in front of anything that is a link to an external source (outside of your website).
But with respect to that, you have created ids for each of the people in that page. It's messy, but should work. None of those ids use HTML5 elements, so the use of the shiv in those cases won't matter.
The other thing I see here is in lines 2-5 you have:
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!--><html class=""><!--<![endif]-->
I'm not sure what the heck these conditional statements are and what they do. These classes do not exist in any of your called style sheets. They also preceed ALL calls to your style sheets, so they cannot possibly correct anything in your style sheets that involve Microsoft browsers. Last but not least, please understand that Internet Exploder 10 does not understand these escapes, so Microsoft has shut down these kinds of conditional structures for their latest browser.
In any case, these lines seem do do nothing, save set an HTML class that does not exist in your style sheets. Now, there may be people here who can enlighten me as to what these classes mean, but I did not know that any version lower than Internet Exploiter 9 can correctly render any CSS3 or HTML5.
What it looks like you are doing is placing each of the team bios horizontally. I think that, for versions of Internet Exploder 9 and below, I would make a separate style sheet using the Old School method of lining everyone up, which is to create three vertical columns with the teams inside those, placing this conditional IE-specific line after you call your other style sheets:
<!--[if lte IE 9]><link href="_css/ie.css" rel="stylesheet" type="text/css"><![endif]-->
Then create a simple 3-column layout inside a container in that style sheet using the same elements as you have in your main style sheet.
Frankly, with all of those id elements for each person in your style sheet, you have created a bit of a mess. I would have made styles that are more generic and would have used classes, not ids. But in the ie.css you could clear all previous styles set (using the cascade) by defining them thusly:
#team-DavidP {
(and so on)
If you have a class or id that has no css associated with it, it simply becomes a div with no style and will be displayed in the style of its containing element.
Similar Messages
-
Dreamweaver Fluid Grid and Twitter Bootstrap
Does anyone know if it's possible to graft the Twitter Bootstrap styling, elements and functioning onto the Fluid Grid in Dreamweaver CS6? If so how?
I think it would be great to be able to have the ease of manipulating the rows and columns using the Fluid Grid and have all the cool styling and all from Twitter Bootstrap.Here is the complete grid css file that I'm using. It is modified from the original bootstrap. Different class names. It's wrapped in a media query so that the grid only applies above 768px. It gives you a 12 grid system.
@media only screen and (min-width: 768px) {
/* Grids only applied to desktop and tablet
.col1,
.col2,
.col3,
.col4,
.col5,
.col6,
.col7,
.col8,
.col9,
.col10,
.col11,
.col12
display: inline;
float: left;
width: 100%;
min-height: 28px;
margin-left: 2.127659574%;
*margin-left: 2.0744680846382977%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
.row [class*="col"]:first-child {
margin-left: 0;
.row .col12 {
width: 99.99999998999999%;
*width: 99.94680850063828%;
.row .col11 {
width: 91.489361693%;
*width: 91.4361702036383%;
.row .col10 {
width: 82.97872339599999%;
*width: 82.92553190663828%;
.row .col9 {
width: 74.468085099%;
*width: 74.4148936096383%;
.row .col8 {
width: 65.95744680199999%;
*width: 65.90425531263828%;
.row .col7 {
width: 57.446808505%;
*width: 57.3936170156383%;
.row .col6 {
width: 48.93617020799999%;
*width: 48.88297871863829%;
.row .col5 {
width: 40.425531911%;
*width: 40.3723404216383%;
.row .col4 {
width: 31.914893614%;
*width: 31.8617021246383%;
.row .col3 {
width: 23.404255317%;
*width: 23.3510638276383%;
.row .col2 {
width: 14.89361702%;
*width: 14.8404255306383%;
.row .col1 {
width: 6.382978723%;
*width: 6.329787233638298%;
/* Prefix Extra Space >> 12 Columns
.prefix_1 {
padding-left: 8.333%;
.prefix_2 {
padding-left: 16.667%;
.prefix_3 {
padding-left: 25.0%;
.prefix_4 {
padding-left: 33.333%;
.prefix_5 {
padding-left: 41.667%;
.prefix_6 {
padding-left: 50.0%;
.prefix_7 {
padding-left: 58.333%;
.prefix_8 {
padding-left: 66.667%;
.prefix_9 {
padding-left: 75.0%;
.prefix_10 {
padding-left: 83.333%;
.prefix_11 {
padding-left: 91.667%;
/* Suffix Extra Space >> 12 Columns
.suffix_1 {
padding-right: 8.333%;
.suffix_2 {
padding-right: 16.667%;
.suffix_3 {
padding-right: 25.0%;
.suffix_4 {
padding-right: 33.333%;
.suffix_5 {
padding-right: 41.667%;
.suffix_6 {
padding-right: 50.0%;
.suffix_7 {
padding-right: 58.333%;
.suffix_8 {
padding-right: 66.667%;
.suffix_9 {
padding-right: 75.0%;
.suffix_10 {
padding-right: 83.333%;
.suffix_11 {
padding-right: 91.667%;
/* Push Space >> 12 Columns
.push_1 {
left: 8.333%;
.push_2 {
left: 16.667%;
.push_3 {
left: 25.0%;
.push_4 {
left: 33.333%;
.push_5 {
left: 41.667%;
.push_6 {
left: 50.0%;
.push_7 {
left: 58.333%;
.push_8 {
left: 66.667%;
.push_9 {
left: 75.0%;
.push_10 {
left: 83.333%;
.push_11 {
left: 91.667%;
/* Pull Space >> 12 Columns
.pull_1 {
left: -8.333%;
.pull_2 {
left: -16.667%;
.pull_3 {
left: -25.0%;
.pull_4 {
left: -33.333%;
.pull_5 {
left: -41.667%;
.pull_6 {
left: -50.0%;
.pull_7 {
left: -58.333%;
.pull_8 {
left: -66.667%;
.pull_9 {
left: -75.0%;
.pull_10 {
left: -83.333%;
.pull_11 {
left: -91.667%;
/* Clear Floated Elements
/* http://sonspring.com/journal/clearing-floats */
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-ha ck */
.row:before,
.row:after {
display: table;
line-height: 0;
content: "";
.row:after {
clear: both;
.row {
display: inline-block;
* html .row {
height: 1%;
.row {
display: block;
.row .first {
margin-left: 0; -
Fluid Grid wont work in IE11? Firefox and Chrome is fine. Any ideas?
Need help on this one.
I'm new to fluid grid, and I should say a bit of an amateur at Dreamweaver, but I get by.
I can create fluid grid pages without any problems. Although it will not work with IE11. Chrome and Firefox works fine.
I'm also having the same issue with the Dreamweaver Fluid Grid Templates. I'm confident in saying, I'm doing everything correctly.
Has anyone come across this issue?By "not working" what isn't working exactly?
Display? Media Queries? Layout?
Are you using IE in Compatibility Mode which is essentially like viewing in IE7? Try turning off Compatibility Mode to see if things improve.
Nancy O. -
I simply create a new fluid grid layout.. name and save the default css file ...name and save the default first page and upload to my server.
Everything works fine and I am able to work on the page in dreamweaver cc as a fluid grid layout.
But when i close down dream weaver, (even if i do no more than save the two files and dont edit anything else) and reopen dreamweaver cc i can no longer work in fluid grid layout, dreamweaver doesnt recognise the page (default) as fluid grid layout and i cannot see the little button that toggles fluid grid layout on and off.
I have not edited the css file or the page in anyway.
someone suggested i go to visual aids and enable fluid grid guides .... but this does not exist and there is no longer a fluid grid button next to the live view button.
I really need to get this working, fluid grid layouts are useless if you cant edit them after creating them
Here is the default code
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="/test2.css" rel="stylesheet" type="text/css">
<!--
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
* insert the link to your js here
* remove the link below to the html5shiv
* add the "no-js" class to the html tags at the top
* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="div1" class="fluid">Use Insert Panel for additional Fluid Grid Layout Elements. Note: All Fluid Layout tags must be contained within the "gridContainer" div tag.</div></div>
</body>
</html>
Thanks in advance for any repliesI defined the site, when i imported the site as business catalyst site.
It is there, i have checked all the details are correct and can edit and work on the site as a normal site, I just can't get it to recognise any pages i've created as a fluid grid page after closing and reopening the page.
Yeah I watched the video and that is what im doing, create new page as fluid grid layout, save the css to the root, save the html page to the root, all works fine and i can edit in the fluid grid, the grids there, the little buttons there, the handles to adjust fluid grid propertys there.
But at any point if i close the page and open it again i lose the handles, the fluid grid and the little button and can only edit as a normal dreamweaver page.
I tried to phone adobe support yesterday but gave up after 2 hours of waiting
Cry -
Embed YouTube into Fluid Grid Layout
I'm new to using the new DW Fluid Grid and I've got a layout with two div's side by side. On the Desktop Grid, I'll have one div take over 7 columns and the other 5. In that div, I want to embed a YouTube video but I'm not sure what the embed settings should be so the video can expand and contract like images do. How do I set that up?
This is what I'm using for my embed code:
<iframe src="http://www.youtube.com/embed/XXXXXXX" height: 100%; width="100%" frameborder="0" allowfullscreen></iframe>
Do I need to add a width and height? Or like images, should I use no heights or widths at all? Idea is to have it fit the entire div.Check out this article:
http://webdesignerwall.com/tutorials/css-elastic-videos
Basically... get rid of the height and width attritutes in the iframe, and wrap the video in a new div!
Hope this help,
Julia -
Changing the Fluid Grids Once they have been set up
Hi - I have set up a fluid grid site for a client which has a 10, 20 and 24 grid layout for the three versions.
http://www.discoslough.co.uk
There is a nav bar to the left in each version and the rest of the columns are split evenly.
There's the nav and then a 2 columm layout in the mobile and tablet versions.
There are 3 columns to the right of the nav in the desktop.
At the last minute, the client decided that when a visitor clicks one of his thumbnail pics,
he wants them to see a full size image that goes across the entire width of the page
and is not confined to the width of a single column.
The second problem is similar. The site has been set up so that the mobile version has 2 columns. However, although he is happy to have 2 columns of pics, for example on the index page... He does not want 2 narrow columns of text on, for example, the about us page.
The upshot of all this is that no single layout suits the layout required. Some of his mobile pages
need to be one columm wide and some need to have the existing two columns. Some of the tablet versions are ok with 2 columns, some need just one. Finally, some of the desktop pages are ok with the existing 3 columns, some need to have just one, with an enormous pic filling the entire page.
The website design is at quite an advanced stage and I have already scrapped umpteen versions to get this far.
I have tried creating new pages in various versions with the single column layout. I have tried altering the existing fluid grids on the required pages.
However, it seems that whatever I do alters the layouts on ALL pages not just the ones which need alteration.
Any suggestions how I might get around this problem - I cannot be the only person with, for example, thumbnails which need to expand to full size when clicked.
I am really stuck, running way passed my deadline for completion and I badly could do with some good advice - Many thanks.
Mike StarrI would ditch the fluid grids and work with something a bit more friendly and flexible:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>
<style type="text/css">
/* Desktop Layout */
body {
background-color: #e8e9d7;
#pageWrapper {
width: 100%;
#header {
width: 100%;
background-color: #d4c5ae;
padding: 25px 0;
margin: 0 0 20px 0;
#header h1 {
font-family: "Calisto MT";
font-size: 48px;
font-style: italic;
line-height: 30px;
font-weight: bold;
color: #663333;
text-align: right;
padding: 0 20px 30px 0;
margin: 0;
#header h2 {
color: #666633;
font-family: "Calisto MT";
text-align: right;
padding-top: 0px;
padding: 0 20px 0 0;
margin: 0;
font-style: normal;
font-size: 26px;
line-height: 16px;
font-weight: bold;
#navigation {
float: left;
width: 15%;
#navigation ul {
margin: 0;
padding: 0;
#navigation li {
margin: 0;
padding: 0 0 15px 0;
list-style: none;
#navigation li a {
color: #666633;
text-decoration: none;
display: block;
font-family: Verdana;
font-size: 16px;
padding: 6px 0 6px 15px;
background-color: #c4c5b5;
#navigation li a:hover {
color: #e6e6e6;
text-decoration: none;
font-family: Verdana;
font-size: 16px;
background-color: #998675;
text-align: left;
#content {
float: left;
width: 85%;
overflow: hidden;
#content img {
float: left;
width: 33.3%;
#footer {
clear: both;
#footerLeft, #footerRight {
float: left;
width: 50%;
#footerRight {
text-align: right;
/* screens less than 750px wide */
@media screen and (max-width: 750px) {
#header {
padding: 20px 0;
#header h1 {
font-size: 28px;
padding: 0 20px 15px 0;
#header h2 {
font-size: 18px;
#navigation {
width: 20%;
#navigation li a {
font-size: 14px;
#content {
width: 80%;
#content img {
width: 50%;
/* screens less than 480px wide */
@media screen and (max-width: 480px) {
#header {
padding: 10px 0;
#header h1 {
font-size: 20px;
padding: 0 20px 0 0;
text-align: center;
#header h2 {
font-size: 12px;
text-align: center;
#navigation {
float: none;
width: 100%;
#navigation li {
padding: 0 0 5px 0;
#navigation li a {
text-align: center;
font-size: 12px;
#navigation li a:hover {
text-align: center;
font-size: 12px;
#content {
width: 100%;
#content img {
width: 100%;
#footerLeft, #footerRight {
float: none;
width: 100%;
#footerLeft p, #footerRight p {
text-align: center;
</style>
<body>
<div id="pageWrapper">
<div id="header">
<h1>Andrew Stanley Woodworking Ltd</h1>
<h2>Specialist in bespoke furniture and architectural joinery</h2>
</div>
<!-- end header -->
</div>
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<!-- end nav -->
<div id="content"><img src="http://www.discoslough.co.uk/pics-500-wide-whiteborder/bathpanels.jpg" alt=""/><img src="http://www.discoslough.co.uk/pics-500-wide-whiteborder/conservatory-016.jpg" alt=""/><img src="http://www.discoslough.co.uk/pics-500-wide-whiteborder/desk07.png" alt=""/>
<img src="http://www.discoslough.co.uk/pics-500-wide-whiteborder/kitchen05.png" alt=""/><img src="http://www.discoslough.co.uk/pics-500-wide-whiteborder/newsquare1.png" alt=""/><img src="http://www.discoslough.co.uk/pics-500-wide-whiteborder/winerack.jpg" alt=""/>
</div>
<!-- end content -->
<div id="footer">
<div id="footerLeft"><p>Tel : O2O-8533 6199</p></div><!-- end footerLeft -->
<div id="footerRight"><p>[email protected]</p></div><!-- end footerLeft -->
</div>
<!-- end footer -->
<!-- end pageWrapper -->
</body>
</html> -
Business Catalyst or Cartweaver with fluid grid
I'm considering a dreamweaver ecommerce site for my art business. So far, I'm trying Shopify and love the easy ecommerce software, but HATE the design limitations. It simply makes me claustrophobic.
I've had success mocking up designs with the fluid grid, and incorporating all the cool features I want. However, it's the opposite situation. Ecommerce seems detatched and probably difficult.
Should I look to Business Catalyst or something like Cartweaver? Are either of these compatible with the fluid grid layout? I only want responsive, and refuse to use a template.
I basically want a system that can manage products and orders similar to Shopify, but without the creative limitations.Cartweaver can plug into most any design and it could with some CSS tweaking work within a responsive design. The advantage is it is made to fit into a developers design and not force some pre-conceived template or design on you. The formatting that is used for the store elements is controlled by CSS so you can change and adjust it as needed... alos, while using an Extension id Dremweaver to be installed - it is not dependent on this, we removed all that when we saw where Adobe was going with Server behaviors in Dreamweaver CC - so once placed in your site it's all just regular html / css and php or CF - no special Dreamweaver or non standard tags or comments to get in the way.
That being said, are the cart / store elements 100% responsive design out of the box? No. The search results feature, that displays products based on the user's search has the number of columns and row controls via an entry in the web based admin - so it doesn't auto collapse the way a true responsive design would. and the product details pages display isn't "collapsible" - But this could be simply over written to ignore this setting and user your CSS. So with some tweaking you could be ready to go.
We know that responsive design is becoming a bigger requirement all the time so we do intend on updating the presentation side of Cartweaver to support this, we are working on a couple of other cool things that are ahead of this, but it is definitely on our short list to offer this, but in the mean time, it is something that could be tweaked by the developer with a good knowledge of CSS and a reasonable understanding of php or Cf, depending on what version you choose.
The real advantage is the lack of creative restrictions, as well as not being locked into a proprietary hosted solution, those are advantages to consider, and after the initial learning curve you will find that the presentation side can be bent to your will - whatever that may be :-)
Since I want to respect that this is an Adobe forum, if you any other more specific questions I'll be happy to answer them directly offline. You can pop me an e-mail if you like at
lawrence - at - cartweaver dot com
Lawrence Cramer - *Adobe Community Professional*
http://www.Cartweaver.com
PHP & ColdFusion Shopping Cart for Adobe Dreamweaver
Stay updated:
http://www.facebook.com/cartweaver
http://www.twitter.com/cartweaver
http://blog.cartweaver.com -
I am experimenting with using Fluid Grid and it is very good.
However, as I developed the template I have lost the fluid grid columns on screen, so I can no longer move divs around and have them snap.
At first I thought it was maybe having added margins to some items breaking the size, but I have removed these and the columns have not come back.
Any suggestions?View > Visual Aids > Fluid Grid Layout Guides.
Or click on the "Eye icon" (see screenshot).
Nancy O. -
Fluid Grid Layout- HTML5 video buttons become gray squares Android
I am attempting to use Fluid Grid layouts for a simple smartphone/tablet acessible video page. I am in Dreamweaver CS6 Cloud (updated). The buttons for play and full screen mode are shown as gray squares on my Android phone. It works fine in other browsers (OS:Windows 7, Chrome, FireFox and IE. I have not tested iOS or iPhones). I spent a day trying variations trying to get it to work properly on the Android and finally built a whole new HTML5 (non Fluid Grid) and it works. But that has issues with formatting, where comes in small and has text not filling the page for Android. I am trying to avoid people having to zoom in and out to see the page. The Fluid Grid brings the page in the way that I want it. My guess is that the Fluid Grid boilerplate or the respond.min.js is causing the conflict. As this is a touchy new venture into Adaptive Design I have left these files alone.
Here is the fluid grid (stripped of formatting) http://www.oha-edu.org/Video/v1.html
Here is the HTML5 video page where the buttons show up. http://www.oha-edu.org/Video/2.html
Dumping my Droid Razr Maxx (Android Version 4.04, System version 6.16.211.xt912.Verizon.en.US) is not a solution. I wish to make this work for as many devices as possible. -
Fluid Grid Layout - Beginner's Questions
First, let me explain once again that I can't reply to my own threads because the "Reply" function isn't working in my browsers for some reason. (Thanks for your tips on my other questions, Ben Pleysier and Nancy O.)
Anyway, I want to modify my websites so they work in mobile devices, and I now have my first Fluid Grid Layout up and running. However, there are some bugs I need to work out.
I experimented with two or three fluid grids and just realized that they're very different for some reason. I think I inserted the wrong elements or inserted them in the wrong location.
Does the HTML code below look OK? I understand that everything is supposed to be inside div.gridContainer, which begs the question why are the last two divs (div.fluid and div#div1) OUTSIDE div.gridContainer? Are these extraneous divs that I can delete?
Am I supposed to have a div#page and div data-role="header"?
It looks like all my actual content - including the footer? - should go inside div data-role="content", right? And am I going to have to apply class="fluid Paragraph" to every paragraph in my database tables?
Some of the confusion may be because some of these unfamiliar elements (e.g. "data-role") may be HTML5, which I'm also just learning about.
If anyone could post a link to a web page(s) using Dreamweaver's Fluid Grid Layout, so I can examine the source code, it would be really helpful. Thanks!
<body>
<div class="gridContainer clearfix">
<div data-role="page" id="page">
<div data-role="header">
<?php require_once($BaseINC."/$MyPHP/inc/D/Shared/Body/Header.php"); ?>
</div>
<div data-role="content">CONTENT </div>
<!--This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats--><br class="clearfloat">
<header class="fluid Header">This is the content for Layout Header Tag "Header"</header>
<p class="fluid Paragraph">This is the content for Layout P Tag "Paragraph"</p>
<footer class="fluid Footer"><?php require_once($BaseINC."/$MyPHP/inc/D/Shared/Footer.php"); ?></footer>
</div>
</div>
<!--Are div.fluid/DivBase and div#div1 supposed to be here, outside div.gradContainer? Can I delete them, or do they serve some purpose other than relaying information for getting started?-->
<div class="fluid DivBase">This is the content for Layout Div Tag "DivBase"</div>
<div id="div1" class="fluid">Use Insert Panel for additional Fluid Grid Layout Elements. Note: All Fluid Layout tags must be contained within the "gridContainer" div tag.</div>
<!--I included some files that will be absolutely positioned near the top here.-->
</body>
</html>#1 Success with FGLayouts comes from experience. I built 9 test layouts before I got an acceptable one. A few tips. Build Mobile first because that is what everything else is based on. Then build Tablet & finally Desktop. Do not tamper with code in FluidGrid.css or Boilerplate.css files. Use a separate, external style sheet for your content styles.
#2 Depends on whether or not you want the divs to fall outside your #gridContainer. For example, let's say you want a 100% width header & footer that stretches the entire width of your page in all devices. In that scenario, you would have to move <header> and <footer> tags above and below gridContainer div. Otherwise, everything else needs to be inside the gridContainer in order to respond to the media queries.
#3 APDivs will not work right in FluidGrid Layouts -- or any RWD for that matter -- so don't even go there.
Nancy O. -
Hi!
I am still learning dreamweaver cc fluid grid layout. With the insertion of divs, they always span across the grid, should I leave them like that? They span across 12 columns, I am working in the 1024 x 768 view right now and it seems like I need to have the divs fit the grid. I then insert elements like pictures and such and use positioning like relative to put them where I want.
When I go to smaller views, I adjust the divs to certain columns, even though they usually just begin to fit the grid.
Whenever I look at examples on youtube or adobe tv, the person always lets the divs span across the fluid grid. I just want to make sure I am doing that right.
Thanks.In addition to the excellent help you have access to on this forum, I found a helpful resource to also be courses on Train Simple http://www.trainsimple.com
Matt Pizzzi in particular has a course titled Dreamweaver CC Fluid Grid Layouts.
Since DW CC 2014.1 has removed Design View in Fluid Grid and Matt's course pretty much has you building the site using Design View that could be somewhat more of a challenge; but, it still might be a good learning experience. And, much of what Matt discusses regarding Design View can probably, for page building purposes, carry over to the basic functionalities of Live View. That is, the insert of various elements in the Fluid Grid.
Matt also provided a good background and understanding of what the heck this Fluid Grid, or Responsive Web Design (RWD), is all about. And Matt, just as the great David Powers with his courses on http://www.lynda.com, provides you with excellent reference and resource materials.
Hope it helps. -
Fluid Grid problem dreamweaver cc in IE11
Site made in dreamweaver cc with fluid grid layout. It looks and works fine in Safari en Google CHrome but the fluid grid does not work in IE11. Someone a solution? http://www.fvdc.be
Troubles with the fluid grid not entirely solved.
The solution was that i imported tables in the Fluid Grid and that was not a good idea!
At the moment i am one step ahead but still not satisfied with the result.
The appearance in IE11 looks better, never the less when i reduce the screen size, the layout does not follow all the way.
Even in Fire Fox, Safari and google chrome.
There is even an additional problem.
II do only get one direction right on mobile screens. Vertical or horizontal, but not both.
In adapting on Dreamweaver, when i set-up one scene size right for horizontal and vertical positioning then the layout of the other screen sizes change as well (in the wrong way)
In viewing our site you probably understand the problem better then in the explanation in this writing.
http://www.fvdc.be
Thanks for all the previous advice and we hope to get an answer to this post!
Thanks a head, greets from Frank -
How can I add a jquery effect (parallax bacground effect) in a fluid grid layout? I
How can I add a jquery effect (parallax bacground effect) in a fluid grid layout? I download it from the web (the effect), I use it in a blank html page and all works correctly. Using it in a fluid grid and no images appears and no effect.. why? In the Fluid grid layout I add the .html information inside the container.. and I add the css information in first place.
I download it from: http://www.jqueryrain.com/2012/02/jquery-scrolldeck-parallax-plugin/I've never tried to combine them. But to be honest, I don't think jQuery Parallax is going to work in FGLayouts b/c Parallax backgrounds are not built on a mobile first approach. For best results, Parallax requires a min-width of 960px which isn't mobile friendly.
Nancy O. -
Fluid Grid layout: images distorted on iDevices.
I have built this site in a fluid grid and am finding that if I resize images manually, then they are vertically stretching when viewed on iphones or ipads: www.oconnells.net.nz
The only way I can get around the issue is to save the image at exactly the size to fit the space, but for various reasons I prefer to save them at 640 px wide, which I then resize manually to suit the particular space.
Is this something that can be avoided?
Thanks in advance for advice
JoI think that you will find that the problem occurs in all small screens which precludes the iPad.
The reason is two fold, lack of real estate and hard coding the width and height as in
<img src="images/camp_st.jpg" alt="queenstown shopping mall" width="231" height="178">
<span class="bodytext">
<img src="images/mall-interior.jpg" alt="Queenstown NZ covered shopping centre" width="298" height="178"/>
</span>
<img src="images/beach_st.jpg" alt="shopping in Queenstown NZ" width="225" height="178">
As a side note, you may want to correct these validation errors http://validator.w3.org/check?verbose=1&uri=https%3A%2F%2Fforums.adobe.com%2Fthread%2F1722 245 -
Adding parallax in fluid grid layout
How can I add a jquery effect (parallax bacground effect) in a fluid grid layout? I download it from the web (the effect), I use it in a blank html page and all works correctly. Using it in a fluid grid and no images appears and no effect.. why?
In the Fluid grid layout I add the .html information inside the container.. and I add the css information in first place.I think you've posted in the wrong forum...this is for Audition (Audio) queries.
Sorry!
Maybe you are looking for
-
No video on capture via panasonic deck - NEW
Hi. I rented a panasonic deck HD1400 to get tapes captured in Final Cut Pro 5.04. When trying to capture I get no video on the Mac Book Pro. I use Easy Set-up DVC-PRO HD1080i50 which correspond to tapes. Also the deck is set to HD1080i. I can control
-
Title bar vanishes in gnome when chaning sound preferences
Hi all, A very strange problem occured to me today. In System -> Preferences -> Sound -> Sounds when I toggle "Play alerts and sound effects" the titlebar of all windows are gone! Also keyboard shortcuts don't work anymore at this point. The xsession
-
Performance Problem With Foms9i application
We have developed an application on forms9i and we deployed it on the internet. Everything works very good but we have a great problem with its speed. It's so slow that the users have to wait for about 30 secs between each click!!! This is acceptable
-
WDS 2012 standalone mode command line configuration
To configure WDS on command line I can run this: wdsutil /initialize-server /reminst:E:\RemoteInstall However, I'd like to initialize WDS in standalone from the command line. Any ideas? Thanks!
-
Hello, I'm a little concerned about the battery in my MacBook Air 11-inch. This is the second battery I've had in the computer since I bought it. The first one only last about an hour with a full charge. My AASP replaced it. I'm really only getting a