Fluid layouts and jquery?

How do you have a fluid layout site and jquery mobile site together? Would like to have monitor and tablet using fluid layout but for mobiles use jquery, how is it done?

So, is this the end of the physical product for Adobe?

Similar Messages

Fluid layout wont float

Dear all, I know there will be a simple solution and i've read lots of tutorials but i cant find my mistake. Im using a fluid layout and trying to simply float two div tags next to eachother. Below is my code please help.
HTML
<body>
<div class="gridContainer clearfix">
   <div class="fluid container" id="one">This is the content for Layout Div Tag "one"</div>
      <div class="fluid container" id="two">This is the content for Layout Div Tag "two"</div>
</div>
</body>
CSS
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 86.45%;
padding-left: 2.275%;
padding-right: 2.275%;
clear: none;
float: none;
#one {
background-color: #F8080C;
width: 168px;
float: left;
height: 80px;
#two {
background-color: #0250ED;
width: 188px;
float: left;
height: 106px;
.zeroMargin_mobile {
margin-left: 0;
.hide_mobile {
display: none;
Thanks

Some advice. Play away but it took me 9 re-tries to get an acceptable mobile/tablet/desktop layout the first time I used this tool.   It's not exactly intuitive.
Build mobile first. That's what everything else is based on. Don't fuss with any content, just focus on getting divisions all inserted and stacked on top of each other.
Then build Tablet. Use the pull handles to resize divs and move them up or down rows.
Finally build desktop. If you examine the code as you go along, you'll see that DW does a pretty fair job of generating the necessary floats, widths and margins for you. Don't tamper with Fluid Grid CSS code. It's very temperamental and breaks easily. When you're ready to style content, use a separate external stylesheet for that.
Have fun!
Nancy O.

Dreamweaver CC understanding external style sheets when using Fluid layouts?

I'm attempting to build a website using the Dreamweaver CC Fluid layout feature. I've been using this tutorial:
http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs6.html
The bit i'm stuck at is when it comes to attaching a external style sheet to format the text and content. So to be clear, i've already created my fluid layout and created a 'layout.css' file when promted, then using some html 5 class div tags (header, navigation and article) i've built my layout. All doing what I want up to this point.
Now I need to start adding content and from what I understand its much better practice to set up another external style sheet for the text formatting and styling.
I used the CSS Designer to 'create a new CSS file', called it 'typography.css' and I can see its linked to the main Source Code file.
I understand that theory but here is where its confusing for me:
After creating and linking the new CSS file what do I do next? Do I have to hand code in various text formatting ids or is there a more visual way of doing it? Or do I select my text content in the source code page and then press the '+' button in the 'Selectors' panel to start adding ids that way? And should the class or id names in the new CSS file be the same as in the layout CSS file or different?
I guess I dont really understand excatly how external style sheets should be created and implemented, all the youtube vids i've watched so far are done with hand coding but i'd like to use the Properties panel to do it in a more visual way if possible.
Any tips or help greatly appreciated, some basic learning needed. Thanks.

Giving a detailed explanation of how to best use CSS goes beyond the scope of what this forum can do. There are volumes of books, blogs and tech sites devoted to this topic.
A Must Read -- How to Develop with CSS?
http://phrogz.net/css/HowToDevelopWithCSS.html
In a nutshell, make the most of your logical HTML tags. They not only add semantic structure to your content, they serve as hooks for your CSS styles. Don't class or ID something unless you absolutely need it. The goal here is to keep your HTML streamlined.
/**effects all h2 tags in your site**/
h2 {font-size: 125%}
/**only effects h2 tags inside headers**/
header h2 {color:orange}
/**effects all p tags**/
p {font-size: 100%}
/**only effects p tags inside articles**/
article p {color:#333}
Nancy O.

In Dreamweaver 6, I created a new fluid layout. I set up (4) DIVs. In the 3rd div, I changed the font color. The new color shows up on the website when viewed in my computer desktop, but, when viewed in a tablet and a cell phone, the color of the font doe

In Dreamweaver 6, I created a new fluid layout. I set up (4) DIVs. In the 3rd div, I changed the font color. The new color shows up on the website when viewed in my computer desktop, but, when viewed in a tablet and a cell phone, the color of the font does not change. It's the same in Dreamweaver's Live view. It shows the new color on Desktop view and not in the cell phone or tablet view. Also, I changed the font itself in one of the DIVs and it shows up in the new font on the desktop view and website viewed thru the computer, but, not on the tablet or cell phone. Can someone please explain. I want to be able to change the fonts and colors for viewing in the tablet and cell phone, also. The fonts were all standard fonts. Sans-erif and Verdana and Arial were tried. Thanks.

I will lock this discussion because of duplicate post.

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.

How to get text padding in CS6 fluid layout div?

After having set-up my fluid layout divs and entering some content, the text is all slammed against the left. Very unsightly! But my every attemtpt at chaning the CSS to insert some left padding breaks the overall layout by pushing divs down the page and ruining the column structure, presumably because these divs no longer fit (?). My overall layout does have a mix of columns for tablet and desktop, which degrade to a single column for the mobile.
Any help teaching an ol' dog a new trick would be much appreciated!

If you're using other HTML tags like <li> <address> <cite> <code> <blockquote> etc... you'll need to create padding styles for those, too. Usually the padding will not appear if you haven't enclosed text or images inside an appropriate tag.
Nancy O.

Fluid Layout - Background Image

Hello All,
First I'll explain what I did and what I'm hoping to see. I created a fluid grid layout. Below the fluid grid layout, added a div that extends 100% width that's not part of the fluid grid. So I inserted an image by going to the Commons tab and selected image, I was then able to browse for the image I wanted and then inserted it. once inserted I see it scales correctly on all 3 devices. Now I would like to add text over this image but I can not do that. I can only put text either above or below the inserted image. So I deleted the image, selected the div and inserted the image by going into my Properties panel and imported it as a background image. But as you guys may know, I had to set a specific height, for the image to be view and it doesn't even scale correctly on all device outputs. But that was the only way I could insert text over the image.
What am I doing wrong? All I want is to have a background that's scaleable on all viewports with the text on top of the image. Maybe there's a tutorial that can help me out with this.
HELP!
Thanks in advance.
P.S. Here's the simple code that I have.
<div class="gridContainer clearfix">
<div id="div1" class="fluid">Use Insert Panel for mhvkhhadditional Fluid Grid Layout Elements. Note: All Fluid Layout tags must be contained within the "gridContainer" div tag.</div>
</div>
<div>This is the content for Layout Div Tag</div>

You really must use a Background in the CSS. You cannot position image & overlay elements in Responsive Web Designs. It simply won't work well.
Resizable Full Page Background Image
I prefer to use CSS Gradients or solid background colors which is much less bandwidth for mobile data plans to absorb.
Ultimate CSS Gradient Generator - ColorZilla.com
Nancy O.

Fluid layout problem

I have decided to rebuild my site from a fixed with layout to fluid/responsive. So far, I've set up a test page with a fluid layout, but it's not working as expected. See http://www.perberntsen.com/responsive_test.html
The relevant css is in the page.
When I make the browser window smaller, the columns will resize, but the rightmost column will drop down much too early, leaving lots of white space. (It does continue to resize, although out of sight.) I am planning to use media queries, but I dont't think they should be neccessary to achieve what I'm trying to do.
Things I've tried:
Removing min-width on the menu (didn't help)
Removing the header (didn't help)
Using position:relative (didn't help)
I've also read Ethan Marcotte's book on the subject as well as various articles on the internet.
Would be very grateful if someone could point me in the right direction ...
Edit: I also tried disabling external css and javascript, both of which didn't help. I am pretty sure the answer lies in the css.

No knowledge of responsive, but narrowing the min width to 150 looked pretty good in FF
#nav {
    background-color: #F4F4F4;    border: 1px dotted #505050;
    float: left;
    margin-top: 0;
    min-width: 150px;
    width: 15.3333%;

Apply Fluid Layout to existing site?

Has anyone been able to apply the CS6 Fluid Layout to existing Dreamweaver site pages? I have about 1000 pages, all template-based that I wojld love to convert to Fluid Layout if there is a reasonably efficient way to do it. Any info or a link to a tutorial on this would be appreciated. I am going crosseyed right now from all of the searching!

I don't have CS6, so I don't know what the Fluid Grid Layout is that Murray's talking about. But if what you are trying to do is to create pages that fill the browser window, that's easy.
And I think you don't have to alter your template(s) -- it can be done in your style sheet.
Almost all web pages have an outer "wrapper" that everything else (save the body) lives in. So, for a fixed-width website, you do the following:
#wrapper {
               margin: 0 auto; /* this centers your main content in the web page */
               width: 980px; /* This is the maximum width of your website in pixel units. */
For a fluid width, you do the following:
#wrapper {
     margin: 0 auto; /* this centers your main content in the web page */
     width: 100%; /* this sets the width to the viewport */
Now, one thing I do like to do is specify a minimum width, which I do in the body:
body {
          min-width: 760px;
I also like the CSS Tricks example, which specifies minimums and maximums, giving you "fluidity" up to a point.

Fluid layout

Hi,
I am trying to build a site with fluid layout. I have three
classes: Preloader, Main and Background.
Preloader loads main.swf and has resize function where it can
access Background like so:
Sprite(loader.content).getChildAt(0).y = stage.stageHeight -
Sprite(loader.content).getChildAt(0).height;
Main has an instance of Background.
Background draws vertical lines. It uses fluid layout on its
own. Works fine.
Here is the catch:
Background utilizes stage.stageWidth and stage.stageHeight,
when tested with separate fla works like charm. However, when
accessed thru Preloader throws this error: Error #1009: Cannot
access a property or method of a null object reference. I think it
is because use of stage but I don't know how to go about it.
It also uses its own resize function.
So, what is the best way to put it all together? Where should
I keep resize function? What I need to do with stage object in
Background?
Hopefully I explain more or less coherently what is the
problem.
Here is abbreviated code for all three classes:

I just used the publish settings myself don't know if it will
help you it worked for me on this site.
http://www.cybermountainwebservices.com/client0/date/
settings:
http://www.mespinach.com/fluid.gif

Fluid layout since the beginning

hello.
i have a website with a fluid layout. in the website i have only one element that is "fluid" (it's kind of a mediaplayer which is suppoused to be always in the center of the page).
i write some line of code...and it works...but only if i resize the page...i wish to have it in the center since the beginning.
here it's the code:
// LAYOUT CONTROL -----------------------------------------------------------------------
addEventListener (Event.ADDED_TO_STAGE, onAdded);
function onAdded ( e:Event ):void
    stage.align = StageAlign.TOP_LEFT;
    stage.scaleMode = StageScaleMode.NO_SCALE;
    stage.addEventListener (Event.RESIZE, resizePage);
// resizePage ------------------------------------------------------
function resizePage ( e:Event = null ):void
    if ( stage )
bg.x = stage.stageWidth / 2 ;
bg.y = stage.stageHeight / 2 ;
media.x = stage.stageWidth / 2 ;
media.y = stage.stageHeight / 2 ;
resizePage ();

You could try it like so:
// LAYOUT CONTROL -----------------------------------------------------------------------
addEventListener (Event.ADDED_TO_STAGE, onAdded);
function onAdded ( e:Event ):void
    stage.align = StageAlign.TOP_LEFT;
    stage.scaleMode = StageScaleMode.NO_SCALE;
    stage.addEventListener (Event.RESIZE, resizePage);
     resizePage ();
// resizePage ------------------------------------------------------
function resizePage ( e:Event = null ):void
    if ( stage )
bg.x = stage.stageWidth / 2 ;
bg.y = stage.stageHeight / 2 ;
media.x = stage.stageWidth / 2 ;
media.y = stage.stageHeight / 2 ;

Fluid Layout - stop changing resize position when movieclip is at certain position

Hello. I have been trying things out for hours, and I still can't get it.
I am following this Fluid Layout tutorial: http://active.tutsplus.com/tutorials/web-design/build-a-fluid-website-layout/
I added a Menu_mc on my stage. Initially, this should be at the center of the stage and when I click on it, it will tween on the upper left corner of the browser. However, when I resize the browser, the Menu_mc goes back to the center of the screen.
I have tried separating a different actionscript file where it is specifically for initialization of the object and another one for resizing. And then when I call it on my main AS file it goes like this:
// Add the symbols to stage
             var Menu_mc = new Menu_MC();
             addChild(Menu_mc);
             // Apply the alignment to the middle
             var Menu_InitParam = {
                 x:0.53,
                 y:0.35,
                 offsetX: -Menu_mc.width/2,
                 offsetY: -Menu_mc.height/2
             new InitFluidObject(Menu_mc,Menu_InitParam);
             var Menu_ResizeParam = {
                 x:Menu_mc.x,
                 y:Menu_mc.y,
                 offsetX: -Menu_mc.width/2,
                 offsetY: -Menu_mc.height/2
             new FluidObject(Menu_mc,Menu_ResizeParam);
But it seems futile. Could anyone please help? Thanks a lot!

Do you have any useful resources that I could perhaps check out? Haven't explored ANY javascript before =)

Fluid layout suddenly hosed in DW - but renders fine in browser

Even though I'd seen some warnings about making changes to margains when using fluid layouts, I was trying to center an image in a div and changed the margain. Suddenly, the 'desktop' layout for the page wouldn't display correctly in the Design tab. I thought I'd hosed the entire page, but I tried viewing it in Firefox - and it works perfectly.
In the Design view, when showing the 'desktop' view, it only shows the header and first div as being within the fluid grid. I figured that meant I'd entered some errant character either in the CSS about that point or the source code. No joy in either location.
Also, I can visually edit the sizes of the divs (which all show as fluid in 'tablet' and 'mobile' sizes) in the two smaller sizes, but not in the 'desktop' view. Even the two divs that show as fluid cannot be resized in the desktop view - though they are selectable and show the sizing handles.
Is the feature so new that it's this buggy? Or am I missing something else?
Also - how much should boilerplate.css change? Should mods be made to this file?
I'm NOT an expert in DW, CSS or HTML, so I'd be perfectly willing to accept I've done something wrong.

It's called me being an idiot. I removed a bracket from the end of the tablet size mediaquery in my main stylesheet.

Where is the design button on fluid layout

In the latest version of DW when editing a fluid layout there is no 'design' button option, only 'code', 'split' and 'live. Earlier versions have a 'design' view option. What gives?

if you go vote here, maybe they'll put it back in...
Provide "Design View" for Fluid Grid Webpages
I may be wrong but I think the chances of this are slim to none and slim just left town.
Nancy O.

Dreamweaver fluid layouts

If I have a website done in Dreamweaver (done for computer screens) and I want to use fluid layouts to make this for devices and pads, do I have to start from scratch to create a new site, or can I bring my files in from my existing site?

If you're using the Fluid Grid tool, starting over and designing using the "mobile first" approach would be the way to do it. FG's are built with the idea that the global attributes are for a mobile device, then the media queries overwrite them for tablets and then desktops. Starting with the desktop design and working backwards would be pretty frustrating.
That being said, depending on how you set the site up html-wise, it may not be very difficult at all to add your own Media Queries (not using the FGL tools) to it to change styling for smaller devices.
Could you share a link to your site in progress?

Fluid layouts and jquery?

Similar Messages

Maybe you are looking for