CS6 Fluid Grids - how to make images resize when page is resized? [was: Hello]

I am new to fluid grid layouts in Dreamweaver cs6, I want to insert a GIF file on my index page but I do not know how to make it so when the page shrinks the GIF or image shrinks as well. The only code that I have found is
img, {
max-width: 100%;
But this code already exists in the css file when you create a new fluid grid based layout
img, object, embed, video {
max-width: 100%;
can anyone help a newbie please..

this is my source code
<!doctype html>




<html class="">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kyle Childress Foundation</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="/layout.css" rel="stylesheet" type="text/css">


<script src="respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="animation"><img src="images/images/kyleanimation2014gif2.gif" alt="kylechildressfoundationanimation"></div>
</div>
</body>
</html>
this is my css
@charset "UTF-8";
@import url("/kyle.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:    10;
    dw-gutter-percentage:    25;
    Inspiration from "Responsive Web Design" by Ethan Marcotte
    http://www.alistapart.com/articles/responsive-web-design
    and Golden Grid System by Joni Korpi
    http://goldengridsystem.com/
/* Mobile Layout: 480px and below. */
.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 87.36%;
    padding-left: 1.82%;
    padding-right: 1.82%;
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#animation {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#image {
    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%;
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#animation {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#image {
    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: 88.2%;
    max-width: 1232px;
    padding-left: 0.9%;
    padding-right: 0.9%;
    margin: auto;
#LayoutDiv1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#animation {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#image {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
the animation GIF is 700 x 908
I changed the code from max-width to just width 100% but it still did not work ,, please help

Similar Messages

Dreamweaver CS6 fluid grid with slideshow

I am trying to create a slideshow page for my DW CS6 fluid grid site, preferably with previews.
I want the images to scale with the width of the browser.
I checked out different plugin's and apps but one does not integrate with DW, the other can't combine Landscape and Portrait pictures ect....
After looking in the forums I could only find 1 discussion about this resulting in there is no solution.
But a year has past and...... does anyone know a good solution?
Don't want to use Flash.
thx.

"Try and find a "Responsive jQuery Slideshow" plugin? The biggest issue
that javascript-slideshows will have is that many rely on having a
specific width"
Non-jQuery extensions sometimes present solutions:
http://www.projectseven.com/products/galleries/igm2/examples/demo-01.htm
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
Since 1998

Centering a page in Dreamweaver CS6 Fluid grid

Centering a page in Dreamweaver CS6 Fluid grid.
I figured this would be an easy task and have saved it to last. After watching videos, scanning the web and this forum I have found many answers but none of them seem to work in CS6. I currently have an extra 1-2% margin on the left to get the page closer to the middle but this doesn't work well with all screen sizes and its still not in the middle.
Page can be found here
Any advice would be greatly appreciated!

It looks like you've nested the rest of content within your #header DIV. And header div's width is 94.4% - this results in everything on the site have a ~5% margin on right.
You may want to fix this first to see if it helps you with the result you intend to get. If not, do post back.

How to make images fade in and out

how to make images fade in and out continuously

HI,
The Ken Burns effects can do this nicely. Available in the iLife suite of software.
iLife 06 minimum requirements:
http://support.apple.com/kb/HT2675
iLife 06 - Amazon
Carolyn

How to Make a Printable Results Page in Adobe Captivate 8

Hi Captivate Developers!
We made a really cool Captivate tip that I think you will enjoy. This tip allows your learners print-friendly results in Adobe Captivate 8. We also include the code needed to make it work and is actually pretty easy. It also includes videos for each step. Hope you like it!
http://elearningbrothers.com/how-to-make-a-printable-results-page-in-adobe-captivate-8/

If you have a dynamic web site (database driven), use PHP or ASP data queries.
If your site is static (no databases), look at the links below:
Zoom Search Engine software
http://www.wrensoft.com/zoom/index.html
Free Find
http://www.freefind.com/
Pico Search
http://www.picosearch.com/
Google Site Search -
http://www.google.com/sitesearch/
Web Assist DW Tools for Google (free)
http://www.webassist.com/free-downloads/dreamweaver-extensions/dreamweaver-tools-for-googl e/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

How to make the location of an iPhone that was stolen?

how to make the location of an iPhone that was stolen?

If you installed the app Allan is referring to, go to www.me.com on your computer.
Reporting a lost or stolen Apple product

How to make it selected when clicked and open popup

Hi,
I 've a form in the parent page with many form elements.
I've 2 radio buttons with values "Yes" and "No". I am opening a modal popup when clicked on "Yes" radio button. The modal popup is opening fine.
But when I click "Yes", it' s not selected. After modal popup is closed, when I return to parent page, the option "Yes" is still not selected.
How to make it selected when clicked and open popup?

Perhaps try moving the application to your preferred desktop and then right-click it's dock icon > options > Assign to This Desktop.

How to make session invalid when user refresh the page?

How to make session invalid when user refresh the page?

I have a <form> in a JSP file that has another JSP file as an action.
I have main.jsp that has <form> with action.jsp file as an action.
Now when I submit the <form>, request forwarded to action.jsp and it will take the action. But this file is taking so long, hence user refresh the page again and again, hence duplicate request processing is occuring.
I want to prevent this.

How to make image resizable using mouse ?

Hi,
I want to know about that how to resize image by using mouse in Java Canvas. I created some tools like line, free hand, eraser. And want to know how to make an image resizable in canvas by using mouse. An image is jpeg, png, or gif format. I want to make image stretch and shrink by using mouse.
Please help me..
Thnax in advance.
Manveer

You make a listener to handle the mouse event that you want to capture, then program the affect you want using the event as the trigger.

CS6 Fluid Grids Can you use a sliced images?

I sliced to pictures and was hoping that I could some how figure a way to make it work with fluid grids but no luck.
I tried slicing it both ways but I guess it will always fall apart: http://www.lavishvegas.com/las_vegas_barsx.html
Thaks for any help!

DWQuest wrote:
I sliced to pictures and was hoping that I could some how figure a way to make it work with fluid grids but no luck.
I tried slicing it both ways but I guess
What does "make it work with fluid grid" means? What exactly are you trying to do and how much do you know about HTML and CSS?
To make things work as you want it requires working with the code and so some knowledge is required.
Good luck.

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.

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.

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.

HOW TO MAKE IMAGE TRANSPERANT

Hello All,
I have two images one as background and another one is to
place on background image.
Upper one I need transperant. How to write code to
make image transperant?
CAN ANY ONE HELP?
Sharmila.

If you want to do on the fly image transparencies then you want to look in the java.awt.image package. There is are some pretty powerful image filters in here and after the initial learning curve, it isn't terribly complex to create your own image filters. For a school group project we created a logic puzzle game based on a shareware program alreay out there. The shareware program had a tileset format that we wanted to use in our application, but the transparencies weren't set up correctly. We ended up adding the transparencies on the fly. I wish I had the piece of code handy but I can remember enough to point you on the right path.
If you subclass java.awt.image.ImageFilter and override the two setPixels() methods, you can provide any manipulation you need to. Basically the image producer will pass in the pixels in one huge byte (or int) array top left to bottom right order. What we did, was get the color out of the first pixel and make that our transparency color. The byte method has two bits per color while the int method has 8 bits per pixel. The color is divided into r(ed), g(reen), b(lue), a(lpha) (I can't remember if alpha was first or last, a little expirimentation will tell you). The alpha is opaque at one extreme and fully transparent at the other extreme. Loop through the array and if the color is the same as your first pixel then set the alpha to 0 (or was it 15/255?).
Good luck!

CS6 Fluid Grid 960px wide

I'm just getting started with the fluid grid in CS6 but need a bit of help. I'm set up with 12 columns and the default desktop width is 1232px according to the options box. I don't want the grid to be 100% wide. In fact I want it no bigger than 960px at its max width. That works out to be approximately 78% (77.9) of 1232px. However, if I choose 78% as my width and drop in a DIV to span the whole 12 columns, it is far greater than 960px wide. What am I doing wrong and what do I need to do in order to have a starting width of as close to 960px as possible.
Any help is appreciated.

Ok, that was easy. I was trying to avoid making any changes to the default CSS file but I haven't broken anything which is good Thanks.

CS6 Fluid Grids - how to make images resize when page is resized? [was: Hello]

Similar Messages

Maybe you are looking for