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.

Similar Messages

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.

Pages not rendering properly in DW CS4, but renders correctly in browsers

Hello,
I created a web page in CS4 and the layout is skewed when viewed in DW, but renders correctly in FF and IE: here is a link to my page.
I ran the HTML and CSS through the WC3 validators and there were two minor errors in both files that I corrected, but it still renders incorrectly in DW. Basically, the divs in the middle area, #display and #news, are rendering too wide and tall, so the whole layout is stretched out. The background images don't stretch so there are white spaces to the right and the bottom of the BG images in both divs.
This page renders fine in FF and IE so I'm not sure what the issue is. I'm currently learning how to use DW. I originally hand coded the page in notepad and then copied/pasted it into DW so I'm not sure if that has anything to do with the rendering issue.
I did peruse this forum first but I could'nt find a post that helped me so I'd apprciate input from someone who may be familiar with this issue.
Thanks!
Ana

Ana Seyer wrote:
I've done a little more searching for the answer to my problem and have discovered from other users in other forums that this rendering issue is a problem with DW's design view document window if you create your page in code view. Some users have
It doesn't matter wether you create the page in code view or design view.....html is html...... it will view exactly the same...so this sounds like a lot of nonsense.
Ana Seyer wrote:
I copied and pasted the code from several other websites and pasted them into files in DW and they all rendered differently to some degree or another in design view, from their browser correctness. Some of them rendered accurately in live view, some didn't. My page was just skewed a little more than others.
Yes, you will find that Dreamweaver IS NOT perfect at rendering a page, although it can be depending on how you write the css. As I said before your code and css viewed perfectly in my copy of DWCS4 (Mac)....so there has to be differences across platform software if your copy of DW doesnt show what I am seeing.
Ana Seyer wrote:
So I'm not going to worry about it for now and just keep viewing changes in my browsers. Hopefully this will be corrected in future versions of DW becase haveing a quick peek in live view is so convenient.
Correct, only how the page renders in a browser matters, although it is nice to visually see what the page looks like in Design View without the necessity of keep viewing live. I wouldn't hang your hat on Dreamweaver ever being perfect because Css moves on before it can completely catch up. It gets better version by version but it's never going to be perfect due to the fast moving environment of the web.

Full width preloader for fullscreen layout/fluid layout

Hi,
I'm new to this forum. I need help to figure out how to make the preloader works on the full screen website/ fluid layout. I add the Stage.resize on the code for FYI. When I added this code to the bar, it expanded to full screen, but there's no loading bar. The text is also no progress. Help please. Thanks

I really need help for this. FYI, I have:
Stage.align
stage.scaleMode
stage.addEventListener
to make the bar to fullscreen. Any idea why the bar is not working? Thanks

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 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.

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 =)

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.

Image in fluid layout

Hi!
If I have a small image in a fluid layout column which is the best practice for having the image's width adjust to the column width while still remaining proportional with its height?
Thanks!
kt

I am not sure about fixed height but to scale your image to your DIV width then this CSS will work?:
img {
width: inherit;
I suspect the height will also scale proportionately but another method is to use JavaScript which is for another forum to deal with. This one is for pure DW.
Your HTML might look like this:
<img alt="pict01" src="http://www.psaltiki.org/_images/hagios_cover_small.jpg">
<img alt="pict02" height="300px" src="sinai_syrmatiki.jpg">
The second image contains a constrained height with a width of inherited from your DIV.

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?

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

Similar Messages

Maybe you are looking for