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

Similar Messages

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?

I'm designing my first website using Fluid Grid Layouts. CSS question

I'm designing my first website using CS6 and Fluid Grid Layouts so I need a lot of help. I realize CS6 creates something called a boilerplate css file. However, in addition to that file, do I have to create an individual external style sheet for my desktop, ipad, and smart phone pages (3 separate style sheets) or should I have only one external style sheet for everything?
Or this is there another recommended way to use Fluid Grid Layouts?

FluidGrid Layouts creates a boilerplate.css file, a respond.js file & a Fluid.css file for you -- you name it whatever you like. I like to call mine Fluid.css so I remember what it is.
Fluid.css contains mobile first -- upon which all others are based. Inside, CSS Media queries, you'll find code for tablet and later on desktop. So one stylesheet generated by DW covers all 3.
TIPS:
FluidGrids are very temperamental. Do not tamper with boilerplate.css or Fluid.css files. Instead create a separate external style sheet for your typography & other custom content styles.
Build mobile first, then tablet and finally desktop.
Keep your designs simple and uncluttered.
Don't worry about content until you get the layout perfected.
Have fun with it . You'll probably have to start over a few times before you get what you want.
Nancy O.

How can i insert a background image in a fluide grid DW CC

I want a background image for a fluid grill website and cannot seem to find the "how to". Any help would be greatly appreciated.
Regards
Animal86

It's the same as adding a background to any Layout. Use CSS & the background property on your body selector.
body {
background: url(your_BG.jpg)
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

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.

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.

Making photo galleries fit screen sizes in fluid grid layout

Is it possible to have photo gallery images fit within the width of a device (such as smart phone) when a fluid grid design is being used?

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

Using Fluid Grid layouts | Digital Design 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/SgbtoZ

Is there any written help on this subject because the cost of downloading these videos is too great. If I view them all it will cost me £5 a month extra in bandwidth charges as a minimum just to view help videos. Far too expensive for a charitable trust.

How to make header background image scaleable on all devices

I have a image that is 1920 by 700 px (1920 being the width of my laptops screen full size) that I want to use as a background for a header that is 1920 by 700 px. When I preview the full screen in chrome browers it scales great but when I check the smartshone and tablet view in dreamweaver cc the background is chop off. I need to use it as a background because I want to place a custom navigation menu on top of it. So why is it testing great at full screen and scaleing to any size but when I check the smartphone or tablet view in dreamweaver it looks crazy? Please someone!

If you're interested in building responsive web sites, read this first:
Introduction to CSS Media Queries
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-que ries.html
To jump start your responsive web project, you can use one of the freely available Responsive Frameworks below: Some people feel these are actually better than FluidGrid Layouts.
Foundation Zurb
http://foundation.zurb.com/templates.php
Skeleton Boilerplate
http://www.getskeleton.com/
Initializr (HTML5 Boilerplate, Responsive or Bootstrap)
http://www.initializr.com/
DMX Zone's Bootstrap * free extension for DW *
http://www.dmxzone.com/go/21759/dmxzone-bootstrap/

Fluid Grid Layouts, Dealing with Z-Index

Hi
I'm currently designing a website that is using fluid grid layouts in order to make it responsive for the users of the website. I'm currently designing it with div's working from the top to the bottom. I currently have a header div, a menubar div, and a mainpicture div beneath that. I'm trying to make it so that the menu bar appears above the others two divs however. I have it so that there is a shadow around the menu bar div. It appears above the header div, but beneath the main picture div so it looks funny. I've tried making the z-index of the menubar div greater than that of the main picture div but that has lead to no positive results. Is there a way to make it so i can have a div appear above another one in fluid grid layouts?
Jay Honnold
HTML
CSS
<!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="boilerplate.css" rel="stylesheet" type="text/css">
<link href="FluidLayout.css" rel="stylesheet" type="text/css">


<script src="respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="Header" class="shadowbox">
            <img src="My Website_files/flashwholesalerlogo.png" width="294px" height="42px" style="float: left; margin-top: 10px;">
    <p style="margin: 19px 5px 0px 0px; float: right; font-family: Arial; font-decoration: none; color: #616171; font-size: 24px;">800-969-2949</p>
    <img src="My Website_files/phonelogo.png" width="42px" height="42px" style="float: right; margin-top: 10px; margin-right: 10px">
</div>
<div id="MenuBar" class="shadowbox">
     <ul class="semiopaquemenu">
      <li><a href="./My Website.htm">Home</a></li>
      <li><a href="http://www.dynamicdrive.com/style/">Products</a></li>
      <li><a href="http://www.dynamicdrive.com/forums/">Services</a></li>
      <li><a href="http://tools.dynamicdrive.com">About Us</a></li>
      <li><a href="http://www.javascriptkit.com/">Customizing</a></li>
      <li><a href="http://www.cssdrive.com">Distributors</a></li>
    </ul>
</div>
<div id="ThreeReasonsContainer">
<div id="ThreeReasons">
            <img src="My Website_files/badge.png">
</div>
<div id="ThreeReasons2">
<img src="My Website_files/badge.png">
</div>
<div id="ThreeReasons3">
<img src="My Website_files/badge.png">
</div>
</div>
</div>
</body>
</html>
@charset "utf-8";
@import url("SemiopaquemenuFluid.css");
/* 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:                    5;
          dw-num-cols-tablet:                    8;
          dw-num-cols-desktop:          12;
          dw-gutter-percentage:          15;
          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: 88.626%;
          padding-left: 1.1869%;
          padding-right: 1.1869%;
#LayoutDiv1 {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          display: block;
#Header {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          display: block;
          height: 100px;
          /* IE10 Consumer Preview */
          background-image: -ms-linear-gradient(top, #FFFFFF 0%, #CAE4BF 100%);
          /* Mozilla Firefox */
          background-image: -moz-linear-gradient(top, #FFFFFF 0%, #CAE4BF 100%);
          /* Opera */
          background-image: -o-linear-gradient(top, #FFFFFF 0%, #CAE4BF 100%);
          /* Webkit (Safari/Chrome 10) */
          background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #CAE4BF));
          /* Webkit (Chrome 11+) */
          background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #CAE4BF 100%);
          /* W3C Markup, IE10 Release Preview */
          background-image: linear-gradient(to bottom, #FFFFFF 0%, #CAE4BF 100%);
#MenuBar {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          display: block;
#MainImage {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          display: block;
#ThreeReasons {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          display: block;
#ThreeReasons2 {
          clear: none;
          float: left;
          margin-left: 2.6785%;
          width: 100%;
          display: block;
#ThreeReasons3 {
          clear: none;
          float: left;
          margin-left: 2.6785%;
          width: 100%;
          display: block;
#ThreeReasonsContainer {
          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.4836%;
          padding-left: 0.7581%;
          padding-right: 0.7581%;
#LayoutDiv1 {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          display: block;
#Header {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          display: block;
          height: 100px;
          /* IE10 Consumer Preview */
          background-image: -ms-linear-gradient(top, #FFFFFF 0%, #CAE4BF 100%);
          /* Mozilla Firefox */
          background-image: -moz-linear-gradient(top, #FFFFFF 0%, #CAE4BF 100%);
          /* Opera */
          background-image: -o-linear-gradient(top, #FFFFFF 0%, #CAE4BF 100%);
          /* Webkit (Safari/Chrome 10) */
          background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #CAE4BF));
          /* Webkit (Chrome 11+) */
          background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #CAE4BF 100%);
          /* W3C Markup, IE10 Release Preview */
          background-image: linear-gradient(to bottom, #FFFFFF 0%, #CAE4BF 100%);
#MenuBar {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          display: block;
#MainImage {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          display: block;
#ThreeReasons {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          display: block;
#ThreeReasons2 {
          clear: none;
          float: left;
          margin-left: 1.6574%;
          width: 100%;
          display: block;
#ThreeReasons3 {
          clear: none;
          float: left;
          margin-left: 1.6574%;
          width: 100%;
          display: block;
#ThreeReasonsContainer {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          display: block;
/* Desktop Layout: 769px to a max of 1000px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
          width: 89.0217%;
          max-width: 1000px;
          padding-left: 0.4891%;
          padding-right: 0.4891%;
          margin: auto;
#Header {
          clear: both;
          float: left;
          margin-left: 0;
          width: 96%;
          margin: 0px 2% 0px 2%;
          display: block;
          height: 62px;
          /* IE10 Consumer Preview */
          background-image: -ms-linear-gradient(top, #FFFFFF 0%, #CAE4BF 100%);
          /* Mozilla Firefox */
          background-image: -moz-linear-gradient(top, #FFFFFF 0%, #CAE4BF 100%);
          /* Opera */
          background-image: -o-linear-gradient(top, #FFFFFF 0%, #CAE4BF 100%);
          /* Webkit (Safari/Chrome 10) */
          background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #CAE4BF));
          /* Webkit (Chrome 11+) */
          background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #CAE4BF 100%);
          /* W3C Markup, IE10 Release Preview */
          background-image: linear-gradient(to bottom, #FFFFFF 0%, #CAE4BF 100%);
#MenuBar {
          clear: both;
          float: left;
          margin-left: 0;
          height: 63px;
          width: 100%;
          display: block;
          /* IE10 Consumer Preview */
          background-image: -ms-linear-gradient(top, #87C872 0%, #72B35A 100%);
          /* Mozilla Firefox */
          background-image: -moz-linear-gradient(top, #87C872 0%, #72B35A 100%);
          /* Opera */
          background-image: -o-linear-gradient(top, #87C872 0%, #72B35A 100%);
          /* Webkit (Safari/Chrome 10) */
          background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #87C872), color-stop(1, #72B35A));
          /* Webkit (Chrome 11+) */
          background-image: -webkit-linear-gradient(top, #87C872 0%, #72B35A 100%);
          /* W3C Markup, IE10 Release Preview */
          background-image: linear-gradient(to bottom, #87C872 0%, #72B35A 100%);
          z-index: 3;
#MainImage {
          clear: both;
          float: left;
          margin-left: 0;
          width: 100%;
          display: block;
#ThreeReasons {
          clear: both;
          float: left;
          margin-left: 0;
          width: 29.3%;
          display: block;
          margin: 0px 2% 0px 2%;
#ThreeReasons2 {
          clear: none;
          float: left;
          margin-left: 1.0989%;
          width: 100%;
          width: 29.3%;
          display: block;
          margin: 0px 2% 0px 2%;
#ThreeReasons3 {
          clear: none;
          float: left;
          margin-left: 1.0989%;
          width: 100%;
          width: 29.3%;
          display: block;
          margin: 0px 2% 0px 2%;
#ThreeReasonsContainer {
          clear: both;
          float: left;
          margin-left: 0;
          width: 96%;
          display: block;
          margin: 0px 2% 0px 2%;
          padding: 10px 0px 10px 0px;
          /* IE10 Consumer Preview */
          background-image: -ms-linear-gradient(top, #CAE4BF 0%, #FFFFFF 100%);
          /* Mozilla Firefox */
          background-image: -moz-linear-gradient(top, #CAE4BF 0%, #FFFFFF 100%);
          /* Opera */
          background-image: -o-linear-gradient(top, #CAE4BF 0%, #FFFFFF 100%);
          /* Webkit (Safari/Chrome 10) */
          background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #CAE4BF), color-stop(1, #FFFFFF));
          /* Webkit (Chrome 11+) */
          background-image: -webkit-linear-gradient(top, #CAE4BF 0%, #FFFFFF 100%);
          /* W3C Markup, IE10 Release Preview */
          background-image: linear-gradient(to bottom, #CAE4BF 0%, #FFFFFF 100%);
          z-index: 2;
Picture:

Try
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body {
    width: 1000px;
    margin: auto;
    background: #616161;
.header {
    height: 70px;
    width: 900px;
    margin: auto;
    background: #D3E8CA;
.nav {
    height: 90px;
    background: #7CBD66;
-moz-box-shadow:    0px 0px 5px 3px #333;
-webkit-box-shadow: 0px 0px 5px 3px #333;
box-shadow:         0px 0px 5px 3px #333;
    position: relative;
    z-index: 99;
.content {
    height: 70px;
    width: 900px;
    margin: auto;
    background: #D3E8CA;
</style>
</head>
<body>
<div class="header"></div>
<div class="nav"></div>
<div class="content"></div>
</body>
</html>

Fluid grid layouts do not work in IE 7/8

Hello,
I just created a simple fluid grid layout with Dreamweaver CS6, but there is a problem in Internet Explorer.
IE 9 shows it right.
When I start IE 9, I press F12 to get to the developer panel. When I switch to IE 7 / 8, the layout crashes. There are no background colors and text styles anymore.
Later I will upload some screenshots.
All other browser work fine.
Where is the problem here?

When I resize layout in Firefox, the background colors disappear in mobile portrait, mobile landscape, and tablet portrait.
Reason: You added styles to your FluidGrid Desktop but not mobile & tablet.
In order for FluidGridLayouts to work, you must build your mobile styles first because everything else is based on that.
I find it's much safer to use a separate style sheet for content. When you start adding stuff to FluidGridLayout.css, things can get screwed up in a hurry.
CS6 Fluid Grid Layouts (6 min video)
http://tv.adobe.com/watch/digital-design-cs6/creating-adaptive-designs-using-fluid-grid-la youts-in-dreamweaver-cs6/
CS6 Fluid Grid layouts (17 min video)
http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
Step-by-Step tutorial -- Building Fluid Grid Layouts in DW CS6
http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs6.html
Nancy O.

Dreamweaver CS6 Fluid Grid Layout

I fear there may not be a solution to this issue! I have placed several hotspots on an image in a Fluid Grid Layout div in DW CS6 and the problem is quite straightforward. Whilst the "image" reduces perfectly when viewed in Tablet and Smartphone screens the "hotspots" remain in the same position they were at in the Desktop view! The result is the same irrespective of which view you set the hotspots in. Is there a solution to this problem or is it insurmountable?

OK. Let's just paste the script into your HTML page and see if that works.
Open your page in code view.
Replace this:

<script src="fancybox/maphighlight.js"></script>

With all of this:

<script>
// map highlight JavaScript Document
(function(F){var B,C,I,L,K,H,E,G,A,J;B=document.namespaces;has_canvas=!!document.createElement("canvas").getContext;if(!(has_canvas||B)){F.fn.maphilight=function(){return this};return }if(has_canvas){E=function(M){return Math.max(0,Math.min(parseInt(M,16),255))};G=function(M,N){return"rgba("+E(M.substr(0,2))+","+E(M.substr(2,2))+","+E(M.substr(4,2))+","+N+")"};C=function(M){var N=F('<canvas style="width:'+M.width+"px;height:"+M.height+'px;"></canvas>').get(0);N.getContext("2d").clearRect(0,0,N.width,N.height);return N};I=function(P,M,S,O,N){var R,Q=P.getContext("2d");Q.beginPath();if(M=="rect"){Q.rect(S[0],S[1],S[2]-S[0],S[3]-S[1])}else{if(M=="poly"){Q.moveTo(S[0],S[1]);for(R=2;R<S.length;R+=2){Q.lineTo(S[R],S[R+1])}}else{if(M=="circ"){Q.arc(S[0],S[1],S[2],0,Math.PI*2,false)}}}Q.closePath();if(O.fill){Q.fillStyle=G(O.fillColor,O.fillOpacity);Q.fill()}if(O.stroke){Q.strokeStyle=G(O.strokeColor,O.strokeOpacity);Q.lineWidth=O.strokeWidth;Q.stroke()}if(O.fade){F(P).css("opacity",0).animate({opacity:1},100)}};L=function(M){M.getContext("2d").clearRect(0,0,M.width,M.height)}}else{C=function(M){return F('<var style="zoom:1;overflow:hidden;display:block;width:'+M.width+"px;height:"+M.height+'px;"></var>').get(0)};I=function(N,Q,R,U,M){var S,T,O,P;S='<v:fill color="#'+U.fillColor+'" opacity="'+(U.fill?U.fillOpacity:0)+'" />';T=(U.stroke?'strokeweight="'+U.strokeWidth+'" stroked="t" strokecolor="#'+U.strokeColor+'"':'stroked="f"');O='<v:stroke opacity="'+U.strokeOpacity+'"/>';if(Q=="rect"){P=F('<v:rect name="'+M+'" filled="t" '+T+' style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:'+R[0]+"px;top:"+R[1]+"px;width:"+(R[2]-R[0])+"px;height:"+(R[3]-R[1])+'px;"></v:rect>')}else{if(Q=="poly"){P=F('<v:shape name="'+M+'" filled="t" '+T+' coordorigin="0,0" coordsize="'+N.width+","+N.height+'" path="m '+R[0]+","+R[1]+" l "+R.join(",")+' x e" style="zoom:1;margin:0;padding:0;display:block;position:absolute;top:0px;left:0px;width:'+N.width+"px;height:"+N.height+'px;"></v:shape>')}else{if(Q=="circ"){P=F('<v:oval name="'+M+'" filled="t" '+T+' style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:'+(R[0]-R[2])+"px;top:"+(R[1]-R[2])+"px;width:"+(R[2]*2)+"px;height:"+(R[2]*2)+'px;"></v:oval>')}}}P.get(0).innerHTML=S+O;F(N).append(P)};L=function(M){F(M).find("[name=highlighted]").remove()}}K=function(N){var M,O=N.getAttribute("coords").split(",");for(M=0;M<O.length;M++){O[M]=parseFloat(O[M])}return[N.getAttribute("shape").toLowerCase().substr(0,4),O]};J=function(O,N){var M=F(O);return F.extend({},N,F.metadata?M.metadata():false,M.data("maphilight"))};A=function(M){if(!M.complete){return false}if(typeof M.naturalWidth!="undefined"&&M.naturalWidth==0){return false}return true};H={position:"absolute",left:0,top:0,padding:0,border:0};var D=false;F.fn.maphilight=function(O){O=F.extend({},F.fn.maphilight.defaults,O);if(!has_canvas&&F.browser.msie&&!D){document.namespaces.add("v","urn:schemas-microsoft-com:vml");var N=document.createStyleSheet();var M=["shape","rect","oval","circ","fill","stroke","imagedata","group","textbox"];F.each(M,function(){N.addRule("v\\:"+this,"behavior: url(#default#VML); antialias:true")});D=true}return this.each(function(){var U,R,Y,Q,T,V,X,S,W;U=F(this);if(!A(this)){return window.setTimeout(function(){U.maphilight(O)},200)}Y=F.extend({},O,F.metadata?U.metadata():false,U.data("maphilight"));W=U.get(0).getAttribute("usemap");Q=F('map[name="'+W.substr(1)+'"]');if(!(U.is("img")&&W&&Q.size()>0)){return }if(U.hasClass("maphilighted")){var P=U.parent();U.insertBefore(P);P.remove();F(Q).unbind(".maphilight").find("area[coords]").unbind(".maphilight")}R=F("<div></div>").css({display:"block",background:'url("'+this.src+'")',position:"relative",padding:0,width:this.width,height:this.height});if(Y.wrapClass){if(Y.wrapClass===true){R.addClass(F(this).attr("class"))}else{R.addClass(Y.wrapClass)}}U.before(R).css("opacity",0).css(H).remove();if(F.browser.msie){U.css("filter","Alpha(opacity=0)")}R.append(U);T=C(this);F(T).css(H);T.height=this.height;T.width=this.width;X=function(c){var a,b;b=J(this,Y);if(!b.neverOn&&!b.alwaysOn){a=K(this);I(T,a[0],a[1],b,"highlighted");if(b.groupBy){var Z;if(/^[a-zA-Z][-a-zA-Z]+$/.test(b.groupBy)){Z=Q.find("area["+b.groupBy+'="'+F(this).attr(b.groupBy)+'"]')}else{Z=Q.find(b.groupBy)}var d=this;Z.each(function(){if(this!=d){var f=J(this,Y);if(!f.neverOn&&!f.alwaysOn){var e=K(this);I(T,e[0],e[1],f,"highlighted")}}})}if(!has_canvas){F(T).append("<v:rect></v:rect>")}}};F(Q).bind("alwaysOn.maphilight",function(){if(V){L(V)}if(!has_canvas){F(T).empty()}F(Q).find("area[coords]").each(function(){var Z,a;a=J(this,Y);if(a.alwaysOn){if(!V&&has_canvas){V=C(U.get());F(V).css(H);V.width=U.width();V.height=U.height();U.before(V)}a.fade=a.alwaysOnFade;Z=K(this);if(has_canvas){I(V,Z[0],Z[1],a,"")}else{I(T,Z[0],Z[1],a,"")}}})});F(Q).trigger("alwaysOn.maphilight").find("area[coords]").bind("mouseover.maphilight",X).bind("mouseout.maphilight",function(Z){L(T)});U.before(T);U.addClass("maphilighted")})};F.fn.maphilight.defaults={fill:true,fillColor:"00CC00",fillOpacity:0.3,stroke:true,strokeColor:"99FF33",strokeOpacity:0.5,strokeWidth:2,fade:true,alwaysOn:false,neverOn:false,groupBy:false,wrapClass:true}})(jQuery);
</script>

Save. Upload to server.
Nancy O.

Trouble styling across device views ( Mobile, Tablet, Desktop) in fluid grid layout.

Hi pros,
I’m having a problem in Dreamweaver CC laying out and styling my website using the fluid grid layout. For the record, I have not touched the boilerplate.css or JS file and have been using my own.css file to place all my .css in. I’ve managed to get some of the content in little by little but it looks nothing like my mock up. Since I’m new to Dreamweaver and coding in general, I’ve been starting my design in the desktop view. However, when I switch to tablet or mobile view and move something around, it completely moves it when I got back to the desktop view. Also, when I put in on live view or view it in a browser, I get two different looks all together. I try to make sure that my .css file is selected and under media I tried selecting the predefined media sizes and then under selector, there is usually 3 of each tag (one for each view I’m guessing), I select the tag associated with that view and change the properties from there. That hasn’t worked because when I go to live view or view in the browser, it looks completely off or it will screw with the other views. L
So here are my specific questions:
How do I style my elements specifically in each view WITHOUT messing up the desktop, or the other views? Simply clicking on a view using the icons on the bottom and styling has not worked.
Why is my live view so different from my browser view? I’m using the presets given in Dreamweaver for the desktop. When I view, say the logo and navigation in live view, everything is aligned but when I switch to my browser (chrome) it’s all crooked.
Should I be using % throughout all my properties (width, height, margin, padding, positioning)? Currently I have most of my div sized using % but some margins and other properties using px. Will that affect anything?
Can someone recommend a good tutorial? Everything that I seen either covers the basics that I already know,( adding/moving divs, switch views) but when it comes to the .css styling, they are adding a style sheet from somewhere without showing you how to do it from scratch.
Should I design the page in a non- fixed layout and then import the .css style sheet from there? If so, how do I do that without messing with the boilerplate.css file.
I’m taking a course in graphic and web design and we went over this very quickly and was given a lot of the material, however our final project (a full website with 5 pages) must be responsive and built in Dreamweaver. Any advice is greatly appreciated!

Making an external style sheet.
Go to File > New > Blank page > CSS.
Hit create button.
Add some style rules to your new style sheet and save it.
Link your HTML pages to your new style sheet using the directions below.
Dreamweaver, Linking HTML to External Style Sheets
CS6 Fluid Grid layouts (17 min video)
http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
Creative Cloud 12.2 Enhancements to Fluid Grid Layouts
http://blogs.adobe.com/dreamweaver/2013/02/updated-fluid-grids-in-dreamweaver.html
Step-by-Step tutorial -- Building Fluid Grid Layouts in DW CS6
http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs6.html
Nancy O.

Fluid grid layouts gutter to 0%

With Dreamweaver CC Fluid Grid Layouts, is there a way to set gutters to 0% so that the divs will align left and right, no spacing? I am trying to create a masonry grid image gallery. Thanks, Susan

Thank you for replying Nancy. I have created several website in DW but never using Fluid Grids Layouts. I know HTML and CSS, so if there is a way to have this work successfully, I might be able to implement it, with a push in the right direction.
Kind regards,
Susan

Making my header background image scaleable using fluid grid layout

Similar Messages

Maybe you are looking for