Elastic layout and centering

I have a elastic layout with just one column.
The main content container has a centered background (which consists of a two vertical colored bands, with the transition in the middle of the page). Padding and margins for body and container are zero.
The main content container contains two images, side by side, with their joint border right in the middle too (for that I use an ID for the left image to align its right side to the center, for the right image I do the reverse).
However: when viewing the page, there is an offset between the background center and the image center (just a few pixels), visually very annoying.
(css and html file included)
This offset visible is both in Firefox and IE7.
What do I do wrong?

just an added note here:
This past hour I tried to get centering of images, text and background to fit properly in both IE (5,6 and 7) and Firefox.
Centering with a liquid layout (which I prefer due to its better "said" predictability) is an absolute pain (nothing would seem to fit); I reverted back to elastic layout because of this issue.

Similar Messages

  • 2-column elastic layout and size of text/image

    Hello,
    I'm using the 2-column-elastic template of Dreamweaver CS4 and have got a few questions related to its use. As far as I understand it (I'm new to HTML, CSS, etc.), it is elastic because the dimensions of the divs are defined with the unit "em" and will resize if the user changes the text size of the browser. (Is this the best for accessibility purposes?)
    Question 1: how to make sure my page is initially 780 px wide?
    I have a banner image in the header, it has a 780-px width. Under it there is a menu made of five 156-px elements.
    I have defined the default page text size to 80 % instead of 100 %. Apparently, 780 px is equal to 61 em with these settings. Hence, I defined the width of the container to 61 em (instead of the 46 em at 100 % of the Adobe template). However, this didn't always work: depending on the browser, a thin 1-px wide line appeared to the right of the banner.
    To try to fix this, I have set a "min-width: 780px" and "width: 60em", hoping that doing so my page would have an initial width of 780 px but still resize (increase) if the text size is increased in the browser. If the text size is decreased, I keep a 780-px width. Is this the normal way to proceed? The property "min-width" returns a warning when I validate the side for browser compatibility. Same for min-height by the way (I'd like my page to be roughly 30 em high at minimum).
    Question 2: how can I make sure that my banner will expand when the text size is increased?
    When I increase the text size in the browser, the text of my page resizes and depending on the browser, the banner image will expand or not. I would like it to always resize to keep a consistent layout. How can I do this?
    The banner currently resizes with:
    - Mac OS X: Opera 9;
    - Windows XP: Safari 4beta (but the menu bar seems narrower), Firefox 3, Opera 9, IE 8.
    The image doesn't currently resize with:
    - Mac OS X: Safari 3, Netscape Navigator 9, Stainless 0.5, Camino 1.6, Firefox 3;
    - Windows XP: Netscape Navigator 9, Chrome 1, IE6 (+ other problems), IE7 (+ other problems)
    (Other problems: usual unwanted spaces between the banner, the menu and the "title". I managed to fix some of them with "display: block", but it doesn't work around the top menu.)
    I've put the page here: http://www.cerc.co.uk/CERC/demotest/template2columns.html
    If there is any problem to view it, let me know (first time I do this!).
    I would be very grateful for any comment on these!
    Emilie

    just an added note here:
    This past hour I tried to get centering of images, text and background to fit properly in both IE (5,6 and 7) and Firefox.
    Centering with a liquid layout (which I prefer due to its better "said" predictability) is an absolute pain (nothing would seem to fit); I reverted back to elastic layout because of this issue.

  • Liquid and Elastic Layout

    My first attempt at a liquid layout seems to work well in the
    sense it fits various browser sizes. I then discovered elastic
    layout and thought I should incorporate it for users to resize the
    text. Now I am having problems with text spilling all over the
    place. I am using % and ems. Should I just stick with the liquid
    layout or has anyone got any tips.
    Thanks in advance.

    this sort of thing gave me head aches for ages. i found the
    best way is to use a fix px size for your main wrapper/container.
    if you are using ap divs in the main wrapper div, set the positon
    as relative in your css code, i.e
    #wrapper
    position:relative;
    doing it this way, everything always takes up the same amount
    of pixels within your page, no matter what resolution you are
    viewing in.
    i, personally, would recomment a main wrapper size of about
    770px.
    i also have discovered that if you create your pages catering
    to every whim, of every user, you will surely go mad. i did.
    so create it to look good, as it is. if you think people may
    have to make text larger, than do it yourself in the design.

  • Problem with layout and spry menu in IE

    My navigation bar looks fine in Foxfire and Safari, but is all messed up in IE.
    here is a link to the page:
    http://vacationlandphotography.com/tls/header.html
    here is my code:
    <html>
    <head>
    <title>The Landing School</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <!-- ImageReady Styles (header.psd) -->
    <style type="text/css">
    <!--
    body {
        text-align:center;
        background-color: #000000;
    #wrapper {
        margin: 0 auto;
        width: 1000;
        text-align:left;
    #Table_01 {
        margin: 0 auto;
        left:0px;
        top:0px;
        width:1000px;
        height:133px;
    #header-01 {
        position:relative;
        left:0px;
        top:0px;
        width:1000px;
        height:102px;
    #header-02 {
        position:relative;
        left:0px;
        top:0px;
        width:720px;
        height:30px;
    #header-03 {
        position:relative;
        left:697px;
        top:-31px;
        width:141px;
        height:31px;
    #header-04 {
        position:relative;
        left:838px;
        top:-61px;
        width:29px;
        height:31px;
    #header-05 {
        position:relative;
        left:867px;
        top:-92px;
        width:30px;
        height:31px;
    #header-06 {
        position:relative;
        left:897px;
        top:-123px;
        width:31px;
        height:31px;
    #header-07 {
        position:relative;
        left:928px;
        top:-154px;
        width:27px;
        height:31px;
    #header-08 {
        position:relative;
        left:955px;
        top:-185px;
        width:45px;
        height:31px;
    -->
    </style>
    <!-- End ImageReady Styles -->
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
    </head>
    <body style="margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
    <div id="wrapper">
    <!-- ImageReady Slices (header.psd) -->
    <div id="Table_01">
        <div id="header-01">
            <img src="images/header_01.gif" width="1000" height="102" alt="">  </div>
        <div id="header-02">
          <ul id="MenuBar1" class="MenuBarHorizontal">
            <li><a class="MenuBarItemSubmenu" href="#">Wooden Boat Building</a>
                <ul>
                  <li><a href="#">Overview </a></li>
                  <li><a href="#">Career Options</a></li>
                  <li><a href="#">Alumni Profile</a></li>
                  <li><a href="#">Syllabus</a></li>
                  <li><a href="#">Admission</a></li>
              </ul>
            </li>
            <li><a href="#" class="MenuBarItemSubmenu">Composite Boat Building</a>
              <ul>
                <li><a href="#">Overview</a></li>
                <li><a href="#">Career Options</a></li>
                <li><a href="#">Alumni Profile</a></li>
                <li><a href="#">Syllabus</a></li>
                <li><a href="#">Admission</a></li>
              </ul>
            </li>
            <li><a class="MenuBarItemSubmenu MenuBarItemSubmenu" href="#">Yacht Design</a>
              <ul>
                <li><a href="#">Overview</a></li>
                <li><a href="#">Career Options</a></li>
                <li><a href="#">Alumni Profile</a></li>
                <li><a href="#">Syllabus</a></li>
                <li><a href="#">Admission</a></li>
              </ul>
            </li>
            <li><a href="#" class="MenuBarItemSubmenu">Marine Systems</a>
              <ul>
                <li><a href="#">Overview</a></li>
                <li><a href="#">Career Options</a></li>
                <li><a href="#">Alumni Profile</a></li>
                <li><a href="#">Syllabus</a></li>
                <li><a href="#">Admission</a></li>
              </ul>
            </li>
            <li><a href="#" class="MenuBarItemSubmenu">Overview</a>
              <ul>
                <li><a href="#">Mission</a></li>
                <li><a href="#">Location</a></li>
                <li><a href="#">Associate’s Degree</a></li>
                <li><a href="#">Tuition and Financial Aid</a></li>
                <li><a href="#">Admission</a></li>
                <li><a href="#">Faculty</a></li>
              </ul>
            </li>
          </ul>
      </div>
    <div id="header-03">
            <img src="images/header_03.gif" width="141" height="31" alt="">  </div>
    <div id="header-04">
        <a href="https://www.facebook.com/pages/The-Landing-School/81582557331?ref=ts" target="_top"><img src="images/header_04.gif" alt="" width="29" height="31" border="0"></a>    </div>
    <div id="header-05">
            <a href="http://twitter.com/#!/landingschool" target="_top"><img src="images/header_05.gif" alt="" width="30" height="31" border="0"></a>    </div>
    <div id="header-06">
            <a href="http://www.youtube.com/user/TheLandingSchool" target="_top"><img src="images/header_06.gif" alt="" width="31" height="31" border="0"></a>    </div>
    <div id="header-07">
            <a href="http://landingschool.blogspot.com/" target="_top"><img src="images/header_07.gif" alt="" width="27" height="31" border="0"></a>    </div>
    <div id="header-08">
            <img src="images/header_08.gif" width="45" height="31" alt="">
        </div>
    </div>
    <!-- End ImageReady Slices -->
    </div>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    </body>
    </html>
    here is my CSS:
    @charset "UTF-8";
    /* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    LAYOUT INFORMATION: describes box model, positioning, z-order
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        cursor: none;
        width: 700;
        font-family: Arial;
        color: #FFFFFF;
        border: thin none #000000;
        height: auto;
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
        z-index: 1000;
        background-color: #FFFFFF;
        font-family: Arial, Helvetica, sans-serif;
        color: #000000;
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 11px;
        text-align: center;
        cursor: crosshair;
        width: 138px;
        float: left;
        height: 29px;
        background-color: #FFFFFF;
        border: 1px solid #000000;
        font-family: Arial;
        color: #FFFFFF;
        word-spacing: -0.1em;
        letter-spacing: normal;
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        font: Arial;
        z-index: 1020;
        cursor: default;
        width: 8.2em;
        position: relative;
        left: -500em;
        background-color: #999999;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
        left: auto;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
        width: 8.2em;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
        position: absolute;
        margin: -5% 0 0 125%;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
        left: auto;
        top: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
        border: 0px solid #CCC;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
        display: block;
        cursor: pointer;
        font: Arial;
        background-color: #999;
        padding: 0.5em 0.75em;
        color: #333;
        text-decoration: none;
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
        background-color: #003366;
        color: #FFFFFF;
        border: 0px;
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
        background-color: #003366;
        color: #FFFFFF;
    SUBMENU INDICATION: styles if there is a submenu under a given menu item
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
        background-image: none;
        background-repeat: no-repeat;
        background-position: 95% 50%;
        background-color: #FFFFFF;
        color: #000000;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11px;
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
        background-image: url(SpryMenuBarRight.gif);
        background-repeat: no-repeat;
        background-position: 95% 50%;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
        background-image: url(SpryMenuBarDownHover.gif);
        background-repeat: no-repeat;
        background-position: 95% 50%;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
        background-image: url(SpryMenuBarRightHover.gif);
        background-repeat: no-repeat;
        background-position: 95% 50%;
    BROWSER HACKS: the hacks below should not be changed unless you are an expert
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe
        position: absolute;
        z-index: 1010;
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
        ul.MenuBarHorizontal li.MenuBarItemIE
        background: #FFF;
    thank you!
    Tote Road

    Your first difficulty is outlined here in the W3C Validation tool: http://validator.w3.org/check?uri=http%3A%2F%2Fvacationlandphotography.com%2Ftls%2Fheader. html&charset=%28detect+automatically%29&doctype=Inline&group=0
    Without a doctype declaration, the browsers don't know what to do with your code. Some apparently guess well. Internet Explorer, not so much.
    After you've fixed your page up by copying this
    <!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=utf-8" />
    in place of this:
    <html>
    <head>
    either things will be improved or there will be something else cropping up. I opt for the former, myself!
    Beth

  • Dreamweaver sc6 fluid grid layouts and nivo slider

    I have the nivo slider pretty much set up on my home page, with one exception. I have a sidebar to the right of the slider and the slider bullets end up above the sidebar as opposed to below and centered below the slider. If I remove the sidebar and set the slider div to the full width of the page, then the bullets end up where the should be (centered and below the slider).
    What do I have to do so that the bullets end up centered and below the slider when I have a sidebar to the right of the slider?
    Thanks.

    The site is not live so I don't know how to post a url for it for viewing. I inserted a print screen of the preivew in internet explorer from dreamweaver (I hope this helps), you can at least see the bullets for the slider above the sidebar. Also, the source code for the page is below. If this is not enough please let me know what else I can include that might allow someone to help me. Thanks.
    <!doctype html>
    <!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
    <!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
    <!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
    <!--[if gt IE 8]><!-->
    <html class="">
    <!--<![endif]-->
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Untitled Document</title>
    <link href="boilerplate.css" rel="stylesheet" type="text/css">
    <link href="css/layout.css" rel="stylesheet" type="text/css">
    <link href="nivo-slider.css" rel="stylesheet" type="text/css">
    <!--
    To learn more about the conditional comments around the html tags at the top of the file:
    paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
    Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
    * insert the link to your js here
    * remove the link below to the html5shiv
    * add the "no-js" class to the html tags at the top
    * you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
    -->
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <script src="respond.min.js"></script>
    <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="slider/themes/default/default.css" type="text/css" media="screen" />
    <script src="jquery.nivo.slider.js" type="text/javascript"></script>
    <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
    <style type="text/css">
    body {
    background-image: url(images/Gradient%20Background%20with%20highlights.png);
    background-repeat: no-repeat;
    background-color: #000000;
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
    </head>
    <body bgcolor="#404040">
    <div class="gridContainer clearfix">
      <div id="header">
        <p style="background-position: center center; background-repeat: no-repeat; width: 850px; height: 115px; background-image: url(images/Montanaro%20Poker%20Logo%20Transparent%20Background%203.png); text-align: center; font-size: 40px; color: #ffffff; font-weight: bold;"></div>
      <div id="menu">
        <table width="979" border="1" cellpadding="0" cellspacing="0">
          <tr>
            <td><ul id="MenuBar1" class="MenuBarHorizontal">
              <li><a href="#">HOME</a></li>
              <li><a href="html/rules.html">RULES</a></li>
              <li><a href="#">TOURNAMENT STRUCTURE</a></li>
              <li><a href="#">LEAGUE EVENTS</a></li>
              <li><a href="#">STANDINGS</a></li>
              <li><a href="#">POKER FORUM</a></li>
              <li><a href="#">R.S.V.P.</a></li>
              <li><a href="#">CUSTOM TABLES</a></li>
            </ul></td>
          </tr>
        </table>
      </div>
    <div id="wrapper">
      <div class="slider-wrapper theme-default">
          <div id="slider">
              <img src="slider/images/nemo.jpg" title="nemo image">
              <img src="slider/images/toystory.jpg" title=toystory image">
              <img src="slider/images/up.jpg" title="up image">
              <img src="slider/images/walle.jpg" title="#htmlcaption">
       </div>
        </div>
       <div id="htmlcaption" class="nivo-html-caption">
           <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>
       </div>
        <script type="text/javascript">
        $(window).load(function() {
           $('#slider').nivoSlider();
        </script>
    </div>
      <div id="sidebar">
        <form style="text-align:center;font-size:18px;color:#000000;font-weight:bold;line-height:35pt;" >UPCOMING EVENTS</form>
    <p style="text-align:center;font-weight:bold;">LAST TOURNAMENT OF THE YEAR + <br>
          WIN A FREE SEAT IN THE 2013 POKER LEAGUE
        </p>
         <p><a href="html/rsvp.html">Saturday, December 8th 8:00pm</a>
        <p style="text-align:center;font-weight:bold;">FIRST LEAGUE EVENT
         </strong></p>
         <p><a href="html/rsvp.html">Saturday, January 12th 8:00pm</a>
            </div>
      <div id="body">
    <p style="font-size:28px;color:#CC0000;font-weight:bold;">HOME</p>
        <p>Montanaro Poker has evolved over the years to provide a fun, friendly atmosphere for friends/family to play in a social poker game. It is by inviatation only. It is not a public card room. The house will in no way ever take a rake. All buy-inswill be paid out to the winners of each event. All league fee's will be paid out to the Player of the Year winners.
        </p>
        <p>Small snacks (pretzels, popcorn, candy...) and drinks (water and soda) will generally be provided. Any player that wishes something else is welcome to bring their own, however, due to the friendly nature of the game, everyone usually shares. Also, no food or drink is allowed on the actual poker table. 
        </p>
        <p>While we maintain a fun game, we try to maintiain a certain level of professionalism to each event. Please review the rules (located at the top of the page and in the poker room) before coming to an event or sitting down to the table. We like everyone to be on as level of a playing field as possible.
        </p>
        <p>We love hanging out with friends/family and tossing in a little competition. We are glad that you can join us and wish you the best of luck! (just not too much).
        </p>
      </div>
      <div id="footer"></div>
    </div>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    </html>

  • Difference between null layout and absolutelayout

    hello
    I would like to know the difference between the null layout and the absolutelayout
    thank you in advance

    http://www.google.com/search?q=absolutelayout
    Next time, please use the search yourself.Do I have to consider this as answer Yes.
    notice that I asked for the difference between both
    of the layout and not about
    absolutelayout only Third link, advertised by
    "I think AbsoluteLayout does more than just setting Layout to null. AbsoluteLayout may even accomodate for changes in font sizes etc. ..."
    already should give you something to think about.
    Furthermore, the search shows that there are several different classes named AbsoluteLayout (ADF, SWT, BUI, samskivert...), and you didn't specify which one you're talking about.
    Still think this wasn't an answer?
    I guess I should stop assuming that you have a brain of your own.

  • Can I mix Pages page layout and word processing together in one document?

    Hello there ! I am quite new to Pages and I am desperate to learn as i want to get rid of everything being Microsoft
    As you all know when you open Pages you can choose between page layout and word processing !
    the thing is i thought that after using a page layout you could just go with word processing easily... well no, you can't, but i'm sure i'm missing something...
    For exemple i really like the catalogue brochure and it would be perfect for me to start a project... but after a few pages, i can just add blank pages and if i want to type text, i have to add text boxes... i don't want that, I want word processing... and another thing in this brochure i can't add table of content because it is not by default in the template...
    So my question is quite basic here, can we link Page layout and word processing without having to use text boxes and everything ?
    Thanks in advance !
    Have a good day

    Alexander,
    Welcome to Apple discussions.
    The simple answer is no. What differentiates page layout from word processing mode is that the PL mode has no text layer. So everything that goes on the page must be an object of some kind. And any pages you add to a PL document must also be PL. You can't mix the two modes. One way around it is to start with a blank page, insert a text box, then stretch the box so that it covers the entire page. You can the type in it as if it were a text layer in a WP file. You can even capture that page so that you can add it automatically when you need it, or save it as a template.
    As for building a Table of Contents, it appears that Pages only sees text styles that are on the text layer, which means it won't see styles that are in objects -- which means it won't work with a PL document. From being a long-time reader of this discussion group, I've noticed it's rare that someone wants to add a ToC to a PL document.
    If you find that you're going to be mixing text and graphics, start with a word processing template. If you really like the Catalog Brochure, you could always copy some or all of its elements over to a blank WP template.
    Hope this helps.
    -Dennis

  • Can you help me with Page Layout and/or Design ideas for a software manual?

    Greetings,
    I am a new InDesign user, and am converting a software manual that I created in MS Word into InDesign. It will be converted to a pdf to view online. I have the basics (3 master pages, page numbers, running headers, 2column pages with text boxes on the left and screenshots on the right), but I want to make it look prettier. Could you please give me some ideas on page layout and/or design to make it look better or more creative?
    A few things that I am considering: borders around screenshots, a watermark, a logo next to the page numbers, different size/type of fonts, etc.
    I am open to any suggestions to make this look better. However, please understand that I am new to InDesign. With that being said, please tell me a few steps when you mention your tips. Thank you!

    Take a look at a few websites on Cannons of Page Construction.
    I think the best idea for you is to look at a few software manuals and take tips from how they accomplished the layouts.
    I'm not saying to copy them - but rather see what works and doesn't work, what worked for them might not necessarily work for you - research some layouts.
    Fonts/type/sizes etc. are pretty much ambigious without context - is this a software manual for kids (soft cuddly big fonts easy to read), technical (small, tight spacing etc), Adult friendly (smooth, crisp clear, well spaced), elderly (large elegant fonts).
    It all really depends on your demographic audience.
    Being new to InDesign I suggest you take up Sandy Cohens Quickstart Visual Guide.
    I think you should look at Michael Murphys Book on Styles
    And you should definitely get your printer (the guys bulk printing) the booklet for you on board from the start to work out optimal sizes to suit their printing presses and workflow etc. And to ensure that you are setup correctly in page sizes, margins, safe type areas, colour profiles and a few other things that your printers prepress can help you with.

  • I just got photoshop cc 2014 on windows 8.1 64 bit, and it starts up on the white layout and and whenever I start a project it is in a window? Also whenever I try to change on of these it does not save. I am using the trial

    just got photoshop cc 2014 on windows 8.1 64 bit, and it starts up on the white layout and and whenever I start a project it is in a window? Also whenever I try to change on of these it does not save. I am using the trial. Basically nothing saves and it was all screwed up when I first got it.

    Do a screen screen capture and post it here so we can see what you stating about a white layout...

  • Writers - please help with page layout and headers/footers in Pages

    Hello
    Apologies if this is a stupid question, but I have fiddled around with my page layout and can't figure this out for myself!
    When I type a manuscript, I like to have a header and footer giving the book title, chapter, my name, etc. I'm finding that the header and footer is set to a wider range than I have set the main body of the page. Would you leave it that way, so that it is easily differentiated from the actual text, or would you align the left and right margins on the header and footer to match the body of the text? And if so, how do you do this please?
    Secondly, I can't figure out how to increase the top and bottom gap so that there is a good space between the header and the first line of text.
    Any advice would be gratefully received!
    Thank you!

    rainbow-warrior wrote:
    When I type a manuscript, I like to have a header and footer giving the book title, chapter, my name, etc. I'm finding that the header and footer is set to a wider range than I have set the main body of the page. Would you leave it that way, so that it is easily differentiated from the actual text, or would you align the left and right margins on the header and footer to match the body of the text? And if so, how do you do this please?
    I don't understand what you did.
    When we use the normal tools:
    Inspector > Document > Margins, the widths of header, body and footer are the same.
    Secondly, I can't figure out how to increase the top and bottom gap so that there is a good space between the header and the first line of text.
    With the already named tools, we may adjust top & bottom margins with no change on the header & footer.
    As I often wrote, looking in the PDF User Guide which is delivered with every copy of iWork is an efficient way to spare time.
    Yvan KOENIG (from FRANCE mardi 7 octobre 2008 14:08:55)

  • How do I make categories under My Templates, as is done in page layout and word-processing?

    How do I make categories under My Templates, as is done in page layout and word-processing? I have over 50 of my own templates and want to categorize them. For example: son's homework, business, etc. Thanks

    Here are some screenshots of my organization. Your sub-folders need to be in the same folder as My Templates, NOT in My Templates which is confusing.

  • Switching between page layout and word processing

    I can't seem to switch between page layout and word processing view.  I've read all the posts on this and still can't figure out why I can't just type a document into Pages.  The only option I have in page layout view is to type into text boxes, which is not what I want.  I just want to type a letter for crying out loud.
    Before I get all the rants about reading User Guides, etc.  *I have*.  I've also searched on here and in-app help and just don't understand the fuzzy/non-existant answers.  Obviously, I'm a newbie, so please don't jump all over me for this.  If it was Word - I could do this in NO time.  I just find it incredibly frustrating that inputting a normal document should be so difficult.
    Is "Pages" *not* a word processing program?  Is it just a cut and paste application?  Sorry for the tone - I mean no disrespect - it's just that I've been fooling around with this for DAYS and I just don't have time to spare anymore.  I really need to get this done.
    Can somebody give me a straightforward answer on how to just type a normal document into pages without using text boxes?
    Thanks and I apologize for not being mac-savvy.  It took some of us a lot longer to see the light =)

    Here is a script doing the conversion task for you.
    Open a Page Layout document
    run this script:
    --{code}
    set p2t to (path to temporary items from user domain) as text
    set path_2_doc to p2t & (do shell script "date +_%Y%m%d_%H%M%S.doc")
    tell application "Pages"
      save document 1 in path_2_doc
      open file path_2_doc
    end tell
    --{code}
    that's all folks.
    Yvan KOENIG (VALLAURIS, France) lundi 20 juin 2011 18:03:28
    iMac 21”5, i7, 2.8 GHz, 4 Gbytes, 1 Tbytes, mac OS X 10.6.7
    Please : Search for questions similar to your own before submitting them to the community
    To be the AW6 successor, iWork MUST integrate a TRUE DB, not a list organizer !

  • [Solved] Can't login with current keyboard layout and `@` in password

    Hi, I'm a new arch user. I followed archwiki to install Enlightenment17. All went fine but I have a problem to login since during setup I inserted '@' in root/regular user passwords. During setup I selected the Italian layout and all seems ok, except grafical login through entrance (from aur, but I tested also kdm, with same results): password not recognized. Before asking, is not a CAPS/NUMLOCK issue since the password works using it in console login. I discovered that I can type '@' with the following combination: SHIFT+2; in an italian keybord this should print a double quote (") but in entrance (and kdm) it correponds to '@'. After login this way, the keyboard works normally (for instance using 'su'). So the problem is limited to graphical login (entrance and kdm) during which a different keyboard layout is used.
    Did I miss some config file?
    For the sake of clarity:
    1) /etc/locale.gen has "it_IT.UTF-8 UTF-8" uncommented
    2) /etc/locale.conf contains "LANG=it_IT.UTF-8"
    3) /etc/vconsole.conf contains "KEYMAP=it"
    4)
    $ locale
    LANG=it_IT.UTF-8
    LC_CTYPE="it_IT.UTF-8"
    LC_NUMERIC="it_IT.UTF-8"
    LC_TIME="it_IT.UTF-8"
    LC_COLLATE="it_IT.UTF-8"
    LC_MONETARY="it_IT.UTF-8"
    LC_MESSAGES="it_IT.UTF-8"
    LC_PAPER="it_IT.UTF-8"
    LC_NAME="it_IT.UTF-8"
    LC_ADDRESS="it_IT.UTF-8"
    LC_TELEPHONE="it_IT.UTF-8"
    LC_MEASUREMENT="it_IT.UTF-8"
    LC_IDENTIFICATION="it_IT.UTF-8"
    LC_ALL=
    Thanks for any help.
    Last edited by bull3t (2013-03-03 14:10:15)

    cfr wrote:Have you tried specifying a variant?
    I exclude a variant problem considering that in any other condition the keyboard layout is right. The system is configured for an it KEYMAP but it is obvious that in entrance/kdm is used an 'us' map. Is this hardcoded somewhere? I also tryed to comment out any entry in /etc/locale.gen except 'it_IT.UTF-8 UTF-8': still 'us' keymap in graphical login screen.
    Probably a kind user with a non-us keyborad layout could create a dummy user with password containing '@' or '#' or any other special symbol to verify that this condition is reproducible, a first step for a bug report.
    Cheers

  • In Initial View, can you set defaults for Navigation tab, Page layout, and Magnification?

    Adobe Acrobat 9 Pro V9.4.0
    Win7 Pro x64
    Problem: In Initial View, can you set defaults for Navigation tab, Page layout, and Magnification?
    Every time Acrobat scans a document, I have to go to Initial View to set Navigation tab, Page layout, and Magnification. It does not remember the settings I last used.
    Thanks in advance.

    See my response to this post

  • CSS layout and Internationalization of JSF apps

    We use message bundles to handle internationalization in our JSF applications. This approach seems to work as we used HTML tables (or rather <h:panelGrid> tags) to layout components on the page.
    We had numerous customer complaints about tons of extra white space left on the screen in languages like German (where some words are very long). There are other issues with grid layouts, and we decided to give CSS positioning a try.
    I wonder, what folks on this forum think about using CSSP in conjunciton with JSF components. Also, given that text strings have different length in different languages, what is the i18n approach? Afterall, coordinates that work in English may not be accurate in German.
    Any suggestions, ideas, pointers would be greatly appreciated.
    Thanks,
    Vadim.

    Hi guys.
    The problem seems a little bit weird. But you could try the following. It is just the idea.
    1. You should recover the .properties file and get the Map for the current Locale. This should have to be done maybe in the Backing bean.
    2. Get the maximum length of the UIOutputText elements present in the form that you need to control its length. Now the important thing here is that you should have the value atribute of the UIOutputText objects based on an internationalized Base Bundle prefix. Just cut -based on the substring of the value attribute- the name of the property.
    3. Consider that you have to look in the Map the entry you just obtained from the UIOutputText object. After get the value of that Map entry (a String object) and get its length. At the end of the loop you sould have get the maximum length in characters of the component values to be displayed.
    4. Fix that value as an attribute in the backing bean.
    5. Use the output of that value to generate the style in CSS, as an String attribute of the Backing Bean. Base your CSS construction in "em" measures
    6. Change the -style- attribute in each component to reflect the correct length using CSS like this -style="#�{backingBeanName.style}"-. With this you will get an space dependent of the length of the localized values.
    Again. It is just a suggestion, I had not tried it already but I guess that will be my way in that case.
    Greets from Ecuador

Maybe you are looking for