Setting background-image as editable in Fluid Grid Layout (Template file)

Hi, Im very basic on Dreamweaver so bare with me,
I am creating my first website and setting up my template file.
I am struggling with making my background image editable in the template file,
Alot of the awnsers point me into creating a new background style sheet which I have done.
I have included :
<link rel="stylesheet" href="../Background style sheet.css" type="text/css">
into my <head> in the source code and now im pretty lost for what to do next... I want to link it to all my mobile, tablet and desktop #main divs and then be able to edit the background image for my different web pages;
for example my home page is one background-image and then the other web pages all have other background images.
Sorry if I am not asking the right questions, I am very new to coding
Regards,
Confused Graphic Design student.

It's actually very easy to target the <body> of each page in an external stylesheet to change the background individually, just not with DW Templates.
Normally, what I would do is give each page's <body> tag an id, for example, on an about.html page...
<body id="about">
Then in the css, you would give the #about id a background-image setting...
#about {
background-image:url(about_bg.jpg);
Each page would have a similarly named id in the <body> and a corresponding #id in the css.
Side Note: Stick to lower case, alpha numeric file names for all of your pages and images. Use underscores or hyphens instead of spaces for them too. Servers are CaSe SenSitIvE and a link to Index.html (capital i) will not go to a page named index.html (lowercase i). It will work on your local system, just not on the server because the server sees the case structure difference as two separate files.

Similar Messages

Setting overall styles in DW CC fluid grid layout

I have just watched this tutorial on Adobe TV about fluid grid layout in DW CC: http://tv.adobe.com/watch/learn-dreamweaver-cc/create-fluid-responsive-web-pages-in-dreamw eaver/community#community
This is a great start, but I need to know more!
Where do I set the body text, background, background tile and drop shadows, plus the H1 to H4 and a link attributes? Is it in the <div class="gridContainer clearfix"> or do I do i somewhere else? I saw another video on fluid grid layouts that briefly mentioned using a separate css stylesheet for fonts as 'it was better' but no more detail was given.
Also where can I change the a link attributes in a div if I want different a link styles in that div to the rest of the website? I can't see an area in the properties panel where I can change a link behaviour.
Thanks so much.

Generally, when you are building a website, you want your styles in a separate style sheet (a CSS document). With respect to the tutorial, he details that he is creating a CSS document he calls "style.css" and saves it in the local root folder. I usually place my style sheets in a /css/ folder but, for the purpose of his demonstration, placing it in the root of the defined site in Dreamweaver is just fine.
Now, once he has saved his initial HTML file, Dreamweaver CSS tells him that his document needs two more documents that Dreamweaver will pull in from the Dreamweaver library. One is a JavaScript document, respond.min.js, that handles figuring out what to do on a cell phone, versus a tablet, versus a desktop and the other is "boilerplate.css" that handles fluid grids. If you look at the HTML document, you'll see links to these three files in the root of the defined site.
Now, you'll notice when he's creating the header (id="top") and doing the centering of the logo image, he tells you to select the corect stylesheet, namely "style,css."
Here's the essential problem with the way he's showing you how to do this. You're not actually working in the code. He's demonstrating all of these panels and entry areas for Adobe's Dreamweaver that actually hide the code from you. In fact, he encourages this by switching you from "Split" view to Design (only) view for centering the logo image.
I think this is disingenuous. Everyone here in this forum will tell you, "You need to learn HTML and CSS." And they're absolutely correct. Dreamweaver's fluid grid layout gizmo may not ever define body text, background, background tile, drop shadows or your "h" tags at all. Or, they may be defined, but you are never taken to the code that shows you those definitions.
Open the CSS document that is the basis of the tutorial, which is style.css. In that document, you should see a "body" definition like this:
body {
          background-color: #FFFFFF;
color: #000;
          font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
          margin: 0px 0px 30px 0px;
In English, this means your background color is white and your text color is black. You're using Lucida Sans Unicode or Lucida Grande as your typeface, defaulting to sans-serif if those are not available. You have a 30-pixel bottom margin, no margins for either top or sides.
If you need to create a background color or tile, you would change the background-color attribute or, if you are tiling a background, you would place the following in the body definition in CSS:
background-image: url("images/tile.jpg");
This assumes you have a file in your /images/ folder in the root of your defined site called tile.jpg. Since you did not include a background-repeat command, your tile will repeat x and y.
And if you don't want a tiled background in your body and do want it in a different div, you simply look for the name of the div in your CSS and put it there.
As to your heading styles, you may find them all ready defined in your CSS document. You may redefine them or create new header styles.
This should get you started. The key is to open the CSS document, "style.css" and see what's there.
-Mark

Duplicating and Editing a Fluid Grid Layout

Hi, I am making a website and I have copied and pasted a current page and just wanted to remove the text and pictures on the page that was a duplicate so I could put new info onto it. How come every time i remove a picture or text, it makes the same changes to the origional document? is there a way to get around this so I dont have to create a fresh page from scratch? It was just another page that I wanted with the same format and styling, but with obvioulsy different text and pictures on it.
Thank you
Chris

How come every time i remove a picture or text, it makes the same changes to the origional document?
This is certainly not the expected behavior, nor is it a behavior I have ever encountered. Would it be possible for you to upload the page to some web space that you control and post a link to that page? Also please tell us which text/images are being deleted that also affect the other page.

How to Scale Images in a Table in Fluid Grid Layout?

I copied over a table full of mouseover images into my new fluid grid layout. It all works fine, but in Mobile mode, all the images are compressed horizontally. How do I fix this?
http://savcp.com/howwemet-fluid.html

Strip out your table code with F&R. You could greatly reduce your code & page load by using CSS instead of image swap behaviors. Same size images would produce a nicer appearance, too.
Below, I used floated <p> tags as containers for pictures. Copy & paste this into a new, blank document and SaveAs test.html. Preview in browsers with various viewport widths to see the effect.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 document</title>
<style>
body { background: #222 }
/**BEGIN PICS**/
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
#pics {
width: 100%;
overflow:hidden;
margin: 55px auto;
border: 1px solid silver;
#pics p {
float: left;
width: 24%;
text-align: center;
/**space between**/
margin: 0 0.25%;
border: 1px solid #222;
#pics img {
max-width: 100%;
border: 5px solid #333;
/**opacity on linked pics**/
#pics a img {
/**for pre-IE8**/
filter: alpha(opacity=90);
/**for other browsers**/
opacity: .90;
/**on mouseover**/
#pics a img:hover, #pics a img:active, #pics a img:focus {
filter: alpha(opacity=100);
opacity: 1.0;
border-color: #09C;
/**ADJUST BREAKPOINTS AS REQUIRED**/
/* Special Rules for Mobiles */
@media only screen and (max-width: 480px) {
#pics p{    height:110px;}
/* Special Rules for Tablets */
@media only screen and (min-width: 481px) {
#pics p{    height:175px;}
/* Special Rules for Desktops */
@media only screen and (min-width: 600px) {
#pics p{    height:255px;}
/**end PICS**/
</style>
</head>
<body>
<div id="pics">
<p><a href="howwemet/mb3.html">
<img src="http://savcp.com/images/story/mb2.gif">
</a></p>
<p><a href="ww3.html">
<img src="http://savcp.com/images/story/ww2.gif">
</a></p>
<p><a href="bs3.html">
<img src="http://savcp.com/images/story/bs2.gif">
</a></p>
<p><a href="rr3.html">
<img src="http://savcp.com/images/story/rr2.gif">
</a></p>
<p><a href="howwemet/mb3.html">
<img src="http://savcp.com/images/story/mb2.gif">
</a></p>
<p><a href="ww3.html">
<img src="http://savcp.com/images/story/ww2.gif">
</a></p>
<p><a href="bs3.html">
<img src="http://savcp.com/images/story/bs2.gif">
</a></p>
<p><a href="rr3.html">
<img src="http://savcp.com/images/story/rr2.gif">
</a></p>
<p><a href="howwemet/mb3.html">
<img src="http://savcp.com/images/story/mb2.gif">
</a></p>
<p><a href="ww3.html">
<img src="http://savcp.com/images/story/ww2.gif">
</a></p>
<p><a href="bs3.html">
<img src="http://savcp.com/images/story/bs2.gif">
</a></p>
<p><a href="rr3.html">
<img src="http://savcp.com/images/story/rr2.gif">
</a></p>
<p><a href="wk3.html">
<img src="http://savcp.com/images/story/wk2.gif">
</a></p>
<p><a href="ss3.html">
<img src="http://savcp.com/images/story/ss2.gif">
</a></p>

</div>
</body>
</html>
Nancy O.

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.

Cannot drag divs in fluid grid layout

I am running Dreamweaver CS6 in OS X Mavericks.
When I am building pages in fluid grid layout I seem to reach a point where I can no longer grab div boxes on the left or right to resize. Is this because you cannot edit a fluid grid layout from a template?
Thanks,
Joshua

I can tell you from personal experience that once the FGLayouts are built for mobile, tablet and desktop, fully tested and validated, you should put a HALT on that phase of your project.
Then SaveAs Template. Everything from that point forward is sans the FG Design Panels and just about adding content.
And yes, keeping content styles in a separate physical file is highly recommended. That way if something awful happens to your CSS styles, you're not putting your FGLayouts in peril.
Nancy O.

Placing a background image in fluid grid layout

I am having trouble building a fluid grid layout I am not sure why but when I shrink the layout it doesn't seem to work correctly
I need to do 2 things.
1) make the background image shrink as it is suppossd to. when you scale down the images doesn't shirink to tablet size and isn't there for the phone size (although I think I want a new image for phone with just one side of the (page image). on it so I assume I just link that in there under that section in in the css
2)It doesn't seem to want to align the writing so that it is only over the page section of the background image on each side (the rightcontent and left content boxes-ie they should look like text on a page)
also I want to take the page here when it is finished and make it a template for further pages (just changing the text) is that done the same as usual for the fluid grids?
Thank you in advance for the help
Here is the link that the site has been temp posted on for detail editing.
http://approvalsite.info/

Kind of makes sense.
I am not sure how to make the div tag layouts relative to the background image.
please advise.
also, I have been playing with it and it seems to be working better now.
But the issue I have with it now is that the image on the right side of the page keeps showing at the bottom of the page instead of on the top of the page directly next to the wording on the left.
does anyone know why?
I am sure it is just a simple coding issue.
help
approvalsite.info
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:        5;
    dw-num-cols-tablet:        8;
    dw-num-cols-desktop:    12;
    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 {
    width: 85%;
    padding-left: 1.82%;
    padding-right: 1.82%;
    background: url(../images/DSC_0014.jpg) center fixed;
    -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      -background-size: cover;
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#header {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#menubar {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#leftcontent {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    height:auto;
#rightcontent {
    clear: both;
    float: right;
    margin-left: 0;
    width: 100%;
    display: block;
    height:auto;
#footer {
    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: 90.675%;
    padding-left: 1.1625%;
    padding-right: 1.1625%;
    background: url(../images/DSC_0013.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      -background-size: cover;
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#header {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#menubar {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#leftcontent {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#rightcontent {
    clear: both;
    float: right;
    margin-left: 0;
    width: 100%;
    display: block;
#footer {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
    width: 90%;
    max-width: 1232px;
    padding-left: 0.75%;
    padding-right: 0.75%;
    margin: auto;
    background: url(../images/DSC_0013.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      -background-size: cover;
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#header {
    clear: both;
    float: left;
    margin-left: 5%;
    width: 100%;
    display: block;
#menubar {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#leftcontent {
    clear: both;
    float: left;
    margin-left: 15%;
    width: 30%;
    display: block;
    padding-right: 2%;
#rightcontent {
    clear: none;
    float: right;
    margin-left: 1%;
    width: 49%;
    display: block;
    margin-right: 8%;
#footer {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
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="boilerplate.css" rel="stylesheet" type="text/css">
<link href="_css/layout.css" rel="stylesheet" type="text/css">


<script src="respond.min.js"></script>

<link rel="stylesheet" href="index_files/css3menu1/style.css" type="text/css" />

</head>
<body>
<div class="gridContainer clearfix">
<div id="header"><h1>Jan Kardy's Literary Agency</h1></div>
<div id="menubar">

<ul id="css3menu1" class="topmenu">
    <li class="topfirst"><a href="../index.html" style="height:18px;line-height:18px;">Home</a></li>
    <li class="topmenu"><a href="../about_jankardys.html" style="height:18px;line-height:18px;">About Jan Kardys</a></li>
    <li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>Resources</span></a>
    <ul>
        <li><a href="../Education_connection.html">Education Connection</a></li>
        <li><a href="../submission_guidelines.html">Submission Guidelines</a></li>
        <li><a href="#"><span>Blogs</span></a>
        <ul>
            <li><a href="http://unicornwritersconferencect.blogspot.com/">Unicorn Writers Conference</a></li>
            <li><a href="http://advancenetworkingunicorn.blogspot.com/">Advanced Networking Blogs</a></li>
        </ul></li>
        <li><a href="../first_steps_to_publishing.html">First Steps to Publishing</a></li>
        <li><a href="../library_publish_events.html">Library & Publishing Events</a></li>
        <li><a href="#">Art Gallery</a></li>
    </ul></li>
    <li class="topmenu"><a href="#" style="height:18px;line-height:18px;">Clients</a></li>
    <li class="toplast"><a href="#" style="height:18px;line-height:18px;">Contact Jan Kardys</a></li>
</ul>
<p style="display:none"><a href="http://css3menu.com/">Horizontal Menu Using CSS Css3Menu.com</a></p>

</div>
<div id="leftcontent">
    <p>Jan   Kardys, President of Black Hawk Literary Agency, has thirty years of   diversified publishing experience for nine major publishing   corporations. Black Hawk Literary Agency LLC represents a broad spectrum   of authors and illustrators, with a focus on new nonfiction and   fiction. <br />
    </p>
    <p>Jan was Director of   Contracts for Warner Books/Little, Brown & Company, Director of   Contracts at Macmillan Publishing Company, Charles Scribner's Sons, and   Contracts Director at Prentice Hall/Simon & Schuster. Ms. Kardys has   worked at Harcourt Brace Jovanovich, Doubleday, Scholastic, Lippincott   & Crowell, Publishers, St. Martin's Press, Conde Nast Publications,   and Google. Beginning a career in editorial, Jan also worked in art and   production in School publishing. Jan held various executive positions in   subsidiary rights, licensing, database design, imaging, royalty   conversions, contracts, copyrights & permissions departments.<br />
    </p>
    <p></p>
</div>
    <div id="rightcontent"><p><strong><center>Jan Kardys, Literary Agent<br />
    Black Hawk Literary Agency, LLC. <br />
    17 Church Hill Road,<br />Redding, CT 06896</center></strong></p>
    <p><strong><center>
      <p><img src="images/jankardys.jpg" alt="jankardys_headshot" /></p>
      <p>Blog: <a title="http://bookpublishingteacher.blogspot.com" onkeypress="window.open(this.href); return false;" onclick="window.open(this.href); return false;" href="http://bookpublishingteacher.blogspot.com">http: bookpublishingteacher.blogspot.com</a><br />
      </p>
      <p>Email: <a href="mailto:[email protected]" title="mailto:[email protected]">[email protected]</a> <br />
      </p>
      <p>Phone: 203-938-7405</p>
    </center></strong></p>
</div>
    <div id="footer"><h6>Webpage designed by Technomage Web Design</h6></div>
</div>
</body>
</html>

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

Background Images in Fluid Grid Layouts

How can I get the background image that I assign to a fluid grid layout div to fill up 100% of the grid space and at the same time size the background to the fluid boundaries of the div the same way as if I had placed an image into the div? Currently, the background image lays in the grid at the pixal size of the background picture with only the portion of the background showing commenserate withthe size of the div contents. I use CS6.
Thank you.

In your CSS Styles menu, if you double click on the layout div you are working on or the grid container, you will find that the image will show if you hit the return key. If you create a table bigger than the div tag or grid container, it will automatically resize and you be able to see your image. Thats a couple of cheat ways so you can see your image when you work and when you publish.
It just means you will have several of this code: <p> </p>
The image will only show the width and the height of layout div that you are working in.
I have been able to place one fluid grid layout div tag inside on another, although I find that if I make this a template file, the template tends to break over time. Not sure it that's because I am giving Dreamweaver a headache with multiple fluid grid layout div tags inside each other.
The most I have done: 1st level grid container, 2nd level inside grid container were layout div for spry collapse panel menus, 3rd level inside layout div for spry collapse panel menus were sub menus.
I have tried placing one image in the background of the grid container and then another image over the top in a fluid grid layout div tag. The reason why they move is because of the fixed/scroll option inside the CSS style. I found that when publishing, certain browsers shift both images either up or down. This can be a problem, especially if you create an image with a white box and try to align the second image up inside.
It probably can be done, and I spent months hand coding and playing with the file. IE8 is a problem and I have added extra code which I found online. Firefox tends to move things on Windows platform, but MAC is not as bad. Safari and Chrome tends to work better with fluid grid layouts. There is an option for the early versions of browsers so they can recognise things.
To resize everything when in tablet and mobile, I found tablet grid container/layout div tage size 80-90% and mobile to 40-50% grid container/layout div tage size.
Hope this helps

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.

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.

Sliding background banner in fluid grid layout

Hello all...
Hope someone can help me. Kind of new to programming and dream weavers fluid grids. But I've started working on a website and encounted a problem.
How do you implement a sliding background banner in the fluid grid design?
PS: My design looks like this and I plan to use a javascript slider for the banner (don't mind the danish language) :

the logo, menu, headlines and slider navigation is placed on top of the slider.
This is going to fail for several reasons.
#1 FGLayouts resize as do the foreground images inside them. However, menus & headlines don't resize. They stay the same size regardless of viewport unless you invoke your own special CSS media queries to change them.
#2 Background images don't re-size to layout.
#3 To have a slider appear behind your logo, menu and headines, you'll need to layer elements with absolute positioning. And as we all know from multiple discussions on this forum, absolute positioning doesn't work well in Responsive layouts because eventually everything becomes a jumbled mess.
The best advice, keep your slider separate from your site menu and headlines. You'll have fewer problems that way.
Nancy O.

How to make regions editable in fluid grid template in 2014.1.1 in LIVE view - can't open the template editable selection panel

I am teaching a course in Dreamweaver 2014.1.1
We are setting up templates in fluid grids.
We need to make regions editable.
The LIVE view replaced the DESIGN view and does not have certain options accessible anymore.
I can't find the command to access the dropdown panel to make a region editable.
The Template tab at top, and the make editable options subtab, will not come open in fluid grid template mode.
Does anyone have a way to do this?

I was under the impression that the February update (2014.1.1) released a few days ago had fixed these problems. I urge you to file an official bug report below.
https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform
My advice for now is to stay away from Fluid Grid Layouts. But if that's not an option, I'll show you a trick for getting Design View back. Open the Fluid Grid CSS file and add an X as shown below. This tricks DW into thinking it's a normal layout.
    Dreamweaver Fluid Grid Properties
    dw-num-cols-mobile:      X 4;
    dw-num-cols-tablet:        8;
    dw-num-cols-desktop:    12;
    dw-gutter-percentage:    25;
=====================================
Once saved, you should see Design View as an option.
Nancy O.

SETTING BACKGROUND IMAGE IN SAPSCRIPT

HI,
CAN U TELL ME HOW TO SET BACKGROUND IMAGE IN SAPSCRIPT.
REGARDS,
SANJAY.

Hi Sanjay,
You can use transaction SE78 to inmport graphics to SAP.In the form painter, you can either include directly to the form using
Edit->Graphic->Create or using the INCLUDE statement in a window.
To use an INCLUDE stanment, goto the window script editor and use menu Include->Graphic. The include can look like this for a bitmap:
/: BITMAP MYLOGO OBJECT GRAPHICS ID BMAP TYPE BMON

Fluid Grid Layout - IE Issue with Image Size

Hi,
I've been working on a new website using the CS6 Fluid Grid Layout. My site is working correctly in Chrome and Firefox but in Internet Explorer 9 and 10, and most likely all other versions, the images that resize normall in Chrome and Firefox stay at maximum size in Internet Explorer. Please could somebody take a look at my site and see where I have gone wrong in the code as I can't find the problem anywhere.
www.moleseyhire.com/index2.html
Kind regards,
Mitchell Ransom

You could set the <divs> up like:
<div id="special_1"><img src="http://www.moleseyhire.com/images/offer-1.png" alt="33% Off Shampoo"></div>
<div id="special_2"><img src="http://www.moleseyhire.com/images/offer-2.png" alt="Multi Hire"></div>
    <div id="special_3"><img src="http://www.moleseyhire.com/images/offer-3.png" alt="Multi Buy"></div>
    <div id="special_4"><img src="http://www.moleseyhire.com/images/offer-4.png" alt="10% Off Tile Cutter Accessories"></div>
Then add
#special_1, #special_2, #special_3, #special_4 {
    width: 24%;
    float: left;
    margin-right: 1%;
To the following media queries:
@media only screen and (min-width: 769px) and @media only screen and (min-width: 481px)
and:
#special_1, #special_2, #special_3, #special_4 {
    width: 49%;
    float: left;
    margin-right: 1%;
to the following media query:
/* Mobile Layout: 480px and below. */

Setting background-image as editable in Fluid Grid Layout (Template file)

Similar Messages

Maybe you are looking for