Liquid layout CSS

Hello,
I want the content part of my website run the length of the
borwser but have the page background at the top and bottom of
content. (basically have the webpage appear as a banner the middle
of the screen ontop of a tiled bakground)
I have been experimenting and found if I put the left margin
-10pixels that side of the webpage appears as desired (body div
meets edge) but I can not work out how to make the right side do
the same.
Can some one suggest a tutorial that would help me with this
layout or offer me some helpful advice.
Thank you,
Shontelle

Liquid Layouts (% based) are not the easiest bad boys to work with. They become an unruly mess on ultra wide and ultra narrow displays.
Example of the Ugly. Resize viewport to 400px.
http://alt-web.com/TEMPLATES/3-col-liq-layout.shtml
The solution. http://alt-web.com/TEMPLATES/3-col-semi-liq-layout.shtml
Add min- and max-widths to your body. This is called a semi-liquid layout.
Nancy O.

Similar Messages

Help with spry menu bar in liquid layout

I need help getting a spry menu bar with a 6-item list to stay in place in a liquid layout. Trying to get it horizontally under the header image. I am new to web design (new to html and code: reading books, searching web, and doing tutorials for many hours now), using CS4, working on a mac. You can view my trial page on cc-tn.com. I would appreciate any help offered!

Problem stems from the fact that your page is looking for files contained on your local hard drive instead of the web site.
<script src="file:///Macintosh HD/Users/Allison/CC Web/Templates/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="file:///Macintosh HD/Users/Allison/CC Web/Templates/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
In addition, the links to PDF files are pointing to your local hard drive.
p><a href="file:///Macintosh HD/Users/Allison/CC Web/Documents/Foundations_one-page_green.pdf">Foundations</a> is a grammar-stage program for students K4 through sixth grade. Parents attend morning classes with their children as trained tutors model the tools of learning facts from a variety of interesting subjects. Students also participate in science and fine arts projects and practice public speaking each week.</p>
<p><a href="file:///Macintosh HD/Users/Allison/CC Web/Documents/Essentials-One-page.pdf">Essentials</a> is a dialectic-stage program for students in third through sixth grade. Trained tutors model the dialectic tools of learning in English grammar, writing, and math drills. Emphasis is placed on the development of writing skills that will enable students to become effective communicators through the written word. Classes meet in the afternoon following lunch.</p>
<p><a href="file:///Macintosh HD/Users/Allison/CC Web/Documents/Challenge_one-page.pdf">Challenge A & B</a> are dialectic-stage programs for seventh and eighth graders. Emphasis is placed on group discussion as students become more independent learners. Students focus on logic and debate.</p>
Did you define a local site folder in DW before you began this project? Without this critical first step, DW cannot correctly manage assets for you.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Liquid layout site not scaling correctly in large browsers

I have built a liquid layout Flash site using AS3 but it isn't scaling correctly once I go above 1280x1024. I am currently using a Mac screen with dimensions of 2560x1440 and it looks terrible. The menu pushes to the top and the bg and page info stays central but with no scale.
The website is: http://www.khawkinsdesign.com
The HTML is 100% w+h so it's obviously something within the AS3 code. This is causing me nightmares so if someone could take a look at the code pasted and see if there is a way to resolve this it would be greatly appreciated.
---//CODE//---
package {
    import flash.events.MouseEvent;
    import fl.transitions.Tween;
    import fl.transitions.TweenEvent;
    import fl.transitions.easing.*;
    import flash.display.*;
    import FluidLayout.*;
    import flash.events.Event;
    import flash.net.URLLoader;
    import flash.net.URLRequest;
    import Classes.Lights;
     public class Website extends MovieClip{
         public function Website() // this function ensures that when the website is added to stage the Website() class is called
             this.addEventListener(Event.ADDED_TO_STAGE, init);
             public function init(e:Event):void
             /* Set the Scale Mode of the Stage */
             stage.scaleMode = StageScaleMode.NO_SCALE;
             stage.align = StageAlign.TOP_LEFT;
             /* Add the symbols to stage */
             var bg = new bgHome();
             addChild(bg);
             var menu = new Menu();
             addChild(menu);
             var title = new Title();
             addChild(title);
             var home = new Home();
             addChild(home);
             var subCategory = new homeCategory();
             //addChild(subCategory);
             var footer = new Footer();
             addChild(footer);
             /* Apply the alignment to the background */
             var bgParam = {
                 x:0.5,
                 y:0.5,
                 offsetX: 0,
                 offsetY: 0
             new FluidObject(bg,bgParam);
             /* Apply the alignment to the title */
             var titleParam = {
                 x:0,
                 y:0,
                 offsetX: 0,
                 offsetY: 0
             new FluidObject(title,titleParam);
             /* Apply simple alignment to the title */
             /*var titleParam = {
                 alignment: "TOP_LEFT",
                 margin: 0
             new SimpleFluidObject(title,titleParam);*/
         var menuParam = {
                 x:0.5,
                 y:0,
                 offsetX:0,
                 offsetY:0
             /* Apply the alignment to the menu */
             new FluidObject(menu,menuParam);
             /* Apply the alignment to the content */
             var middleParam = {
                 x:0.5,
                 y:0.5,
                 offsetX: 0,
                 offsetY: 0
                 //offsetX: -home.width/2,
                 //offsetY: -home.height/2
             new FluidObject(home,middleParam);
             var leftParam = {
                 x:0.15,
                 y:0.5,
                 offsetX: 0,
                 offsetY: 0
             //new FluidObject(subCategory,leftParam);
             /* Apply the alignment to the footer */
             var footerParam = {
                 x:0,
                 y:1,
                 offsetX: 0,
                 offsetY: 0
             new FluidObject(footer,footerParam);
//-----DEVIN PAGE CODE START ---- \\
             //buttons
             eventListeners(); //Turns on button event listeners
             handCursors(); //Turns on Hand Cursors at site launch
             //remove home button event listeners since that's the default
             menu.home_btn.removeEventListener(MouseEvent.MOUSE_OVER, btnOver);
             menu.homeHit_mc.removeEventListener(MouseEvent.MOUSE_OVER, btnOver);
             menu.home_btn.removeEventListener(MouseEvent.MOUSE_OUT, btnOut);
             menu.homeHit_mc.removeEventListener(MouseEvent.MOUSE_OUT, btnOut);
             menu.home_btn.removeEventListener(MouseEvent.CLICK, btnHome);
             menu.homeHit_mc.removeEventListener(MouseEvent.CLICK, btnHome);
             menu.home_btn.useHandCursor = false; //Turns off Hand Cursor for Home Button (that's the first page)
             menu.homeHit_mc.useHandCursor = false;
             currentButton = menu.home_btn;   // the current Button variable (declared below) ensures the buttons flip back once another page is selected
             menu.homeHit_mc.targetmc = menu.home_btn; // Creates the targetmc variable so the buttons can flip
             menu.aboutHit_mc.targetmc = menu.about_btn;
             menu.webHit_mc.targetmc = menu.web_btn;
             menu.contactHit_mc.targetmc = menu.contact_btn;
             menu.infoHit_mc.targetmc = menu.info_btn;
             menu.home_btn.targetmc = menu.home_btn; // Creates the targetmc variable so the buttons can flip
             menu.about_btn.targetmc = menu.about_btn;
             menu.web_btn.targetmc = menu.web_btn;
             menu.contact_btn.targetmc = menu.contact_btn;
             menu.info_btn.targetmc = menu.info_btn;
             function eventListeners():void
                 menu.homeHit_mc.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
                 menu.aboutHit_mc.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
                 menu.webHit_mc.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
                 menu.contactHit_mc.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
                 menu.infoHit_mc.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
                 menu.home_btn.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
                 menu.about_btn.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
                 menu.web_btn.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
                 menu.contact_btn.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
                 menu.info_btn.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
                 menu.homeHit_mc.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
                 menu.aboutHit_mc.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
                 menu.webHit_mc.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
                 menu.contactHit_mc.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
                 menu.infoHit_mc.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
                 menu.home_btn.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
                 menu.about_btn.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
                 menu.web_btn.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
                 menu.contact_btn.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
                 menu.info_btn.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
                menu.homeHit_mc.addEventListener(MouseEvent.CLICK, btnHome);
                 menu.aboutHit_mc.addEventListener(MouseEvent.CLICK, btnAbout);
                 menu.webHit_mc.addEventListener(MouseEvent.CLICK, btnWeb);
                 menu.contactHit_mc.addEventListener(MouseEvent.CLICK, btnContact);
                 menu.infoHit_mc.addEventListener(MouseEvent.CLICK, btnInfo);
                 menu.home_btn.addEventListener(MouseEvent.CLICK, btnHome);
                 menu.about_btn.addEventListener(MouseEvent.CLICK, btnAbout);
                 menu.web_btn.addEventListener(MouseEvent.CLICK, btnWeb);
                 menu.contact_btn.addEventListener(MouseEvent.CLICK, btnContact);
                 menu.info_btn.addEventListener(MouseEvent.CLICK, btnInfo);
             function handCursors():void    //turns on button mode for all buttons
                 menu.home_btn.buttonMode=true;   // Must turn movieclips on buttonMode
                 menu.homeHit_mc.buttonMode=true;
                 menu.about_btn.buttonMode=true;
                 menu.aboutHit_mc.buttonMode=true;
                 menu.web_btn.buttonMode=true;
                 menu.webHit_mc.buttonMode=true;
                 menu.contact_btn.buttonMode=true;
                 menu.contactHit_mc.buttonMode=true;
                 menu.info_btn.buttonMode=true;
                 menu.infoHit_mc.buttonMode=true;
                 menu.home_btn.useHandCursor=true;
                 menu.homeHit_mc.useHandCursor=true;
                 menu.about_btn.useHandCursor=true;
                 menu.aboutHit_mc.useHandCursor=true;
                 menu.web_btn.useHandCursor=true;
                 menu.webHit_mc.useHandCursor=true;
                 menu.contact_btn.useHandCursor=true;
                 menu.contactHit_mc.useHandCursor=true;
                 menu.info_btn.useHandCursor=true;
                 menu.infoHit_mc.useHandCursor=true;
             function btnOver(e:MouseEvent):void
                 e.currentTarget.targetmc.gotoAndPlay("over");
             function btnOut(e:MouseEvent):void
                 e.currentTarget.targetmc.gotoAndPlay("out");
//-----------PAGE FUNCTIONS ------------ \\
            var exitTween:Tween;
             var bgTween:Tween;
             var currentBg:MovieClip = bg;
             var prevBg:MovieClip;
             var prevPage:MovieClip;
             var currentPage:MovieClip = home;
             var currentButton:MovieClip;
             function btnHome(e:MouseEvent):void
                 e.currentTarget.targetmc.gotoAndPlay("click");
                 exitTween = new Tween(currentPage, "x", Strong.easeInOut, currentPage.x, currentPage.x + 1000, 30, false);   //animate off old page
                 prevPage = currentPage;
                 currentPage = new Home();
                 addChildAt(currentPage, 4); //adds the about page to the stage
                 exitTween.addEventListener(TweenEvent.MOTION_STOP, animateOn);
                 currentPage.x = stage.stageWidth/2 -1000;
                 currentPage.y = stage.stageHeight/2;
                bgTween = new Tween(currentBg, "alpha", Regular.easeOut, 1,0, 30, false); // This calls on the bgTween variable and fades oyt the currentBg
                 prevBg = currentBg;
                 currentBg = new bgHome();
                 bgTween.addEventListener(TweenEvent.MOTION_FINISH, bgOn);
                 addChildAt(currentBg,0);
                 currentBg.x = stage.stageWidth/2;
                 currentBg.y = stage.stageHeight/2;
                 eventListeners();
                 menu.homeHit_mc.removeEventListener(MouseEvent.MOUSE_OUT, btnOut);
                 menu.homeHit_mc.removeEventListener(MouseEvent.CLICK, btnHome);
                 menu.homeHit_mc.removeEventListener(MouseEvent.MOUSE_OVER, btnOver);
                 menu.home_btn.removeEventListener(MouseEvent.MOUSE_OUT, btnOut); //Disable Mouse Out functionality
                 menu.home_btn.removeEventListener(MouseEvent.CLICK, btnHome); //Disable Mouse Click functionality
                 menu.home_btn.removeEventListener(MouseEvent.MOUSE_OVER, btnOver);
                 handCursors();
                 menu.homeHit_mc.useHandCursor = false;
                 menu.home_btn.useHandCursor = false;
                 btnFlip();
                 currentButton = menu.home_btn;
             function btnAbout(e:MouseEvent):void
                 e.currentTarget.targetmc.gotoAndPlay("click");
                 exitTween = new Tween(currentPage, "x", Strong.easeInOut, currentPage.x, currentPage.x + 1000, 30, false);   //animate off old page
                 prevPage = currentPage;
                 currentPage = new About();
                 addChildAt(currentPage, 4); //adds the about page to the stage
                 exitTween.addEventListener(TweenEvent.MOTION_FINISH, animateOn);
                 currentPage.x = stage.stageWidth/2 - 1000;
                 currentPage.y = stage.stageHeight/2;
                 bgTween = new Tween(currentBg, "alpha", Regular.easeOut, 1,0, 30, false); // This calls on the bgTween variable and fades oyt the currentBg
                 prevBg = currentBg;
                 currentBg = new bgAbout();
                 bgTween.addEventListener(TweenEvent.MOTION_FINISH, bgOn);
                 addChildAt(currentBg,0);
                 currentBg.x = stage.stageWidth/2;
                 currentBg.y = stage.stageHeight/2;
                 eventListeners();
                 menu.aboutHit_mc.removeEventListener(MouseEvent.MOUSE_OUT, btnOut);
                 menu.aboutHit_mc.removeEventListener(MouseEvent.CLICK, btnAbout);
                 menu.aboutHit_mc.removeEventListener(MouseEvent.MOUSE_OVER, btnOver);
                 menu.about_btn.removeEventListener(MouseEvent.MOUSE_OUT, btnOut); //Disable Mouse Out functionality
                 menu.about_btn.removeEventListener(MouseEvent.CLICK, btnAbout); //Disable Mouse Out functionality
                 menu.about_btn.removeEventListener(MouseEvent.MOUSE_OVER, btnOver);
                 handCursors();
                 menu.aboutHit_mc.useHandCursor = false;
                 menu.about_btn.useHandCursor = false;
                 btnFlip();
                 currentButton = menu.about_btn;
            function btnWeb(e:MouseEvent):void
                 e.currentTarget.targetmc.gotoAndPlay("click");
                 exitTween = new Tween(currentPage, "x", Strong.easeInOut, currentPage.x, currentPage.x + 1000, 30, false);   //animate off old page
                 prevPage = currentPage;
                 currentPage = new Web();
                 addChildAt(currentPage, 4); //adds the about page to the stage
                 exitTween.addEventListener(TweenEvent.MOTION_FINISH, animateOn);
                 currentPage.x = stage.stageWidth/2 - 1000;
                 currentPage.y = stage.stageHeight/2;
                 bgTween = new Tween(currentBg, "alpha", Regular.easeOut, 1,0, 30, false); // This calls on the bgTween variable and fades oyt the currentBg
                 prevBg = currentBg;
                 currentBg = new bgWeb();
                 bgTween.addEventListener(TweenEvent.MOTION_FINISH, bgOn);
                 addChildAt(currentBg,0);
                 currentBg.x = stage.stageWidth/2;
                 currentBg.y = stage.stageHeight/2;
                 eventListeners();
                 menu.webHit_mc.removeEventListener(MouseEvent.MOUSE_OUT, btnOut);
                 menu.webHit_mc.removeEventListener(MouseEvent.CLICK, btnWeb);
                 menu.webHit_mc.removeEventListener(MouseEvent.MOUSE_OVER, btnOver);
                 menu.web_btn.removeEventListener(MouseEvent.MOUSE_OUT, btnOut); //Disable Mouse Out functionality
                 menu.web_btn.removeEventListener(MouseEvent.CLICK, btnWeb); //Disable Mouse Out functionality
                 menu.web_btn.removeEventListener(MouseEvent.MOUSE_OVER, btnOver);
                 handCursors();
                 menu.webHit_mc.useHandCursor = false;
                 menu.web_btn.useHandCursor = false;
                 btnFlip();
                 currentButton = menu.web_btn;
             function btnContact(e:MouseEvent):void
                 e.currentTarget.targetmc.gotoAndPlay("click");
                 exitTween = new Tween(currentPage, "x", Strong.easeInOut, currentPage.x, currentPage.x + 1000, 30, false);   //animate off old page
                 prevPage = currentPage;
                 currentPage = new Contact();
                 addChildAt(currentPage, 4); //adds the about page to the stage
                 exitTween.addEventListener(TweenEvent.MOTION_FINISH, animateOn);
                 currentPage.x = stage.stageWidth/2 - 1000;
                 currentPage.y = stage.stageHeight/2;
                 bgTween = new Tween(currentBg, "alpha", Regular.easeOut, 1,0, 30, false); // This calls on the bgTween variable and fades oyt the currentBg
                 prevBg = currentBg;
                 currentBg = new bgContact();
                 bgTween.addEventListener(TweenEvent.MOTION_FINISH, bgOn);
                 addChildAt(currentBg,0);
                 currentBg.x = stage.stageWidth/2;
                 currentBg.y = stage.stageHeight/2;
                 eventListeners();
                 menu.contactHit_mc.removeEventListener(MouseEvent.MOUSE_OUT, btnOut);
                 menu.contactHit_mc.removeEventListener(MouseEvent.CLICK, btnContact);
                 menu.contactHit_mc.removeEventListener(MouseEvent.MOUSE_OVER, btnOver);
                 menu.contact_btn.removeEventListener(MouseEvent.MOUSE_OUT, btnOut); //Disable Mouse Out functionality
                 menu.contact_btn.removeEventListener(MouseEvent.CLICK, btnContact); //Disable Mouse Out functionality
                 menu.contact_btn.removeEventListener(MouseEvent.MOUSE_OVER, btnOver);
                 handCursors();
                 menu.contactHit_mc.useHandCursor = false;
                 menu.contact_btn.useHandCursor = false;
                 btnFlip();
                 currentButton = menu.contact_btn;
             function btnInfo(e:MouseEvent):void
                 e.currentTarget.targetmc.gotoAndPlay("click");
                 exitTween = new Tween(currentPage, "x", Strong.easeInOut, currentPage.x, currentPage.x + 1000, 30, false);   //animate off old page
                 prevPage = currentPage;
                 currentPage = new Info();
                 addChildAt(currentPage, 4); //adds the about page to the stage
                 exitTween.addEventListener(TweenEvent.MOTION_FINISH, animateOn);
                 currentPage.x = stage.stageWidth/2 - 1000;
                 currentPage.y = stage.stageHeight/2;
                 bgTween = new Tween(currentBg, "alpha", Regular.easeOut, 1,0, 30, false); // This calls on the bgTween variable and fades oyt the currentBg
                 prevBg = currentBg;
                 currentBg = new bgInfo();
                 bgTween.addEventListener(TweenEvent.MOTION_FINISH, bgOn);
                 addChildAt(currentBg,0);
                 currentBg.x = stage.stageWidth/2;
                 currentBg.y = stage.stageHeight/2;
                 eventListeners();
                 menu.infoHit_mc.removeEventListener(MouseEvent.MOUSE_OUT, btnOut);
                 menu.infoHit_mc.removeEventListener(MouseEvent.CLICK, btnAbout);
                 menu.infoHit_mc.removeEventListener(MouseEvent.MOUSE_OVER, btnOver);
                 menu.info_btn.removeEventListener(MouseEvent.MOUSE_OUT, btnOut); //Disable Mouse Out functionality
                 menu.info_btn.removeEventListener(MouseEvent.CLICK, btnAbout); //Disable Mouse Out functionality
                 menu.info_btn.removeEventListener(MouseEvent.MOUSE_OVER, btnOver);
                 handCursors();
                 menu.infoHit_mc.useHandCursor = false;
                 menu.info_btn.useHandCursor = false;
                 btnFlip();
                 currentButton = menu.info_btn;
             function animateOn(e:TweenEvent):void
                 new FluidObject(currentPage,middleParam);
                   removeChild(prevPage);
             function bgOn(e:TweenEvent):void
                 new FluidObject(currentBg, bgParam);
                 removeChild(prevBg);
             function btnFlip():void
                 currentButton.gotoAndPlay("out");
//-----DEVIN PAGE CODE END ---- \\
Message was edited by: Kyle Hawkins
Message was edited by: Kyle Hawkins

hi kyle, mi internet its very slow and i couldnt open your site, but the problem could be on the html, i use css that help a lot to htnl, y copy the code im using in my site:
html,body {
background-color: #000;
padding: 0px;
height: 100%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
overflow:hidden;
.container {
padding: 0px;
height: 100%;
width: auto;
margin-top: 0px;
margin-bottom: 0px;
html and the body share the same css style, pay atention to the last line(overflow)
the container its a div where i inserted the swf.
hope it help you fix the problem

Sizing confusion with Liquid Layout

Hello,
I am attempting my first site. I have read the Dreamweaver CS3 Missing Manual (and done the tutorials), so I have a grasp of Dreamweaver and it's powers, but by no means do I consider myself anything but a beginner.
I have chosen to create a liquid 2 column layout with header and footer using Adobe's layouts to get a handle on the basics. When it opens, it's default 100% size in DW is 969x530. When I shrink the browser, it shrinks too, which I know is obviously the nature of a liquid layout.
This is my question: how am I supposed to size my banner and images in Photoshop or Fireworks to fit into this layout if the sizing changes whenever I change my browser size? Do I use the default Adobe gave me and size my images around that, or should I make my document size smaller, say to 795x470 (832x624 maximized)?
Thanks for any help. This question may seem easy, but it's stopping me continuing on with the site.
Jen

You need to make your banner liquid as well, like the other gentleman said.
What might help to understand how this is done is by looking at websites the have liquid banners. Here's a web site I finished a few weeks ago:
www.aplusoutdoorcinema.com
If you right click on the marquee and choose view image, you will see that the main graphic is a fixed size. Then if you right-click on the stars to the right of the marquee and in the menu choose view background image, you will see a graphic of stars. This graphic is repeated diagonally across the banner (repeat-x). I used a min-width to keep the moon from crashing into the marquee (unfortunately, IE6 does not recognize the min-width property).
Often the background image that repeats across a banner is only 1 pixel wide if its just a color. My background image in the example I gave is wide because I needed a variety of stars
Here's a simpler example on CSS Zen Garden:
http://www.csszengarden.com/?cssfile=017/017.css
If you are not acquainted with CSS Zen Garden, it's a showcase for CSS sites and it also invites anyone to download the XHTML or the CSS. So you can download the css on this site, examine the code, and see how they did it.
If you read David McFarland's book, you are off to a great start.
Good luck,
John

RWD, liquid layouts, text wrapping at smaller screen size

It seems like for anyone looking to break into web dev these days, the RWD is a must learn. In a perfect world the concept seems pretty simple: page-specific css, plus media queries. So, do I code based on a strict liquid layout, content/container=%. What about the block text inside, is that set to em or px? I currently have em's and my layout shrinks nicely but the text does not appear to shrink along w the smaller div.
I know liquid layouts can become hairy. Do open source frameworks like Bootstrap or Gumby provide the structure to overcome that, or is ensuring a smooth responsive design really more up to the developer and the effort put into troubleshooting anyways. The reason I ask is I currently can't afford to upgrade to cs6 from cs5. Thank you.

DW is just a tool. What matters most is the talent and effort you bring to the project.
In the following example, I used CSS Media Queries to set the body base font size in %.
Mobile = 75%, tablet = 100%, desktop = 135%.
http://alt-web.com/FluidGrid/Fluid2.html
Nancy O.

Trouble with liquid layout...

Hi,
I am trying to layout a site with CSS in a liquid style. This
is the first time im using a liquid layout and find it pretty
confusing.... The site is
here. The problem im currently
having is the block of text and image in the main content area (in
white with the guy with the megaphone) looks different in Internet
Explorer and Firefox and i cant work out why this is. Firefox
places it higher up the page and explorer places it lower down the
page....
How can i get them to be the same distance from the top? Any
ideas?
Thanks....

Hello
You should validated your code. I think one of your problems
is that you might have a missing </div> tag. There are one or
two other easily repaired problems highlighted in the validator. I
think the bottom of your page needs to look like this:
<div id="footer">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">lessons</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">resources</a></li>
</ul>
</div>
</div>
</body>
</html>
If you want your page centered, you're missing margin: 0
auto; in your CSS for #wrapper; like so:
#wrapper {
background-color:#FFFFFF;
max-width:1000px;
min-width:810px;
padding:10px;
text-align:left;
width:90%;
margin: 0 auto;
You need to think whether using relative positioning is a
good idea if you don't need it. If you need to fiddle about with
placement of elements in your page I'd suggest researcing the float
property and the Box Model. There's plenty out there to read.
I add the caveat that I am clinging by my fingernails to the
level slightly above "Novice." I don't use relative positioning for
example, because I don't understand it!
Kind regards
Martin

Widget slide show and liquid layout

I am trying to use the widget slide show in a liquid layout and I need the slideshow to resize. I used the width 100% and tried the height set to auto but the image hight does not resize. how do I get the slideshow to resize both height and width.

I'm not entirely certain the slideshow widget is scalable. Many of them are not.
You can try adding this to your CSS code:
img {max-width: 100%; height: auto !important;}
If that fails, you might want to switch to a fixed-width, centered layout. Liquid layouts are very tricky to work with.
Alternatively, you could look for a jQuery slideshow that does support % widths -- although these carry the potential for distorting your images if the aspect ratio is not maintained.
Nancy O.

Need a good liquid layout tutorial

Hi,
Im starting a page which I plan to use a liquid layout. I think I would use the three column layout (middle widest) and I would like to have an image situated in the right column. When the browser window shrinks, i would like this image to basically stay in its spot so Im guessing I would have to resize it or something. Im not totally sure. I found a tutorial the other day which showed what to do with your images. This tutorial made three different sizes of a single image to accommodate different resolutions. This is what i am going to need
Can anyone point out a good tutorial that would have this information? Ive looked everywhere and cant seem to find one that has images involved
Thanks in advance

I don't think you need 3 separate images, if you are using a liquid or flexible layout, the image will adjust within the layout as will all the other content.
Here's an Adobe tutorial on liquid layout:
For a tutorial on fluid layouts
http://www.adobe.com/devnet/dreamweaver/articles/bk_dwcs4_mastering_css/bk_dwcs4 _mastering_css_04.pdf
and another from alistapart:
http://www.alistapart.com/articles/negativemargins/
Faux column technique:
http://www.alistapart.com/articles/fauxcolumns/
Nadia
Adobe® Community Expert : Dreamweaver
http://www.perrelink.com.au
Unique CSS Templates | Tutorials | SEO Articles
http://www.DreamweaverResources.com
http://twitter.com/nadiap

Contribute CS3 having problem with liquid layout

Heya everyone! I'm hoping that someone can help me here. I'm
trying to make the leap to having layouts done in CSS and not with
tables.
Please don't blame me for the design on this one - I didn't
do it! ;)
I'm having different issues in two different versions of
contribute.
Older versions of contribute won't allow me to edit the text.
I'm guessing it has something to do with the padding on my left and
right columns that I had to use in order to get my three column
layout. Getting rid of that means totally rethinking how I did my
three column liquid layout to begin with, which isn't my favorite
option.
Contribute CS3 WILL let me edit the text in the center
column. HOORAY!
HOWEVER! I can edit it for a little while, but if I start
typing too fast or click it the wrong way the entire DIV reshapes
itself and is suddenly 10px wide! How bizarre.
What can I do to make this editable in Contribute? Does
anyone have a fix to that this is either editable by my client
(this has to go LIVE to beta on Monday!) OR does someone have a
three column liquid layout that DOES work in contribute cs3?
Thanks so much!!!
check it out here: www.cssdd.org/index.html

you can see the layout in question at www.cssdd.org - sorry
for not including it.

Need assistance with a liquid layout

Hi,
I made some posts yesterday about a liquid layout. I got a couple tutorials to go with but Im pretty lost. I designed my index page and now I need hand turning into a liquid layout. I have a very wide bg image, can it still be done with that? Also, I would like the building in the bottom right corner to stay in that position (to match up with the sun rays). Any help would be much appreciated.
Thanks in advance
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Hurry Print Imaging</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="background">
<div id="col1"> </div>
<div id="col2"><div id="logodiv" align="center"><img src="images/logo.png" alt="HurryPrint" longdesc="index.html" />
<div id="logotabdiv"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Location','','images/Location-DOWN.png',1)"><img src="images/Location-UP.png" width="85" name="Location" /></a> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Equipment','','images/Equipment-UP.png',1)"><img src="images/Equipment-DOWN.png" width="85" name="Equipment" /></a> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Services','','images/Services-UP.png',1)"><img src="images/Services-DOWN.png" width="85" name="Services" /></a> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('History','','images/History-UP.png',1)"><img src="images/History-DOWN.png" width="85" name="History" /></a></div>
<div id="maincontenttabs"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Newsletters','','images/location/newsletters-UP.png',1)"><img src="images/location/newsletters-DOWN.png" alt="Inkjet" width="75" height="16" name="Newsletters" /></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Floorplan','','images/location/floorplan-UP.png',1)"><img src="images/location/floorplan-DOWN.png" alt="Colour" width="75" height="16" name="Floorplan" /></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Map','','images/location/map-UP.png',1)"><img src="images/location/map-DOWN.png" alt="Binding" width="75" height="16" name="Map" /></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contact','','images/location/contact-UP.png',1)"><img src="images/location/contact-DOWN.png" alt="Docutech" width="75" height="16" name="Contact" /></a></div>
<div id="maincontent">
<br /><br />
<img src="images/hp-header.png" alt="HurryPrint" />
<br />
<p>Hurryprint has been upholding a longstanding family tradition for the last two decades by being a leader in providing innovative, quality printing. Owned and operated by Jamie Hurley since 1981, Hurryprint has earned a reputation for producing high quality work with quick and efficient turnaround.
At Hurryprint, we look forward to the future with enthusiasm, and eagerly anticipate providing our customers access to the most up-to-date electronic printing equipment. We are confident in our ability to supply our customers with the highest quality output available for their documents. By providing the necessary information and resources to facilitate digital file transfer, we will be constantly helping our clients to find new ways to express their thoughts and ideas in bold and creative ways.</p>
<img src="images/future-text.png" alt="At Hurry Print, the future is exciting" /> </div>
</div>
</div>
<div id="col3"><div class="buildingdiv"> </div>
</div>
<div id="footer"><img src="images/footertext.png" alt="Footer Text" /></div>
</div>
</body>
</html>
body {
    background-color:#32b8d3;
    margin:auto;
img {
    border:none;
#background {
    margin: auto;
    background-image:url(../images/bg.jpg);
    background-repeat:no-repeat;
    width:1024px;
    height:621px;
    border:#FFFFFF 2px solid;
#col1
    float: left;
    width: 20%;
    margin-left: 4%;
#col2
    float: left;
    width: 46%;
    margin-left: 4%;
#col3
    float: left;
    width: 20%;
    margin-left: 4%;
.buildingdiv {
    background-image:url(../images/building.png);
    width:196px;
    height:107px;
    margin-left:-30px;
    margin-top:410px;
#logodiv {
    position:relative; /* take out if needed */
    z-index:1;
#logotabdiv {
    margin-top:-15px;
    position:relative;
    z-index:-1;
#maincontenttabs {
    margin-top:20px;
#maincontent {
    margin-top:-5px;
    background-image:url(../images/blue-box.png);
    width:396px;
    height:351px;
    background-repeat:no-repeat;
    font-family:Arial, Helvetica, sans-serif;
    font-size:9pt;
    color:#0a3f8f;
#maincontent p {
    padding-left:10px;
    padding-right:10px;
#footer
    clear:both;
    margin-top:85px;
    text-align:right;
    float:right;
h2, p
    margin-left: 7px;
    margin-right: 7px;

Hey guys, I still need some help with my layout if anyone is willing. My code stands as it did yesterday. Didnt make any ground last night. Im starting to wonder if liquid layout is even the way to go. Thanks again in advance
body {
    background-color:#32b8d3;
    margin:auto;
    max-width:64.00em;
    max-height:38.81em;
img {
    border:none;
#background {
    /*margin: auto;*/
    background-image:url(../images/bg.jpg);
    background-repeat:no-repeat;
    width:1024px;
    height:621px;
    border:#FFFFFF 2px solid;
    bottom:15%;
    right:15%;
#col1
    float: left;
    width: 20%;
    margin-left: 4%;
#col2
    float: left;
    width: 46%;
    margin-left: 4%;
#col3
    float: left;
    width: 20%;
    margin-left: 4%;
.buildingdiv {
    background-image:url(../images/building.png);
    width:196px;
    height:107px;
    margin-left:-15%;
    margin-top:201%;
#logodiv {
    position:relative; /* take out if needed */
    z-index:1;
#logotabdiv {
    margin-top:-3%;
    position:relative;
    z-index:-1;
#maincontenttabs {
    margin-top:5%;
#maincontent {
    margin-top:-1%;
    background-image:url(../images/blue-box.png);
    width:396px;
    height:351px;
    background-repeat:no-repeat;
    font-family:Arial, Helvetica, sans-serif;
    font-size:9pt;
    color:#0a3f8f;
#maincontent p {
    padding-left:3%;
    padding-right:3%;
#footer
    clear:both;
    margin-top:8%;
    text-align:right;
    float:right;
body>
<div id="background">
<div id="col1"> </div>
<div id="col2"><div id="logodiv" align="center"><img src="images/logo.png" alt="HurryPrint" longdesc="index.html" />
<div id="logotabdiv"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Location','','images/Location-DOWN.png',1)"><img src="images/Location-UP.png" width="85" name="Location" /></a> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Equipment','','images/Equipment-UP.png',1)"><img src="images/Equipment-DOWN.png" width="85" name="Equipment" /></a> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Services','','images/Services-UP.png',1)"><img src="images/Services-DOWN.png" width="85" name="Services" /></a> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('History','','images/History-UP.png',1)"><img src="images/History-DOWN.png" width="85" name="History" /></a></div>
<div id="maincontenttabs"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Newsletters','','images/location/newsletters-UP.png',1)"><img src="images/location/newsletters-DOWN.png" alt="Inkjet" width="75" height="16" name="Newsletters" /></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Floorplan','','images/location/floorplan-UP.png',1)"><img src="images/location/floorplan-DOWN.png" alt="Colour" width="75" height="16" name="Floorplan" /></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Map','','images/location/map-UP.png',1)"><img src="images/location/map-DOWN.png" alt="Binding" width="75" height="16" name="Map" /></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contact','','images/location/contact-UP.png',1)"><img src="images/location/contact-DOWN.png" alt="Docutech" width="75" height="16" name="Contact" /></a></div>
<div id="maincontent">
<br /><br />
<img src="images/hp-header.png" alt="HurryPrint" />
<br />
<p>Hurryprint has been upholding a longstanding family tradition for the last two decades by being a leader in providing innovative, quality printing. Owned and operated by Jamie Hurley since 1981, Hurryprint has earned a reputation for producing high quality work with quick and efficient turnaround.</p>
<img src="images/future-text.png" alt="At Hurry Print, the future is exciting" /> </div>
</div>
</div>
<div id="col3"><div class="buildingdiv"> </div>
</div>
<div id="footer"><img src="images/footertext.png" alt="Footer Text" /></div>
</div>
</body>
</html>

Is Responsive Design possible using Liquid Layouts?

Hi it is possible to use Liquid Layouts to automatically move content [instead of just scaling it] when the device is a different size. For example I may have 2 text boxes next to each other on an iPad layout but I want want them stacked on top of each other on the iPhone.
I know this type of responsive design is implemented in the latest version of dream weaver but i'm unsure how to do it in Indesign.
I have attached an image to better describe my question - http://bit.ly/16c82bD
Thanks

@Luke – currently the answer is no.
I think in this regard the development team of InDesign has to go a really long way (if it will be ever implemented).
It means CSS rules for every part of formatting:
A new paradigm for layout composition (and text composition as well).
Uwe

How do I create a Full Width Photo for a Liquid Layout - CS3

Greetings & Help!
I'm trying to create a full width photo layout without the
photo's being tall.
Exactly as the following websites - which all seem to be
using the same size of photo or very close to it.
This site is static with full width photos that are not tall.
http://www.jenniferhandyproperties.com/selling
This site is static for the most part and full width photos
that are not tall
http://www.gnvpartners.com/web/
This site is Flash with full width photos that are not tall.
expodesigncenter
I would love to create a flash site just like expo but at
this point I would settle for a static photo with the same size
being the same on each page.
Also I would like my site to be a liquid layout so the photo
and everything else (text, Links etc) on the page flows correctly.
The problem...
I'm trying to use photo's from Istockphoto.com. The size of
the photo's they offer are
425 x 282 px (5.9" x 3.9")
849 x 565 px (11.8" x 7.8")
1698 x 1131 px (5.7" x 3.8")
I'm selecting horizontal photo's. I do not know how to match
the same width, height and appearence as the websites I mentioned
above.
If I choose a photo that fits the width then the length is
too long. Also if I choose a large photo and have to crop it then
most of the detail of the photo is lost.
I'm attempting to create a mock-up for my web in Fireworks
CS3 and after search Adobe and www I came across the mock up should
be 1004px which would end up being 1024 with vertical scroll bar
and small margins.
I also have Photoshop & Flash CS3 but should mention (if
you haven't already guess it by now) I am a rookie when it comes to
creating a website.
So if you can offer a solution in "Non-Tech Terms" I would
appreciate it.
Thank you in advance for your time.

Greetings & Help!
I'm trying to create a full width photo layout without the
photo's being tall.
Exactly as the following websites - which all seem to be
using the same size of photo or very close to it.
This site is static with full width photos that are not tall.
http://www.jenniferhandyproperties.com/selling
This site is static for the most part and full width photos
that are not tall
http://www.gnvpartners.com/web/
This site is Flash with full width photos that are not tall.
expodesigncenter
I would love to create a flash site just like expo but at
this point I would settle for a static photo with the same size
being the same on each page.
Also I would like my site to be a liquid layout so the photo
and everything else (text, Links etc) on the page flows correctly.
The problem...
I'm trying to use photo's from Istockphoto.com. The size of
the photo's they offer are
425 x 282 px (5.9" x 3.9")
849 x 565 px (11.8" x 7.8")
1698 x 1131 px (5.7" x 3.8")
I'm selecting horizontal photo's. I do not know how to match
the same width, height and appearence as the websites I mentioned
above.
If I choose a photo that fits the width then the length is
too long. Also if I choose a large photo and have to crop it then
most of the detail of the photo is lost.
I'm attempting to create a mock-up for my web in Fireworks
CS3 and after search Adobe and www I came across the mock up should
be 1004px which would end up being 1024 with vertical scroll bar
and small margins.
I also have Photoshop & Flash CS3 but should mention (if
you haven't already guess it by now) I am a rookie when it comes to
creating a website.
So if you can offer a solution in "Non-Tech Terms" I would
appreciate it.
Thank you in advance for your time.

FAQ: How can I make my Flash Catalyst application scale/use a liquid layout?

Flash Catalyst CS5 currently only supports applications with fixed dimensions. Custom components you create in Catalyst have absolute sizing.
If you want to experiment with creating resizable applications (liquid layouts) and components in a preview of the next version of Flash Catalyst, codenamed "Panini", you can find more information here:
Introducing Adobe Flash Catalyst "Panini"
Download Adobe Flash Catalyst "Panini"
Adobe Flash Catalyst "Panini" help
Keep in mind that Flash Catalyst "Panini" preview is meant for exploration and testing, not real production. If you are doing real production work, here are some options that work with Flash Catalyst CS5 and Flash Builder:
Liquid Layouts
If you are building an application that requires relative constraints, you can take the FXP file from Flash Catalyst into Flash Builder, and apply constraints there so that your components resize according to your application dimensions.
For more info, see this Help topic:
Using constraint-based layouts in Flash Builder
SWF Scaling
If you want your swf to scale, without relative constraints, there's a simple way to make that work in Builder as well. Simply save out your FXP file from Flash Catalyst and import it into Flash Builder. Open up the "Main.mxml" file. Remove the width and height attributes on the Application tag, and add the attribute:
preinitialize="systemManager.stage.scaleMode='showAll'
The entire Application tag should look something like:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                  xmlns:s="library://ns.adobe.com/flex/spark"
                  xmlns:d="http://ns.adobe.com/fxg/2008/dt"
                  xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"
                  xmlns:ATE="http://ns.adobe.com/ate/2009"
                  xmlns:ai="http://ns.adobe.com/ai/2009"
                  xmlns:flm="http://ns.adobe.com/flame/2008"
                  xmlns:lib="assets.graphics.*"
                  xmlns:components="components.*"
                  backgroundColor="#FFFFFF"
                  preloaderChromeColor="#FFFFFF"
                  preinitialize="systemManager.stage.scaleMode='showAll'"
                  >
There are a couple other scale modes you may want to try, such as "exactFit", which are outlined at the below link:
Flash Stage Scale Modes
Finally, you will have to adjust the object embed code in your html page to set the size of your swf.
Original discussion here

you can`t. allow your application internet access without the network admin defining an exception for it specifically.
If you have admin rights use the router`s/proxy`y configuration software to allow an exception.

Liquid Layout - aspect ratio of background

I am working on a new site with a liquid layout and I havent been able to find a way to keep the aspect ratio correct with the different sizes.
I wish it was as simple as
bgimg1._width = Stage.width;
bgimg1._height = Stage.height;
the image size im working with is 990x600 for a 1024 display.
I would like the image to be centered and never to have empty area, so if it needs to it would strech past the sides. Any help is really appriecated.
Thanks,
Randy

when you create the symbol, make sure that 0,0 is not the top left, but the center. for example in your case, the location of this image symbol would be -495 for x, and -300 for y coordinates.
Now that the image symbol is centered for itself, it is now time to center it on the stage. You can do that be finding out the center of the stage which is half of that.
Now you can set the coordinates of the symbol equal to the center of stage.
example, myPic.x = Stage.width/2.
Great, the symbol is now always centered. But how to make it scale? It depends on how you want it to scale. Scale when resizing the webpage, or just scale to fit once?
If it is just to scale to fit once, you can just play with the values until it fills the screen by setting myPic.scaleX = 1.2; //or greater. Have to do scaleY too.
If you are trying to make the background scale dynamically, you would first need to create a listener that will detect the change of the stage.
Inside that change handler, you can set the scale of the symbol based on how much the stage has changed. The stage would only change if the html wrapped around it is set to scale.
Hope this helps.

Liquid Layout crashing InDesign CS6

I was using liquid layout - pinning a graphic- and when I tried to resize, the whole program crashed.   Every time I try to resize - on any page in the doc, it crashes the program.
InDesign CS6.   Liquid page rule: controlled by master [which is object based].   Objects move with page.
I've tried everything, for hours now.   I have no idea why it was fine, then all the sudden it's broken.
Very frustrated.

How would you go about exporting your alternate layout alone for print?

Liquid layout CSS

Similar Messages

Maybe you are looking for