CS6, Fluid Grid Layouts, and Spry Menu - sizing issues

Hi. I am a full-fledged nubie to Dreamweaver, so please forgive my ignorance. But I really need to build a new site, and I really like DW so far (much better than what I was using).
I am building a site with fluid grid layouts so it is properly sized across all decices. I have inserted a spry horizontal menu as my primary navigation. I got the menu to look like I want it as far as formatting goes.
But when I view the page live and change the size of my browser, the menu wraps around to the next row, even with fairly large browser windows.
Can anyone tell me how to scale the spry menu bar the same as an image does in a fluid grid layout?
Thanks,
Steven

Don't use Spry Menus. #1 they're not Responsive. #2 They don't work all that well on Touch Screen devices. #3 Adobe abandoned the Spry framework last year. Is that enough to convince you? See links below for alternatives.
Pop-Menu Magic2 by PVII (commercial DW Extension)
http://www.projectseven.com/products/menusystems/pmm2/index.htm
jQuery Superfish
http://users.tpg.com.au/j_birch/plugins/superfish/
jQuery Mega Menus http://www.javascriptkit.com/script/script2/jkmegamenu.shtml
CSS3 Dropdown Menus
http://www.red-team-design.com/css3-dropdown-menu
10 Responsive Menus
http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/
Nancy O.

Similar Messages

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.

Need help with Fluid Grid Layout and variable column balance.

I'm using the fluid grid layout. I have multiple columns that are actually fluid grid layout columns done by Dreamweaver. I'd like them to extend as high as each other (all to the maximum height of each other) within the same section. An added catch is that in the desktop layout, I have three side by side under one that takes the whole width of the page. On tablet size, it's 2x2 in a square grid. On mobile, they're vertically stacked. I'm trying to get it so that background colour and/or borders looks decent and is fully balanced, no matter which layout is hit with the fluid layout. The columns reflow, no problem. But the height of any background and/or border is variable.
Any help on fixing this?
Example at: https://music2help.thoughtburst.net/
The example doesn't have borders or colours, as it looked silly unbalanced. The music2help.css is the only one I'm modifying manually.
Love the fluid grid layout, but I need a way to make it behave decently with backgrounds/borders. Any help would be hugely appreciated!
Thanks!
mark->

I tried the solution Nancy posted. It altered things, but doesn't seem to do the trick.
Just some quick background. I did HTML from 1994 through about five years ago by hand in vi on *nix systems. I learned HTML through 4.01, and never bothered with XHTML at all. I learned CSS through most of CSS2. The CSS3 and HTML5 stuff is all new to me, but it can't be that hard. I'm not exactly a novice in JS (I've done a fair bit of AJAX programming), but it's not even close to my primary language (I'm a Perl guy).
I'm "stuck on" wanting to use Fluid Grid Layouts. It's billed as one of the selling points of DW CS6, and I really like the concept and results. I just want the results embellished a little, namely with sensible identical heights on grid containers set in the same row, so that you can apply background colours, dropshadows, and borders. That's really all I want to do that it doesn't already do.
I have a test page at: http://music2help.thoughtburst.net/ that you can try with your Quick Columns. I'd be interested to know if you can get it to work.
Here's the catch, though... Resize the browser, shrinking it inwards. (I suggest Firefox, as Chrome only shrinks so far, and you won't get to Mobile width.) As you can see, on a Tablet, one of the columns that should be equal height actually moves up a row and should be equal height with the row that, on a desktop, would take the entire width of the page area. So that's like a 4-up output in printing terms. At Mobile size, the entire thing is vertical, so none of the columns should be resized.
If your product works and can accomodate these conditions, I think I would be interested in spending the $35 it costs.
Let me know? Thanks!
EDIT: Changed URL to be non-SSL. The server has multiple vhosts on it, and I keep forgetting that I don't have a cert on this new one. Sorry about that. You can just add anything to one of the the three middle columns, if you're pulling it down to test.

Cs6 fluid grid layout wide-screen resolution issue

Hi all, I've done some poking around but have not found anything that answers this question - if I missed something please pass me the link!
So I'm doing a new site in cs6 with fluid grid layouts. It's fine in terms of screen sizes, that is, small medium large, but different resolutions make the content appear differently. Specifically on desktop size screens with wide-screen resolutions (eg 1600X1200) the content is squeezed up towards the top of the page. The background image is fine on all resolutions - fills the screen - but the content on top changes according to the resolution. On my screen (1600X900) there's a nice distribution of content vertically. Is there any way to make it so that the content adjusts for resolution, not just size? Thanks in advance.

What I'd like is for the widescreen view not to change the vertical distribution. That is, on my screen the content fills about 3/4 of the screen, which looks fine. On widescreen resolution, it barely covers 2/3 and it looks top-heavy - users I've asked with widescreen resolutions have said "it looks squished towards the top, why don't you move it down?". I guess I don't understand, if height as well as width is determined in percentage, why this happens (that lack of understanding could reveal my fundamental lack of understanding of aspect ratio/mathematics in general ).
I suppose I could give a bigger margin at the top to move the content down the page in all cases, but on my screen, not widescreen, that's not ideal. And I'm hoping there's a way to adjust for widescreen without affecting all resolutions.

CS6 Fluid Grid Layouts - opening CSSTransitions panel crashes program

Hi there, I'm on my second web page and this old problem has come up again.
I've asked about this before but I'm afraid I never got to the end of it, I just worked around it.
After I open the transitions panel, I then press the + button, then it crashes. Here are the error messages:
Does CSS Transitions work in Fluid Grid Layout? Thank you.

This aging mind gets very easily confused, so please bear with me.
In reply #3, I gave you an answer to you not being able to find the file to delete as in reply #2. Ticking the box next to 'Hidden Items' will allow you to find that file. By default it would be hidden. Ticking the box will not delete the cache file. For that to happen, you need to follow the process as set out in the link supplied in reply #1.

Footer text-alignment in fluid grid layout and another color in white space, not the body

I'm working in a fluit grid layout. Everythings works almost perfekt. Accept for de alignment in Opera mini. Mini works not with %. So it must be padding, line-height and something else. But then the footer does not stick.
In Opera mini
If i want the footer to stick to for example the bottom. I'm may not use padding in de footer.
De <p> i used for alignment in from the text. Now my footer must have a alignment in the middle of the footer (center). With padding in footer, it wil work, but then my footer will not stick to the bottom anymore.
and i have also another question, about the white spaces in de fluid grid. I don't want to give the header, body, footer another color. But that outside of my website.
With a normal website you give the html and the body grey and the content white. But if i do this with the fluid grid. The content because grey. Is there also a code for.
This is what it must be. It is a example, not for real. But i really want to know the code for it.

I found the wright code for the footer. Thanks a lot. I'm happy.
I'm also searching for a code for max-height. For example one page i have less text, so the page is not filled to the bottom. I want for designing reasons this. So the page is always fitt from header to footer.
It must not scrolled. Just complete for the desktop-computer and laptop. Is there a code for. Because there is already internet-tv and that are big-screens. It must be for all the browser also ie7, ie 6, opera, safari, chrome and more.

Problem with layout and spry menu in IE

My navigation bar looks fine in Foxfire and Safari, but is all messed up in IE.
here is a link to the page:
http://vacationlandphotography.com/tls/header.html
here is my code:
<html>
<head>
<title>The Landing School</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

</style>

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
</head>
<body style="margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<div id="wrapper">

<div id="Table_01">
    <div id="header-01">
        <img src="images/header_01.gif" width="1000" height="102" alt=""> </div>
    <div id="header-02">
      <ul id="MenuBar1" class="MenuBarHorizontal">
        <li><a class="MenuBarItemSubmenu" href="#">Wooden Boat Building</a>
            <ul>
              <li><a href="#">Overview </a></li>
              <li><a href="#">Career Options</a></li>
              <li><a href="#">Alumni Profile</a></li>
              <li><a href="#">Syllabus</a></li>
              <li><a href="#">Admission</a></li>
          </ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">Composite Boat Building</a>
          <ul>
            <li><a href="#">Overview</a></li>
            <li><a href="#">Career Options</a></li>
            <li><a href="#">Alumni Profile</a></li>
            <li><a href="#">Syllabus</a></li>
            <li><a href="#">Admission</a></li>
          </ul>
        </li>
        <li><a class="MenuBarItemSubmenu MenuBarItemSubmenu" href="#">Yacht Design</a>
          <ul>
            <li><a href="#">Overview</a></li>
            <li><a href="#">Career Options</a></li>
            <li><a href="#">Alumni Profile</a></li>
            <li><a href="#">Syllabus</a></li>
            <li><a href="#">Admission</a></li>
          </ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">Marine Systems</a>
          <ul>
            <li><a href="#">Overview</a></li>
            <li><a href="#">Career Options</a></li>
            <li><a href="#">Alumni Profile</a></li>
            <li><a href="#">Syllabus</a></li>
            <li><a href="#">Admission</a></li>
          </ul>
        </li>
        <li><a href="#" class="MenuBarItemSubmenu">Overview</a>
          <ul>
            <li><a href="#">Mission</a></li>
            <li><a href="#">Location</a></li>
            <li><a href="#">Associate’s Degree</a></li>
            <li><a href="#">Tuition and Financial Aid</a></li>
            <li><a href="#">Admission</a></li>
            <li><a href="#">Faculty</a></li>
          </ul>
        </li>
      </ul>
</div>
<div id="header-03">
        <img src="images/header_03.gif" width="141" height="31" alt=""> </div>
<div id="header-04">
    <a href="https://www.facebook.com/pages/The-Landing-School/81582557331?ref=ts" target="_top"><img src="images/header_04.gif" alt="" width="29" height="31" border="0"></a>    </div>
<div id="header-05">
        <a href="http://twitter.com/#!/landingschool" target="_top"><img src="images/header_05.gif" alt="" width="30" height="31" border="0"></a>    </div>
<div id="header-06">
        <a href="http://www.youtube.com/user/TheLandingSchool" target="_top"><img src="images/header_06.gif" alt="" width="31" height="31" border="0"></a>    </div>
<div id="header-07">
        <a href="http://landingschool.blogspot.com/" target="_top"><img src="images/header_07.gif" alt="" width="27" height="31" border="0"></a>    </div>
<div id="header-08">
        <img src="images/header_08.gif" width="45" height="31" alt="">
    </div>
</div>

</div>
<script type="text/javascript">

</script>
</body>
</html>
here is my CSS:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: none;
    width: 700;
    font-family: Arial;
    color: #FFFFFF;
    border: thin none #000000;
    height: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
    z-index: 1000;
    background-color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    color: #000000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 11px;
    text-align: center;
    cursor: crosshair;
    width: 138px;
    float: left;
    height: 29px;
    background-color: #FFFFFF;
    border: 1px solid #000000;
    font-family: Arial;
    color: #FFFFFF;
    word-spacing: -0.1em;
    letter-spacing: normal;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    font: Arial;
    z-index: 1020;
    cursor: default;
    width: 8.2em;
    position: relative;
    left: -500em;
    background-color: #999999;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    width: 8.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 125%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
    border: 0px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    font: Arial;
    background-color: #999;
    padding: 0.5em 0.75em;
    color: #333;
    text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    background-color: #003366;
    color: #FFFFFF;
    border: 0px;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    background-color: #003366;
    color: #FFFFFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: none;
    background-repeat: no-repeat;
    background-position: 95% 50%;
    background-color: #FFFFFF;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
    background: #FFF;
thank you!
Tote Road

Your first difficulty is outlined here in the W3C Validation tool: http://validator.w3.org/check?uri=http%3A%2F%2Fvacationlandphotography.com%2Ftls%2Fheader. html&charset=%28detect+automatically%29&doctype=Inline&group=0
Without a doctype declaration, the browsers don't know what to do with your code. Some apparently guess well. Internet Explorer, not so much.
After you've fixed your page up by copying this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
in place of this:
<html>
<head>
either things will be improved or there will be something else cropping up. I opt for the former, myself!
Beth

Dreamweaver sc6 fluid grid layouts and nivo slider

I have the nivo slider pretty much set up on my home page, with one exception. I have a sidebar to the right of the slider and the slider bullets end up above the sidebar as opposed to below and centered below the slider. If I remove the sidebar and set the slider div to the full width of the page, then the bullets end up where the should be (centered and below the slider).
What do I have to do so that the bullets end up centered and below the slider when I have a sidebar to the right of the slider?
Thanks.

The site is not live so I don't know how to post a url for it for viewing. I inserted a print screen of the preivew in internet explorer from dreamweaver (I hope this helps), you can at least see the bullets for the slider above the sidebar. Also, the source code for the page is below. If this is not enough please let me know what else I can include that might allow someone to help me. Thanks.
<!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="css/layout.css" rel="stylesheet" type="text/css">
<link href="nivo-slider.css" rel="stylesheet" type="text/css">


<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="respond.min.js"></script>
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="slider/themes/default/default.css" type="text/css" media="screen" />
<script src="jquery.nivo.slider.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
<style type="text/css">
body {
background-image: url(images/Gradient%20Background%20with%20highlights.png);
background-repeat: no-repeat;
background-color: #000000;
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
</head>
<body bgcolor="#404040">
<div class="gridContainer clearfix">
<div id="header">
    <p style="background-position: center center; background-repeat: no-repeat; width: 850px; height: 115px; background-image: url(images/Montanaro%20Poker%20Logo%20Transparent%20Background%203.png); text-align: center; font-size: 40px; color: #ffffff; font-weight: bold;"></div>
<div id="menu">
    <table width="979" border="1" cellpadding="0" cellspacing="0">
      <tr>
        <td><ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a href="#">HOME</a></li>
          <li><a href="html/rules.html">RULES</a></li>
          <li><a href="#">TOURNAMENT STRUCTURE</a></li>
          <li><a href="#">LEAGUE EVENTS</a></li>
          <li><a href="#">STANDINGS</a></li>
          <li><a href="#">POKER FORUM</a></li>
          <li><a href="#">R.S.V.P.</a></li>
          <li><a href="#">CUSTOM TABLES</a></li>
        </ul></td>
      </tr>
    </table>
</div>
<div id="wrapper">
<div class="slider-wrapper theme-default">
      <div id="slider">
          <img src="slider/images/nemo.jpg" title="nemo image">
          <img src="slider/images/toystory.jpg" title=toystory image">
          <img src="slider/images/up.jpg" title="up image">
          <img src="slider/images/walle.jpg" title="#htmlcaption">
   </div>
    </div>
   <div id="htmlcaption" class="nivo-html-caption">
       <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>
   </div>
    <script type="text/javascript">
    $(window).load(function() {
       $('#slider').nivoSlider();
    </script>
</div>
<div id="sidebar">
    <form style="text-align:center;font-size:18px;color:#000000;font-weight:bold;line-height:35pt;" >UPCOMING EVENTS</form>
<p style="text-align:center;font-weight:bold;">LAST TOURNAMENT OF THE YEAR + <br>
      WIN A FREE SEAT IN THE 2013 POKER LEAGUE
    </p>
     <p><a href="html/rsvp.html">Saturday, December 8th 8:00pm</a>
    <p style="text-align:center;font-weight:bold;">FIRST LEAGUE EVENT
     </strong></p>
     <p><a href="html/rsvp.html">Saturday, January 12th 8:00pm</a>
        </div>
<div id="body">
<p style="font-size:28px;color:#CC0000;font-weight:bold;">HOME</p>
    <p>Montanaro Poker has evolved over the years to provide a fun, friendly atmosphere for friends/family to play in a social poker game. It is by inviatation only. It is not a public card room. The house will in no way ever take a rake. All buy-inswill be paid out to the winners of each event. All league fee's will be paid out to the Player of the Year winners.
    </p>
    <p>Small snacks (pretzels, popcorn, candy...) and drinks (water and soda) will generally be provided. Any player that wishes something else is welcome to bring their own, however, due to the friendly nature of the game, everyone usually shares. Also, no food or drink is allowed on the actual poker table.
    </p>
    <p>While we maintain a fun game, we try to maintiain a certain level of professionalism to each event. Please review the rules (located at the top of the page and in the poker room) before coming to an event or sitting down to the table. We like everyone to be on as level of a playing field as possible.
    </p>
    <p>We love hanging out with friends/family and tossing in a little competition. We are glad that you can join us and wish you the best of luck! (just not too much).
    </p>
</div>
<div id="footer"></div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

How to edit fluid grid layout in Dreamweaver CS6

Hi all
I am a designer at the company I work for and we've been building repsonsive designs for the past 12months. I've decided that it would be good for me to try out the new fluid grid layout tool in Dreamweaver CS6 to see if we can improve the design process by using dreamweaver to allow us to quickly prototype my designs for mobile, tablet and desktop.
However I have 2 problems so far.
1) I've created my first fluid grid layout and saved all the files into a new folder. I set grid widths and gutter but now want to edit the values as I am not happy with the gutter. Can this be done? I can't seem to find the file that does this so can anyone point me in the right direction?
2) We have traditionally used pixels to define our grids. I normally produce a grid with a fixed pixel gutter, overall width and column size. It seems that Dreamweaver only has the option to use percentages. Can anyone tell me if this can be changed and again where I can do this?
Thanks for your help
Trevor

In Code View, open your FluidGrid.css file (or whatever you named it) when you created the layout.
FluidGrid Layouts are not perfect and the interface could use a lot of improvement. That said, I think they can be used as a starting point for simple layout projects providing you understand their limitations and are willing to manually tweak the FluidGrid.css code.
If you've been doing Responsive Layouts for 12 months, you're probably building desktop to mobile whereas FluidGrids build from mobile to desktop. It takes a little adjustment in thinking.
Keep FluidGrid.css for layout only. Use a seperate stylesheet for your content styles.
Nancy O.

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

I am trying to create a fluid grid layout in Dreamweaver CS6 (which I know how to do), the problem is Dreamweaver started automatically saving the boilerplate.css & respond.min.js in the Dreamweaver program folder (C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS6\configuration\BuiltIn\Fluid Grid Layout\) it does not ask me to save the boilerplate.css or the respond.min.js docs as it normally does. Dreamweaver CS6 also creates a css document instead of the html page it should create. I called Adobe support, however they offer no support for "Fluid Grid Layouts", and I cannot seem to find a solution to this problem anywhere on the internet. If anyone knows how to fix this so it will work properly again it will be greatly appreciated!

Hi toger02,
If you have restored the preferences correctly and the issue is still unresolved I would recommend checking the workflow again.
Define a new site in Dreamweaver.
File < New Fluid Grid Layout < Create. Doctype set to HTML5 and no CSS file attached.
A dialog box will pop up, prompting you to save the CSS for this design. This is your custom style sheet. Give a "filename.css" < Click Save.
Once you've done that, the layout for the mobile device appears in the design view as an "untitled" new document with related files listed as "boilerplate.css","respond.min.js" and "filename.css" i.e your custom CSS file.
File < Save < "filename.html". < Save. On clicking Save it will show a popup with the message: Copy Dependent Files, which are boilerplate.css and respond.min.js.
I hope this helps else let us know if issue is on all the new sites and fluid grid pages that you create?
Thanks,
Bhawna

Background images in fluid grid layouts Dreamweaver CS6

How can I get a background image png or jpg original size 1040w by 840h to scale down in the tablet and mobile layouts in Dreamweaver CS6 fluid grid layout?

Adding one of these in your CSS should do the trick...
background-size:contain;
or
background-size:cover;
Depending on the layout of your background image, one may work better than the other.

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

I am making my second website with Fluid Grid layout and as with my last one, it seems I can't use CS6 transitions. Each time I go to add a new transition, Dreamweaver stops working and shuts down. Should you be able to use the transitions function with CS6 transitions or not? In the end, what I want to do is create a behaviour where one image is swapped with another with a click (not a rollover as it won't work on mobiles, I believe).
Thank you

Add a link to jQuery's Latest Library to your document <head> tags.
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
Add the jQuery function code to <script> tags in your document. I typically put them right above the closing </body> tag.
<script>
$(document).ready(function () {
    $("#one").click(function () {
        $("#one-a").toggle('slow');
    $("#two").click(function () {
        $("#two-a").toggle('slow');
    $("#three").click(function () {
        $("#three-a").toggle('slow');
</script>
</body>
As to why DW is closing you down, I don't know. That's not an expected behavior.
Without seeing your code, I'm going to guess that your CSS transition logic is incorrect or you're attempting to add transitions to the FluidGridLayout.css which is never a good idea. Always use a separate, external style sheet for your manually added content styles. Changes to either boilerplate.css or the temperamental FluidGridLayout.css files can result in problems.
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.

How to increase the width of the Fluid Grid Layout from 1008px to 1080px?

Good day all, I'm experiencing a slight problem with Fluid Grid Layout in Dreamweaver CS6. I want to increase it's width so that it could be one with my Photoshop CS6 design (which is 1080px), the problem is that I can't as I am limited to 1008px. How do I increase the width? I ultimately am re-coding my design as my client demanded a responsive design but I'm clueless in that avenue which is why I resorted to re-doing everything under the set & safe default (Fluid Grid Layout) that doesn't require me to udnderstand media queries at an expert level.

While Fluid Grid Layout can save you some production time, you still need a good understanding of CSS Media Queries to use it.
Introduction to CSS Media Queries
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-que ries.html
CS6 Fluid Grid Layouts (6 min video)
http://tv.adobe.com/watch/digital-design-cs6/creating-adaptive-designs -using-fluid-grid-layouts-in-dreamweaver-cs6/
CS6 Fluid Grid layouts (17 min video)
http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layou ts/
Step-by-Step tutorial -- Building Fluid Grid Layouts in DW CS6
http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs 6.html
Instead of fixed-widths in pixels, FLG code is all % based. It starts with the mobile layout and cascades to tablet, then desktop. If you want to use fixed-widths in pixels, you must manually change the CSS code for all three devices.
Nancy O.

DW CC Fluid grid layout how to change px width for desktop layout

Hi there,
I have been going through the various tutorials about fluid grid layout and setting up our bureau's website in a responsive layout.
The width of the original design was 960 px and the hero pic and others have been exported at that size.
The first divs in the design look fine, header with the 960 px pic in it, and also the BC menu which is set to 960 wide.
However the body text goes out to the right, past the 960 px and this is because, right at the start, when starting the file in DW the desktop screen width is set to 1232px.
How can you change this setting when starting a new fluid grid layout?
I have tried changing the number of columns, or the percentage, and the width for desktop remains at 1232px.
Why is this?
Not all of our clients want a site 1232px wide on a pc.
Thanks so much.

Hi Ben and Nancy,
Thanks for your replies, but maybe you both don't realise I am asking specifically about DW CC and setting up a responsive design using a fluid grid layout?
I have been following the recent videos from Adobe on this.
As far as the width of 960 goes, Nancy I am only shortchanging myself, as this is the website for our agency. The original design is 960px wide as I did read somewhere that this width is recommended now that responsive is coming, as it is easily divided into a grid layout. I also am quoting for a client at the moment who wants a responsive design for their website, and they have specifically requested that the site have a maximum width of 960 px. So I would like to find out if this is possible in DW CC at the moment when doing a fluid grid layout.
So what I am trying to do here is follow the Adobe tutorials on responsive design, using DW CC and I am using the current design for our agency website as a trial to set this up and try and get it working as a responsive website.
It does not seem to me that many other people are doing this, as most people are recommending that I try Github or Bootstrap.
However, I am not a coder and I am used to using DW, so I would like to get the DW CC responsive design features working if possible.
Ben the CSS you are looking at is being generated by DW CC as I follow the steps in the Adobe demonstration videos to set up a fluid grid layout in DW CC.
One of the things they say in the videos is that you can't program the CSS directly when doing a fluid grid layout, or you break the CSS and it all stops working. So I am using the new panels in DW CC to set up the layout. One thing I cannot get access to is the ability to set a maximum width for the site. It seems to be set in concrete when you start the fluid design up in DW CC.
Here is a pic of the screen I am talking about that sets the maximum width:
I cannot click in the pixel width at the top and change it. Also if I adjust the number of gridlines or the percentage for the pc layout, the default maximum pixel width does not change.
If you click on the preferences button and go into the Window sizes screen, there does not seem to be a way to set the maximum pc width here either, so I am a bit stumped.
Maybe I just have say to my clients that if you want a responsive design then the max width for pc can only be 1232px? It does seem strange to me that this cannot be changed.

CS6, Fluid Grid Layouts, and Spry Menu - sizing issues

Similar Messages

Maybe you are looking for