How do I center a div in fluid grid?

Im not able to center anything in a fluid grid. I want to set the max width to something and then center it but "margin: 0 auto" isnt working.

Hi, Try something like this:
#container{
display: block;
width: 100%;
float: none;
margin-left: auto;
margin-right: auto;
max-width: 960px;
Hope this helps.
Alex

Similar Messages

How to setup a default direction for new divs in fluid grid layout in dreamweaver?

Hi,
how to setup a default direction for new divs in fluid grid layout in dreamweaver? I am an RTL interface user, I need my new divs to be inserted from right to left not Left to Right! could it be in dreamweaver?
Thanks.

This may get me into strife, but my experience is that you are better off finding another platform for your RWD.
The framework that I tend to use is by Zub-Foundation http://foundation.zurb.com/.
A commercial product that I have come to appreciate can be found here http://www.projectseven.com/products/tools/composer/index.htm. Please do not mention me if you happen to choose this product.

How to setup a default size for new divs in fluid grid layout in dreamweaver?

Hi,
how to setup a default size for a new divs in fluid grid layout in dreamweaver? I don't need the default size for new divs as a 100% width, I need them 13.69% as a one coulmn width only (7 coulmns fluid grids layout for desktop size 1000w).
This problem I've faced when I intended to insert dozens of fluid grid divs in the layout.

Sorry, I don't believe that you have had a good look at the Foundation framework. I'll now hold your hand while we go through the basics.
Here is the specific page http://foundation.zurb.com/docs/components/grid.html
The default values are
Em-base : 16px
Row width: 62.5em (62.5em x 16px = 1000px)
Columns per row: 12
These and other default values can be changed. The fact of the matter is that if you stipulate a section width of 2 or 3 or 12 columns, the widths will automatically be calculated for you.
In your case, if you want 7 columns, all you need to do is change the number of columns per row and the rest is done for you.

- How to vertically center a div?

How to vertically center a div? :-S

Cannot, really.
Read this -
http://www.apptools.com/examples/tableheight.php
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Reese" <[email protected]> wrote in message
news:eh34gg$rvh$[email protected]..
> How to vertically center a div? :-S
>

How do I center a div on a fluid grid layout. The div is a video player restricted to 630px by 350 px?

I am building a fluid grid website and I have a web player in a <div> that is styled to be no larger than 630px by 350 px. I can't figure out how to get this div to stay center on the page no matter if it is mobile, tablet, or desktop. Can anyone shed some light on this?

Change display to block, apply the margain: auto.

More insight on divs with fluid grids please!

Help me come further up the CS6 fluid grid learning curve, please!
I'm adapting an exiting site to fluid grids. After creating the template for the primary pages, I have two major issues at this point(yeah, only two, SO FAR).
1- I have a vertically expanding menu in the first layout div. For tablets, I want to preserve the left grid column space for the menu, regardless of its length, and all other content would use just the right gid columns. But when the menu happens to be short, the "excess" content floats left under the menu grid columns. How can I force main page content to only occupy the right grid columns, regardless of the length of the menu?
As a side point to the menu, what happens when I try to put this (or the footer) all back in an SSI, as it originally was?
2 - I've seen the note about no support for nested layout divs. Thru trial and error, I'm still trying to figure out just what this means. Pragmatically, what is the greater implication of this? Can format be controlled only on fluid grid layout divs? Can't I have divs inside of a grid layout div to control image palcement around the text for instance? I've had hit=n-miss experience with this so far.
Can anybody point me to a more in-depth discussion on this topic?
Sorry if this ol' dog seems like he's learning div layout all over again. But hey! That IS how it feels!
Thanks for any education, or pointers to such, that you can provide.

Not sure I completely understand what you want. But in this example, I have set nav and LayoutDivs 5, 6, 7 to display:none in smaller devices.
http://alt-web.com/FluidGrid/Fluid2.html
I did this inside a media query within my Content.css file:
/* Special Rules for Mobiles. */
@media only screen and (max-width: 480px) {
   /**hide some divs**/
     nav, #LayoutDiv5, #LayoutDiv6, #LayoutDiv7 { display: none }
     /**show jQuery buttons**/
     #togglenav { display: block }
     #showDivs { display: block }
Then I used a simple jQuery toggle to show/hide divs.
http://jsfiddle.net/NancyO/AP9Hm/
Nancy O.

How Do I Put Pictures anywhere in fluid grid layout??

Hi,
I was wondering how you put pictures anywhere you want in fluid grid layout without having to use the fluid grid layout div tag. I find it easier to use the ap div and simply insert pictures and move them freely however when i do that they dont stay in the correct place and the other grids? Is there an easier way?

Sorry but APDiv tags don't work in Fluid Grid layouts. That's why Adobe removed them from CC.
You must use the Fluid Grid divs in your layout to hold your text and images.
<div class="gridContainer clearfix">
     <div class="div1">
          insert image here...
     </div>
     <div class="div2">
          insert image here...
     </div>
</div>
Nancy O.

How to increase the width of the Fluid Grid Layout from 1008px to 1080px?

Good day all, I'm experiencing a slight problem with Fluid Grid Layout in Dreamweaver CS6. I want to increase it's width so that it could be one with my Photoshop CS6 design (which is 1080px), the problem is that I can't as I am limited to 1008px. How do I increase the width? I ultimately am re-coding my design as my client demanded a responsive design but I'm clueless in that avenue which is why I resorted to re-doing everything under the set & safe default (Fluid Grid Layout) that doesn't require me to udnderstand media queries at an expert level.

While Fluid Grid Layout can save you some production time, you still need a good understanding of CSS Media Queries to use it.
Introduction to CSS Media Queries
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-que ries.html
CS6 Fluid Grid Layouts (6 min video)
http://tv.adobe.com/watch/digital-design-cs6/creating-adaptive-designs -using-fluid-grid-layouts-in-dreamweaver-cs6/
CS6 Fluid Grid layouts (17 min video)
http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layou ts/
Step-by-Step tutorial -- Building Fluid Grid Layouts in DW CS6
http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs 6.html
Instead of fixed-widths in pixels, FLG code is all % based. It starts with the mobile layout and cascades to tablet, then desktop. If you want to use fixed-widths in pixels, you must manually change the CSS code for all three devices.
Nancy O.

Cannot drag divs in fluid grid layout

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

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

How do i center a div tag using css?

I am trying to learn css layout.
Starting with a blank page, I insert a couple of AP div tags and locate them where i want.
When i preveiw them in a browser, i notice that they are left justified. This is what i expect as they are Absolute positioned.
I would like them to be centered as a group. Creating a layout and centerring it on the browser window seems like a basic task.
I tried to add a div tag wrapper and center that but i cannot find where in the css panel is there any reference to center.
seems simple enough, im stumped.
Thanks
Jerry
P.S. I know as soon as i post this, i'll find the answer.

>>I tried to add a div tag wrapper and center that but i cannot find where in the css panel is there any reference to center.
Yeah that is the right approach and you can center by using following style:
#wrapper{
margin:0 auto;
Your ap divs will then absolutely position themselves within this wrapper div which acts as parent.
Regards,
Vinay

How do you make another page in fluid Grid? I tried a few ways, did't work.This sucks. Everything got all screwed up.

I tried a few ways, did't work.This sucks. Everything got all screwed up. How are other web site done? I spent hours and weeks on this crap. Everything is garbage.

You only need ONE FGLayout.css file (name it whatever you wish) and one boilerplate.css file. I typically create one more external style sheet for my content styles. It's best not to tamper with either your FGLayout.css or boilerplate.css file.
When your HTML page is saved as a Template, DW will create a TEMPLATES folder in your site's root folder and save the .dwt file there.
Use your Template to spawn new site pages. You do this by going to File > New > Page from Template. Select your site's template file from the 3rd panel and hit the CREATE button. Save child page as index.html (your home page). Repeat this last step for other site pages and name them as required -- about.html, contact.html, etc....
Nancy O.

How do you add a class in fluid grid navigation menu to change the background and link color when page is active?

When i try to add a class to the active page to have it distinguished when a visitor is on, in the class section it only has other options and not one for "active"

See this link:
Making a persistent page indicator on site wide CSS Menus
Nancy O.

How to vertically center InlineGraphicElements?

Hi all,
I'm trying to extend the InlineGraphic TLF example to insert images of varying sizes, but vertically center them in the text Flow. I'm having trouble figuring out the correct parameters to properly center the element. I've been playing with alignmentBaseline & dominantBaseline w/ IDEOGRAPHIC_CENTER, but I don't get very promising results. Here's a screen shot of where I'm at:
Notice the blue box(added in post), the text MESSUP is being placed on the same line as the Lorem Ipsum text(in the string, it's Donec MESSUP). Also, the selection box (Ctrl+A) shows breaks in the text layout. It seems like the boxes should be shifted up. This may be as designed, if so, how do I compact/shift the boxes up?
For contrast, this is what it looks like without the centering:
Source:
package
    import flash.display.Sprite;
    import flash.text.engine.TextBaseline;
    import flashx.textLayout.container.ContainerController;
    import flashx.textLayout.edit.EditManager;
    import flashx.textLayout.elements.InlineGraphicElement;
    import flashx.textLayout.elements.InlineGraphicElementStatus;
    import flashx.textLayout.elements.ParagraphElement;
    import flashx.textLayout.elements.SpanElement;
    import flashx.textLayout.elements.TextFlow;
    import flashx.textLayout.events.StatusChangeEvent;
    import flashx.undo.UndoManager;
    [SWF(width="760", height="590", backgroundColor="0xCCCCCC", frameRate="30")]
    public class inliner extends Sprite
        protected var textFlow:TextFlow;
        public function inliner():void
            var elements:Array =
                "Lorem ipsum dolor", null,
                "sit amet, consectetur", null,
                "adipiscing elit. Mauris eu odio nibh. Duis", null,
                "scelerisque mattis risus, vitae viverra", null,
                "ipsum vehicula non.", null,
                "Donec MESSUP"];
            textFlow = new TextFlow();
            textFlow.fontSize = 34;
            textFlow.backgroundColor = 0xFFFFFF;
            textFlow.backgroundAlpha = 1;
            var imageSize:uint = 20;
            var paragraphElement:ParagraphElement = new ParagraphElement();
            textFlow.addChild(paragraphElement);
            for(var i:uint = 0; i < elements.length; ++i)
                var obj:* = elements[i];
                if(obj is String)
                    var string:String = obj as String;
                    var span:SpanElement = new SpanElement();
                    span.text = string;
                    paragraphElement.addChild(span);
                else if(obj == null)
                    var inlineGraphic:InlineGraphicElement = new InlineGraphicElement();
                    inlineGraphic.width = imageSize;
                    inlineGraphic.height = imageSize;
                    imageSize += 20;
                    inlineGraphic.source = "http://www.adobe.com/shockwave/download/images/flashplayer_100x100.jpg";
                    // comment out to change back to good looking text
                    inlineGraphic.alignmentBaseline = TextBaseline.IDEOGRAPHIC_CENTER;
                    inlineGraphic.dominantBaseline = TextBaseline.IDEOGRAPHIC_CENTER;
                    paragraphElement.addChild(inlineGraphic);
            // event sent when graphic is done loading
            textFlow.addEventListener(StatusChangeEvent.INLINE_GRAPHIC_STATUS_CHANGE, graphicStatusChangeEvent);
            const bufferX:Number = 50;
            var sprite:Sprite = new Sprite;
            sprite.x += bufferX;
            addChild(sprite);
            textFlow.flowComposer.addController(new ContainerController(sprite, 760 - bufferX * 2, 590));
            // this call compose but the graphic hasn't been loaded from the source URL yet.
            // The actualWidth and actualHeight are zero.
            refresh();
            var em:EditManager = new EditManager(new UndoManager);
            textFlow.interactionManager = em;
            textFlow.interactionManager.setFocus();
        protected function graphicStatusChangeEvent(e:StatusChangeEvent):void
            // if the graphic has loaded update the display
            // actualWidth and actualHeight are computed from the graphic's height
            if(e.status == InlineGraphicElementStatus.READY || e.status == InlineGraphicElementStatus.SIZE_PENDING)
                refresh();
        protected function refresh():void
            textFlow.flowComposer.updateAllControllers();

Cannot, really.
Read this -
http://www.apptools.com/examples/tableheight.php
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Reese" <[email protected]> wrote in message
news:eh34gg$rvh$[email protected]..
> How to vertically center a div? :-S
>

How to convert live website to fluid grid layout

I have an existing live website. How do I convert it to a fluid grid layout?

Who is Peter?
Responsive Web Design
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Introduction to CSS Media Queries
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
CS6 Fluid Grid layouts (17 min video)
http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
Creative Cloud 12.2 Enhancements to Fluid Grid Layouts
http://blogs.adobe.com/dreamweaver/2013/02/updated-fluid-grids-in-dreamweaver.html
Step-by-Step tutorial -- Building Fluid Grid Layouts in DW CS6
http://www.adobe.com/inspire/2012/08/fluid-grid-layouts-dreamweaver-cs6.html
If you want to support multiple languages, you'll need to build a mirror site with translations.
Nancy O.

IE8 issue: fluid grid/responsive nav bar -nullify or overide in css?

For a small, responsive Bootstrap site: how do I override the fluid grid and collapsible navbar on a seperate stylesheet for IE8, to make the page non-responsive? Is it a matter of weight or nullifying?
Respond.js can address other 'screen' elements for IE8, assuming that no one with a tablet or smartphone uses IE legacy browsers anyways.
But if someone could give me a general direction of how to deal w the navbar and fluid grid in the css without changing the markup in my doc, I'd appreciate it.

Do you really need to support IE8? Very few people still use it.
If you must support IE8, create an IE-only stylesheet with your desktop layout styles. Insert it inside a conditional comment for pre-IE9 browsers.
Make sure to insert this after all other styles and stylesheets, just before your closing </head> tag.

</head>
Nancy O.

How do I center a div in fluid grid?

Similar Messages

Maybe you are looking for