Is it possible to use HTML5 tags within fluid grid layouts?

Hello,
I want to build my future websites with fluid grid layouts and Dreamweaver CS6 but I don't find any help by searching the internet how I could use the HTML5 tags like "header" "nav" "footer" etc. within the fluid grid layouts automaticly. If I do anything manually it's more error-prone. Or is just the best way to stay with the "normal" div-tags???
Thank you in advance, best regards ... Björn

Those tags are equal to a normal DIV and can be used just the same, they are just not built into CS6.
Mylenium

Similar Messages

Is it possible to use sliced images with fluid grids CS6?

I have 2 sliced images that I want to use in my page. The site has been designed with fluid grids CS6. As soon as the page is made smaller 1 of the images shrinks while the other remains the same size. Is there any way to make this work or is it just not possible using fluid grids?

There's nothing on this page.
http://www.lavishvegas.com/las_vegas_barsx.html
If you want images to rescale to device width, the parent container must be fluid (% width).
The images need a CSS max-width of 100%. DW does this for you when you create a Fluid Grid layout.
Also, the native image must be inserted into the HTML foreground with no stated height or width attributes. If you set the height/width, it won't rescale to viewport width.
Working example:
http://alt-web.com/FluidGrid/Fluid2.html
Nancy O.

Is it possible to use a Script within an action? - it doesn't seem to work...

Is it possible to use a Script within an action? - it doesn't seem to work...
I'm using the 'round any corner' script from SATO Hiroyuki..., and I'd like to apply it to only one anchor point (on multiple boxes)

An Action can call a script from the File>Scripts menu by means of the Add Menu Item Action step. But it will only work for the duration of your Illustrator work session. If you quit AI and then restart it, the Add Menu Item step will be blank. This bug has been reported for FOUR FULL VERSIONS of this sloppy program.
However, if I am correctly understanding your description of what you are trying to automate, an Action will not be able to automate the selection of a particular anchorpoint in multiple paths. You'd have to make the selections all at first. Whether the script would then apply as desired to each path depends on how the script is written.
JET

Use netui tags within javascript function

Is there anyway to use netui tags within a javascript function? I am trying to create a onChange event handler for a netui:select tag that will call a javascript function which will execute a few netui callMethod tags. The problem is that if the netui tags are embedded within a javascript function they are not translated into javascript. Is there some kind of function that I can wrap the embedded netui tags with so that they will be translated into javascript at runtime? Thanks.

Hi,
I am trying to embed JSP code within javascript
t function, so that it can be called when the user
leaves the page. No,you can't.
JSP files are complied on server side while the javascript is the clint side code.
if you really want to call the functio when the user leaves the page, you can call a function runs on the server side to set the session.
regards

Using fluid grid layout in Dreamweaver CC - how do I create a dropdown menu within my main navigation?

I am new to using the responsive fluid grid layouts in Dreamweaver CC - and I am unable to find any information on creating a dropdown menu within my main navigation.
Any ideas?

You'll need to find a menu system that is responsive and mobile friendly for touch screen devices.
If you have a budget to work with, Project Seven's Pop-Menu Magic3 is a commercial extension for DW that works great out of the box.
http://projectseven.com/products/menusystems/pmm3/index.htm
If you don't have a budget, you'll need to create a desktop menu and add a jQuery plugin for mobile devices.
Basic CSS Drop Menu
http://jsfiddle.net/mD4zW/28/
jQuery MeanMenu for mobile/tablet devices
MeanThemes | MeanMenu
This is a working example inside a FluidGrid Layout (resize viewport)
Alt-Web :: Fluid Grid Test
Nancy O.

How do I center an image inside a div tag using fluid grid layout?

where do I find and what do i use the image properties position when using the fluid grid layout. I'd like to center the image in the mobile page versus th left position in the desktop.

This is what my css codes looks like where the image is in the div tag:
#logo_links {
    clear: both;
    float: left;
    margin-left: 0;
    width: 32.2033%;
    display: block;
This is the html code where the image is:
</div>
    <div id="logo_links">
      <div align="center">
        <p><img src="../fluidgrid/images/3_7x2logo.jpg" alt="" width="236" height="110" align="left"></p>
      </div>
    </div>
I'm going to need more detail where to insert the suggested code as I am a newby!
Thanks

CSS height property use in Fluid grid layout

Hi, I'm totally new to fluid grid layout and just got started in it. I have a div tag that has 5px height and I sucessfully applied that and seem fine only on Tablet landscape (1024x768) and Small tablet landscape (800x600), nevertheless it isn't even displaying on Mobile portrait (320x480), Mobile landscape (480x320), Small tablet portrait (600x800) and Tablet portrait (768x1024).
My coding is below
index.html
<!doctype html>




<html class="">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="fluid.grid.layout/boilerplate.css" rel="stylesheet" type="text/css">
<link href="fluid.grid.layout/style.css" rel="stylesheet" type="text/css">


<script src="fluid.grid.layout/respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1"></div>
</div>
</body>
</html>
boilerplate.css
@charset "utf-8";
* HTML5 ✰ Boilerplate
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
* Detailed information about this CSS: h5bp.com/css
* Dreamweaver modifications:
* 1. Commented out selection highlight
* 2. Removed media queries section (we add our own in a separate file)
* ==|== normalize ==========================================================
/* =============================================================================
   HTML5 display definitions
   ========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
/* =============================================================================
   Base
   ========================================================================== */
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
* 2. Force vertical scrollbar in non-IE
* 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 13px; line-height: 1.231; }
body, button, input, select, textarea { font-family: sans-serif; color: #222; }
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate
* Also: hot pink! (or customize the background color to match your design)
/* Dreamweaver: uncomment these if you do want to customize the selection highlight
*::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
*::selection { background: #fe57a1; color: #fff; text-shadow: none; }
/* =============================================================================
   Links
   ========================================================================== */
a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }
/* =============================================================================
   Typography
   ========================================================================== */
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* =============================================================================
   Lists
   ========================================================================== */
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
/* =============================================================================
   Embedded content
   ========================================================================== */
* 1. Improve image quality when scaled in IE7: h5bp.com/d
* 2. Remove the gap between images and borders on image containers: h5bp.com/e
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
* Correct overflow not hidden in IE9
svg:not(:root) { overflow: hidden; }
/* =============================================================================
   Figures
   ========================================================================== */
figure { margin: 0; }
/* =============================================================================
   Forms
   ========================================================================== */
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }
* 1. Correct color not inheriting in IE6/7/8/9
* 2. Correct alignment displayed oddly in IE6/7
legend { border: 0; *margin-left: -7px; padding: 0; }
* 1. Correct font-size not inheriting in all browsers
* 2. Remove margins in FF3/4 S5 Chrome
* 3. Define consistent vertical alignment display in all browsers
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
* 2. Correct inner spacing displayed oddly in IE6/7
button, input { line-height: normal; *overflow: visible; }
* Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
table button, table input { *overflow: auto; }
* 1. Display hand cursor for clickable form elements
* 2. Allow styling of clickable form elements in iOS
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
* Consistent box sizing and appearance
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
* Remove inner padding and border in FF3/4: h5bp.com/l
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
* 1. Remove default vertical scrollbar in IE6/7/8/9
* 2. Allow only vertical resizing
textarea { overflow: auto; vertical-align: top; resize: vertical; }
/* Colors for form validity */
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
/* =============================================================================
   Tables
   ========================================================================== */
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
/* ==|== primary styles =====================================================
   Author:
   ========================================================================== */
/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */
/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }
/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
@media print {
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
style.css
@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:                    4;
          dw-num-cols-tablet:                    8;
          dw-num-cols-desktop:          10;
          dw-gutter-percentage:          25;
          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.5%;
          padding-left: 2.25%;
          padding-right: 2.25%;
#LayoutDiv1 {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          height:5px;
          display: block;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
          width: 97.5%;
          padding-left: 1.25%;
          padding-right: 1.25%;
#LayoutDiv1 {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          height:5px;
          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: 98%;
          max-width: 1232px;
          padding-left: 1%;
          padding-right: 1%;
          margin: auto;
#LayoutDiv1 {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          display: block;
          height:5px;
          background-color:#FBB829;
respond.min.js
/*! Respond.js v1.0.1pre: min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs */
(function(e,h){e.respond={};respond.update=function(){};respond.mediaQueriesSupported=h;if(h){return}var u=e.document,r=u.documentElement,i=[],k=[],p=[],o={},g=30,f=u.getElementsByTagName("head")[0]||r,b=f.getElementsByTagName("link"),d=[],a=function(){var B=b,w=B.length,z=0,y,x,A,v;for(;z<w;z++){y=B[z],x=y.href,A=y.media,v=y.rel&&y.rel.toLowerCase()==="stylesheet";if(!!x&&v&&!o[x]){if(y.styleSheet&&y.styleSheet.rawCssText){m(y.styleSheet.rawCssText,x,A);o[x]=true}else{if(!/^([a-zA-Z]+?:(\/\/)?)/.test(x)||x.replace(RegExp.$1,"").split("/")[0]===e.location.host){d.push({href:x,media:A})}}}}t()},t=function(){if(d.length){var v=d.shift();n(v.href,function(w){m(w,v.href,v.media);o[v.href]=true;t()})}},m=function(G,v,x){var E=G.match(/@media[^\{]+\{([^\{\}]+\{[^\}\{]+\})+/gi),H=E&&E.length||0,v=v.substring(0,v.lastIndexOf("/")),w=function(I){return I.replace(/(url$)['"]?([^\/$'"][^:\)'"]+)['"]?(\))/g,"$1"+v+"$2$3")},y=!H&&x,B=0,A,C,D,z,F;if(v.length){v+="/"}if(y){H=1}for(;B<H;B++){A=0;if(y){C=x;k.push(w(G))}else{C=E[B].match(/@media ([^\{]+)\{([\S\s]+?)$/)&&RegExp.$1;k.push(RegExp.$2&&w(RegExp.$2))}z=C.split(",");F=z.length;for(;A<F;A++){D=z[A];i.push({media:D.match(/(only\s+)?([a-zA-Z]+)(\sand)?/)&&RegExp.$2,rules:k.length-1,minw:D.match(/$min\-width:[\s]*([\s]*[0-9]+)px[\s]*$/)&&parseFloat(RegExp.$1),maxw:D.match(/$max\-width:[\s]*([\s]*[0-9]+)px[\s]*$/)&&parseFloat(RegExp.$1)})}}j()},l,q,j=function(E){var v="clientWidth",x=r[v],D=u.compatMode==="CSS1Compat"&&x||u.body[v]||x,z={},C=u.createDocumentFragment(),B=b[b.length-1],w=(new Date()).getTime();if(E&&l&&w-l<g){clearTimeout(q);q=setTimeout(j,g);return}else{l=w}for(var y in i){var F=i[y];if(!F.minw&&!F.maxw||(!F.minw||F.minw&&D>=F.minw)&&(!F.maxw||F.maxw&&D<=F.maxw)){if(!z[F.media]){z[F.media]=[]}z[F.media].push(k[F.rules])}}for(var y in p){if(p[y]&&p[y].parentNode===f){f.removeChild(p[y])}}for(var y in z){var G=u.createElement("style"),A=z[y].join("\n");G.type="text/css";G.media=y;if(G.styleSheet){G.styleSheet.cssText=A}else{G.appendChild(u.createTextNode(A))}C.appendChild(G);p.push(G)}f.insertBefore(C,B.nextSibling)},n=function(v,x){var w=c();if(!w){return}w.open("GET",v,true);w.onreadystatechange=function(){if(w.readyState!=4||w.status!=200&&w.status!=304){return}x(w.responseText)};if(w.readyState==4){return}w.send(null)},c=(function(){var v=false;try{v=new XMLHttpRequest()}catch(w){v=new ActiveXObject("Microsoft.XMLHTTP")}return function(){return v}})();a();respond.update=a;function s(){j(true)}if(e.addEventListener){e.addEventListener("resize",s,false)}else{if(e.attachEvent){e.attachEvent("onresize",s)}}})(this,(function(f){if(f.matchMedia){return true}var e,i=document,c=i.documentElement,g=c.firstElementChild||c.firstChild,h=!i.body,d=i.body||i.createElement("body"),b=i.createElement("div"),a="only all";b.id="mq-test-1";b.style.cssText="position:absolute;top:-99em";d.appendChild(b);b.innerHTML='_<style media="'+a+'"> #mq-test-1 { width: 9px; }</style>';if(h){c.insertBefore(d,g)}b.removeChild(b.firstChild);e=b.offsetWidth==9;if(h){c.removeChild(d)}else{d.removeChild(b)}return e})(this));
I really do appreciate your efforts to help me solve this problem... Thank you in advance

Height is determined by content. I can't think of a single reason to have a div height of 5px because almost nothing will fit inside that small a space without problems.
As to why it doesn't show up in other devices, you must have put that style into the Tablet CSS code instead of the default Mobile CSS code.
Fluid Grids build up from Mobile (applied to everything) with specific rules for Tablets, then Desktops.
Best advice, use Fluid Grids for layout only. Use a separate CSS file for content styles.
Hope this helps,
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.

Making my header background image scaleable using fluid grid layout

I'm sorry I dont really know how to post a link to this site (its not online just on my laptop) But really all I have is a blank screen I just started trying to build this responsive site (the site I was building wasn't responsive so i had to start over so thats where I'm at. I started a new fluid grid layout in dreamweaver cc I use 24 collums at 100%. I deleted the the div (but not the grid container one) . First is that I'm trying to build a header using the fluid grid layout (my laptop screen is 1920 px wide so I use the full screen because I want my site to take up a users full screen). The issue is when I use a image thats 1920 px width for a header background it test great in the browers meaning it scales correct but when I check it out in the smartphone and tablet preview options within dreamweaver cc the image is chop off. How do I get the image and really the rest of the site to scale and resize correctly not just in full screen for my pc but for tablets smartphones and anyones computer? I'm baffled please help? I hope I'm being clear if not I'll try again I need your help thank you

Try to keep responses in the original thread, it keeps replies from getting confused.
http://forums.adobe.com/thread/1430668?tstart=0

Green highlight when working with Fluid Grid Layout Div tags

What does the green highlight mean when working in Live view of a Fluid Grid Layout using Fluid Grid Layout Div Tags? Sometimes they show up, but sometimes they don't. I think it has something to do with the width setting but I can't figure out what the rule is or what the highlight indicates.
Dreamweaver CS6
Mac OSX 10.8.2
THANK YOU!!

Brian McNay wrote:
the green highlight sometimes disappears when modifying the width property of the div. My question is what does this signify?
If you change the width of a div manually in Code view or in the CSS styles panel, Dreamweaver ceases to treat it as a fluid grid layout div, and the green highlighting disappears.
To be treated as a fluid grid layout div, the width must be adjusted by dragging the handles in Design view. Dreamweaver snaps fluid grid layout divs to the grid that is defined when you first create the page, and it calculates the width and margins to many decimal places. If the width and/or margin doesn't match the grid dimensions, the highlighting disappears, and the div is treated as any other div.
It's not a bug, nor are fluid grid layout divs any different from normal ones. The idea of the grid and the highlighting is to allow you to create a responsive layout according to a hypothetical grid. Once you've created the basic structure, it's best to turn off the visual guides anyway.
Personally, I think that the implementation of fluid grid layouts in Dreamweaver CS6 leaves a lot to be desired. The basic idea is good, but it's difficult to use if you don't have a solid understanding of CSS.

What must i do to get Insert Fluid Grid Layout Div Tag on dreamweaver?

Why an i not able to get the Insert Fluid Grid Layout Div Tag on dreamweaver?
I am using Creative Cloud

Hi Leroy, this post in the Adobe Dreamweaver Team Blog may assist you with the updates to Dreamweaver: http://blogs.adobe.com/dreamweaver/2013/02/updated-fluid-grids-in-dreamweaver.html
Let me know if you still require assistance.

I am using Dreamweaver cc 2014 and after applying css styles to my fluid grid layout I lose the resize, delete, duplicate and move up/ down ability.

I am using Dreamweaver cc 2014 and after applying css styles to my fluid grid layout I lose the resize,delete, duplicate an move up/ down ability.
For this reason I cannot build new pages by copying one page to create another.
I have a third style sheet that I use for the navigation styles and h1 -h6 ect. tags. and I am also using a css drop menu, can one of these be the problem?
The css menu I am using has the following script - I goes at the bottom of the html page. Before the closing body tag,
<script>
$(function () {
$("#nav").tinyNav();
</script>
I am also using the following for image control - I place it towards the top of the fluid
grid style sheet.
    box-sizing: border-box; /* Opera/IE 8+ */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
Can some one please help.

I am using Dreamweaver cc 2014 and after applying css styles to my fluid grid layout I lose the resize,delete, duplicate an move up/ down ability.
This implies there is something broken in your FluidGrid Layout CSS file.   It could be something simple like a missing semi-colon or curly bracket.   Run your code through the W3C validation tools below to check for errors. NOTE: ignore reported errors in boilerplate.css
CSS - http://jigsaw.w3.org/css-validator/
HTML - http://validator.w3.org/
Nancy O.

Creating Adaptive Designs Using Fluid Grid Layouts in Dreamweaver CS6 | Digital Design CS6 | Adobe TV

Adobe Evangelist Greg Rewis shows how to create adaptive designs using Fluid Grid Layouts in Dreamweaver CS6.
http://adobe.ly/Iq7L8z

maybe someone here can answer this. Can I take an existing website and apply the fluid grid layout feature to it? I have one regular website that is not responsive. I've tried copying and pasting into the dreamweaver grid layout, but it doesn't respond as expected. Is this even possible?

Using Fluid Grid layouts | Learn Dreamweaver CS6 | Adobe TV

Designing for multiple screens can be a difficult and time-consuming task. The new Fluid Grid feature in Dreamweaver CS6 gives designers a visual way to control page layout for multiple screen sizes. It also automatically integrates cross-browser consistency through the use of HTML5 boilerplate and the respond.js library.
http://adobe.ly/IUFngo

Although the whole fluid grid layout feature suffers from a terrible implementation, this video explains what is needed to understand, and warns very well for all the strange culprits in this feature.
It takes time for most designers to get used to the idea of fluidity in a visual representation of information, and let structural building blocks flow according to alternating views and rules. Let's hope Adobe Edge Reflow helps us doing that in a better, faster way.

How To Center Fluid Grid Layout Div Tag

Hello I am remaking my webiste and am new to fluid grid layouts. I am trying to center the images you will see in my website into the middle.
I can use pixels to center it but it will not be centered for all screen resolutions. What do I have to change in the css rule defintion to center it all out or simply move it to the side?
WEBISTE: http://auto-republic.com
CODE: http://pastebin.com/LujvaGek
Thanks in advance!

In HTML Code View, line 53 - 56, replace what you have now with this:
<div class="gridContainer clearfix">
     <div id="LayoutDiv1">
     <p>LAYOUTDIV1 CONTENT GOES HERE<p>
     </div>
     <div id="LayoutDiv2">
     <p>LAYOUTDIV2 CONTENT GOES HERE</p>
     <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('wrecker','','images/wreckerservice/wreckerservice2.gif',1)"><img id="wrecker" src="images/wreckerservice/wreckerservice2.gif"></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('facebook','','images/facebook/facebook2.gif',1)"><img id="facebook" src="http://auto-republic.com/images/facebook/facebook1.gif"></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('askaquestion','','images/askusaquestion/askaquestion2.gif',1)"><img id="askaquestion" src="http://auto-republic.com/images/askusaquestion/askaquestion1.gif"></a>
     </div>
Nancy O.

Is it possible to use HTML5 tags within fluid grid layouts?

Similar Messages

Maybe you are looking for