Absolute Centering an AP Div

I've created a template using AP DIVs as layers. I want to
absolute center the DIVs for any size screen on the internet so
that the layers appear with equal white space on either side of the
AP DIV.

"Katie Shoshana" <[email protected]> wrote
in message
news:ffnud0$vs$[email protected]..
> I've created a template using AP DIVs as layers. I want
to absolute
> center the DIVs for any size screen on the internet so
that the layers
> appear with equal white space on either side of the AP
DIV.
use
Try this:
position:absolute;
left:50%;
marging-left: - the value to use here is half of the width of
your DIV;
top:50%;
marging-top: - the value to use here is half of the height of
your DIV;
Note that you need to use "-" (minus) as these values are to
set neagtive
margin
Thierry
Articles and Tutorials:
http://www.TJKDesign.com/go/?0
http://www.divahtml.com/products/scripts_dreamweaver_extensions.php
- divaGPS - Add "you are here" highlighting to virtually any
menu
- divaFAQ - Create FAQ pages that toggle (show/hide) the
answers
- divaPOP - Easy, clean, standards-compliant popup windows.

Similar Messages

  • Is it possible to keep centered an AP div into another div?

    I have a division block with sizes set in ems containing some
    text at the top and another div at the bottom with a picture in it.
    I want the div with the picture to stay at a certain percentage
    distance from bottom of the containing div block and be centered
    into it when the user increases the text.
    I manage to position the image at the bottom by styling its
    div as AP and the containing div as relatively positioned but I
    can't figure out how to keep the positioning at the center when the
    user increases the text.
    Is this possible?

    Personally, I think the whole approach is big trouble.
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    ==================
    "TC2112" <[email protected]> wrote in message
    news:[email protected]...
    > Hello,
    >
    > How about using the AP div to just control the distance
    from the bottom?
    > Set the left position to 0 and make the width of the AP
    div the same as
    > the blocks div.
    > Remove the red background color so it is transparent.
    >
    > Then, in that AP div insert a div with the width of
    339px and the same
    > height as the AP div, 245px.
    > Give this div the red background color and a left and
    right margin of
    > auto.
    > Put the image in this div.
    >
    > Now this div will center in the AP div, so it's centered
    in the blocks
    > div, and the AP div will keep it 5% from the bottom.
    >
    > Murray may offer a better solution, but it was fun to
    think about this
    > one.
    >
    > Here's the code:
    >
    http://tnsgraphics.com/ctrimg.htm
    >
    > By the way, if the red background isn't part of your
    design and was to
    > just help show the issue, then you actually don't even
    need the inner div.
    > Just give the image a left and right margin of auto:
    >
    >
    http://tnsgraphics.com/ctrimgnoRED.htm
    >
    > Take care,
    > Tim
    >
    >
    >
    >
    > "emil emil" <[email protected]> wrote
    in message
    > news:[email protected]...
    >> Thank you Murray, the content is fed from an XML
    file but I'm not
    >> including it
    >> since the problem can be seen without it. With the
    XML content it just
    >> becomes
    >> 4 blocks like the one currently in the code.
    >>
    >> <!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"
    >> xmlns:spry="
    http://ns.adobe.com/spry">
    >> <head>
    >> <meta http-equiv="Content-Type"
    content="text/html; charset=utf-8" />
    >> <title>Untitled Document</title>
    >> <script src="SpryAssets/xpath.js"
    type="text/javascript"></script>
    >> <script src="SpryAssets/SpryData.js"
    type="text/javascript"></script>
    >> <script type="text/javascript">
    >> <!--
    >> var QqQqQq = new
    Spry.Data.XMLDataSet("plants_data.xml", "plants/plant");
    >> //-->
    >> </script>
    >> <style type="text/css">
    >> <!--
    >> .blocks {
    >> float: left;
    >> width: 22em;
    >> margin-bottom: 2em;
    >> background-color: #CCCCCC;
    >> padding-left: 0.5em;
    >> margin-top: 1em;
    >> text-align: left;
    >> margin-right: 2em;
    >> height: 25em;
    >> padding-right: 0.5em;
    >> position: relative;
    >> }
    >> #wrapper .blocks #pictures {
    >> text-align: center;
    >> bottom: 5%;
    >> position: absolute;
    >> width: 339px;
    >> left: 4%;
    >> background-color: #FF0000;
    >> height: 245px;
    >> }
    >> body {
    >> margin-top: 0px;
    >> }
    >> #wrapper {
    >> width: 54em;
    >> margin-right: auto;
    >> margin-left: auto;
    >> }
    >> -->
    >> </style>
    >> </head>
    >>
    >> <body>
    >> <div id="wrapper" spry:region="QqQqQq">
    >> <div spry:repeat="QqQqQq">
    >> <div class="blocks">
    >> <div>{name}</div>
    >> <div>{description}</div>
    >> <div>{size}</div>
    >> <div id="pictures"><img
    src="images/large/{image}" /></div>
    >> </div>
    >> </div>
    >> </div>
    >>
    >> </body>
    >> </html>
    >>
    >
    >

  • Help a newbie on centering a Master Div for fixed site.

    I'm 1 day into using Dreamweaver CS5.5 and creating a website. I'm sure I'm in way over my head. I have created a one-page fixed layout website so far and just watched a tutorial video on how to center it inside a browser.
    It said to put a <div> after the opening <body> and close the div before the body. I did that. It then told me to create a rule that looks like the following:
    #Master   {
       width: 1024;
       margin: 0px auto;
    Then it said to assign the rule to the new div. So I wrote it like this:
    <div id="Master">
    But it's not working. My largest div width is 1024 so it should catch everything. I'm guessing something is over ruling it? Any thoughts?
    If it helps, the site I'm building for a guy is: www.cloudcoverage.co.uk
    If I can provide any other details, please let me know. Thanks everyone.

    Murray *ACP* wrote:
    It's not a good idea to build a site which relies on Absolute Positioning. Just to clarify why I say this - zoom into your site using the browsers zoom feature and you will find that the text at the bottom of the site starts to overlap and even disappear.
    Actually the zoom feature will only do this if you are set to zoom text only.  Zooming without that does not disproportionately enlarge the text - it enlarges everything.
    For sure. But my thinking is IF people do only set the zoom to enlarge the text it breaks down. So better safe than sorry. Of course it does bring into question all sorts of IF's and BUT's and why some may think its acceptable to use AP positioning given modern browsers will now zoom everything. I guess if/once the 'zoom text only' feature disappears you have to call into question why not build using AP positioning. The web will then become much like DTP.

  • Expand a centered div's width incrementally

    I have a gallery in which I want to to expand to the width of the screen doing "auto width", but then add as many thumbnails across as possible. Then center that main gallery div so it's in the middle of the screen.
    Keep in mind the number of images being displayed across each row is dynamically controlled by the width of the users screen. Below is the html I have so far.
    Thanks
    Here is the result I have right now.
    I want this though.
    <!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" />
    <title>Untitled Document</title>
    <style type="text/css">
    @charset "utf-8";
    /* HTML5 RESET */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
              margin: 0;
              padding: 0;
              border: 0;
              font-size: 100%;
              font: inherit;
              vertical-align: baseline;
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
              display: block;
    body {
              line-height: 1;
    ol, ul {
              list-style: none;
    blockquote, q {
              quotes: none;
    blockquote:before, blockquote:after,
    q:before, q:after {
              content: '';
              content: none;
    table {
              border-collapse: collapse;
              border-spacing: 0;
    #wrapper {
              height: auto;
              width: auto;
              background-color: #0CC;
    #gallery {
              height: auto;
              background-color: #09C;
              margin-right: auto;
              margin-left: auto;
              padding-right: 20px;
              padding-left: 20px;
              width: auto;
              overflow: auto;
    .clearboth {
              clear: both;
              height: 0px;
              width: auto;
    .itempreview {
              height: 300px;
              width: 300px;
              background-color: #3FF;
              float: left;
              margin-right: 10px;
              margin-bottom: 20px;
              margin-left: 10px;
    </style>
    </head>
    <body>
    <div id="wrapper">
    <div id="gallery">
                    <div class="itempreview"> </div><!--itempreview end-->
                    <div class="itempreview"> </div><!--itempreview end-->
                    <div class="itempreview"> </div><!--itempreview end-->
                    <div class="itempreview"> </div><!--itempreview end-->
                    <div class="itempreview"> </div><!--itempreview end-->
    <div class="itempreview"> </div><!--itempreview end-->
    <div class="itempreview"> </div><!--itempreview end-->
                    <div class="itempreview"> </div><!--itempreview end-->
                    <div class="itempreview"> </div><!--itempreview end-->
              </div>
    </div>
    </body>
    </html>

    I wasn't sure if there was a way to incrementally adjust the width of that wrapper div so it would then always be centered.
    To do so it would take an equation. One which would take the total width of the viewport and divided it by "320px" which each div is 300 and then the additional 20px for the padding on each side. Then it would round down to the nearest whole number. Then making the div wide enough to fit that "number of divs" and then centering the wrapper div in the viewport.
    Example:
    screen size = 1800 x 1200px
    thumbnail/div size = 300 x 300px
    -equation for seeing how many divs can fit width wise on the screen (screen width / thumbnail size)
    1800 / 300 = 5.625
    round 5.625 to the nearest whole number which eaquals 5.
    so then there will be 5 thumbnails displayed in each row. Then center that wrapper div.
    I don't know how to write js or else I'd write up an equation.
    Is something like that possibe? And then have it update is the user changes there viewport size.

  • CSS Centered & Fixed Width Layout

    I'm trying to use CSS for building a new layout and do so without resorting to the old methods, like using tables. But I can't even get past a very basic thing using Dreamweaver CS5.5. I want the page layout to be a fixed width yet centered in the browser window instead of stuck to the left. Lots of web sites do this (even Adobe's main site).
    In the past I would just create a parent table and simply give it a center alignment then build everything else inside of it. Easy. Unless I'm overlooking something obvious there appears to be no way at all to apply the same sort of alignment property to a DIV-based container. Dreamweaver provides lots and lots of other formatting options, but page alignment for that DIV object isn't there.
    If I could just get the first big overall DIV centered on the page where I want it I think I could use absolute positioning on the DIVs inside of it.
    I've searched around for examples on how to code CSS to make this work, but haven't been able to simply cut and paste the code into Dreamweaver to make it happen. I need to learn how to do this correctly using Dreamweaver's own CSS property dialog boxes.

    If I could just get the first big overall DIV centered on the page where I want it I think I could use absolute positioning on the DIVs inside of it.
    OMG no.  You don't want to use absolute positioning at all, until you understand CSS positioning fully.
    Read this to get an idea how to do your layout -
    http://www.apptools.com/examples/pagelayout101.php
    HTML & CSS Tutorials - http://w3schools.com/
    How to Develop with CSS?       
    http://phrogz.net/css/HowToDevelopWithCSS.html
    Learn CSS positioning in 10 Steps
    http://www.barelyfitz.com/screencast/html-training/css/positioning/
    ========================================
    PRE-BUILT CSS LAYOUTS
    For rock solid, commercial products that perform well in all browsers/devices, visit Project Seven:
    http://www.projectseven.com/products/index.htm
    Not Just a Grid CSS Framework (free)
    http://www.notjustagrid.com/demo.asp
    Ultimate Multi-Column Layouts (free)
    http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layout s-em-and-pixel-widths
    EZ-CSS Templates (watch the screencast to see how it works)
    http://www.ez-css.org/css_templates
    Dreamweaver CSS Templates for beginners (free)
    http://www.adobe.com/devnet/dreamweaver/articles/dreamweaver_custom_te mplates.html
    New DW Starter Pages (free)
    http://www.adobe.com/devnet/dreamweaver/articles/introducing_new_css_l ayouts.html

  • Changing background Image of a DIV on RO

    I am trying to figure out how to change the background image of a div upn Roll-Over (RO) from the users mouse.
    My search thus far has led me to javascript, but if any other ideas/method are known, i have no preference for any language.
    I have a horizontal menu w/ 3 divs and a single word centered inside each div. I wish to use each of these divs as buttons w/ RO effects.
    To do this i wanted to try and make it so upon roll,over the bg would be replaced with a modified version of the normal bg of the div's.
    css rules did not work, and i am trying JS now.
    Here are some snippets of code that i have writtin and made from sources i have found online but it still does not appear to work when i test in Firefox.
    Here is the addition to the <HEAD> part of my html page.
    <script src="../quirksmode.js"></script>
    <script type="text/javascript">
         function mouseover(id)
         document.getElementById(id).style.background="url('/images/objects/optionsBarADark.png') no-repeat";
         function mouseout(id)
         document.getElementById(id).style.background="url('/images/objects/optionsBarA.png') no-repeat";
    </script>
    and here is the code in the html page which is supposed to make the rollover casue the bg to change. (note that i have not added links to the text in the center of the divs yet)
         <div id="middleWrapper">     <!-- middle content wrapper -->
             <div id="contentMenu">          <!-- start of menu -->
                 <img class="contentMenuDividers" src="images/objects/optionsBarA.png" width="4" height="28" alt="option bar" /> <!-- filler -->
                <div class="contentMenuButtons" id="theID1" onmouseover="mouseover(theID1)" onmouseout="mouseout(theID1)">
                     <h1 class="contentMenuHeaders">projects</h1>
                </div>
                <img class="contentMenuDividers" src="images/objects/optionsBarA.png" width="4" height="28" alt="option bar" />  <!-- filler -->
            <div class="contentMenuButtons" id="theID2" onMouseOver="changeHeader(theID2,'1');" onMouseOut="changeHeader(theID2,'2');">
                     <h1 class="contentMenuHeaders">catalog</h1>
              </div>
                <img class="contentMenuDividers" src="images/objects/optionsBarA.png" width="4" height="28" alt="option bar" />  <!-- filler -->
                <div class="contentMenuButtons" id="theID3" onMouseOver="changeHeader(theID3,'1');" onMouseOut="changeHeader(theID3,'2');">
                     <h1 class="contentMenuHeaders">featured*</h1>
                </div>
                <img class="contentMenuDividers" src="images/objects/optionsBarA.png" width="4" height="28" alt="option bar" />  <!-- filler -->
            </div>
    and here is some css for the affected class. the a, and a:hover rules are left-over from when i had the text linked.
    .contentMenuButtons {
         float: left;
         height: 28px;
         width: 308px;
         background-image: url(../images/objects/optionsBarA.png);
         background-repeat: no-repeat;
         text-align: center;
         line-height: 27px;
    .contentMenuButtons a {
         color: #F9FBFB;
         text-decoration: none;
    .contentMenuButtons a:hover {
         color: #F9FBFB;
         text-decoration: none;
    if you need anything else from the code let me know, but this is everything i have added to try and get this to work.
    Any ideas?

    I agre with SnakEyez  :-)
    Your method seems to be the long way of doing a simple roll-over menu.
    Lots of examples here as well:
    Basic css menus: horizontal / vertical:
    http://css.maxdesign.com.au/listamatic/index.htm

  • Question on positioning div elements

    I have a wrapper div and a footer div below that. I want to
    center the wrapper div in the middle of the page and then position
    sub elements within this wrapper div. For example, I would like to
    create a "nav" div and an "actual content" div within the wrapper
    div. I learned that I can relatively position the wrapper div to be
    in the middle of a page regardless of screen width and then
    absolutely position the "nav" div and "actual content" within the
    wrapper div. The problem with this is that as soon as I absolutely
    position the "actual content" div within the wrapper div then the
    footer div jumps up the page to be right in the middle of the
    wrapper div when it should be located completely below the wrapper
    div. The other way of doing it would be to relatively position (or
    don't specify) both the nav and actual content divs and just float
    the nav to the left. This seems to work but I am wondering why the
    footer jumped up when I tried to absolutely postion divs in the
    wrapper div. Is there a way to not make the footer jump up and also
    what is the standard way of doing this?

    This may help you understand positioning a bit -
    There are 4 different types of positioning:
    Absolute
    Relative
    Fixed
    Static
    Here is a brief explanation of each kind of positioning (with
    regard to
    placement of elements on the page only)....
    Position:absolute (or A/P elements)
    This does several things -
    1. It 'removes' the element from the flow of the code on
    the page so that
    it can no longer influence the size or position of any other
    page element
    (except for those contained within it, of course).
    2. The absolutely positioned element takes its position from
    the position of
    its closest PARENT *positioned* element - in the
    absence of any explicitly
    positioned parent, this will default to the <body> tag,
    which is always
    positioned
    at 0,0 in the browser viewport.
    This means that it doesn't matter where in the HTML code the
    layer's code
    appears (between <body> and </body>), its
    location on the screen will not
    change (this assumes that you have not positioned the A/P
    element within
    a table or another A/P element, of course).
    Furthermore, the space in
    which
    this element would have appeared were it not positioned
    is not preserved
    on the screen. In other words, absolutely positioned elements
    don't take
    up any space on the page. In fact, they FLOAT over the page.
    Position:relative (or R/P elements)
    In contrast to absolute positioning, a relatively positioned
    page element is
    *not* removed from the flow of the code on the page, so
    it will use the
    spot
    where it would have appeared based on its position in
    the code as its
    zero point reference. If you then supply top, right,
    bottom, or left
    positions
    to the style for this element, those values will be
    used as offsets from
    its
    zero point.
    This means that it DOES matter where in the code the
    relatively positioned
    element appears (, as it will be positioned in that location
    (factoring in
    the offsets) on the screen (this is true for any placement in
    the code).
    Furthermore, the space where this element would have
    appeared is
    preserved in the display, and can therefore affect the
    placement of
    succeeding elements. This means that the taller a relatively
    positioned element is, the more space it forces on the page.
    Position:static
    As with relative position, static positions also "go with
    the flow". An
    element with a static position cannot have values for
    offsets (top, right,
    left, bottom) or if it has them, they will be ignored. Unless
    explicitly
    positioned, all div elements default to static positioning.
    Position:fixed
    A page element with this style will not scroll as the page
    content scrolls.
    Support for this in elements other than page backgrounds is
    quirky
    There are several other things you need to know:
    1. ANY page element can be positioned - paragraphs, tables,
    images, lists,
    etc.
    2. The <div> tag is a BLOCK level tag. This means that
    if it is not
    positioned or explicitly styled otherwise, a) it will always
    begin on a new
    line on the screen, and b) it will always force content to a
    new line below
    it, and c) it will always take up the entire width of its
    container (i.e.,
    width:100%).
    3. The placement of A/P elements *can* affect the BEHAVIOR of
    other
    elements
    on the page. For example, a 'layer' placed over a hyperlink
    will mask that
    hyperlink.
    You can see a good example of the essential difference
    between absolute and
    relative positioning here -
    http://www.great-web-sights.com/g_layersdemo.asp
    You can see a good demonstration of why using layers for a
    page layout tool
    is dangerous here -
    http://www.great-web-sights.com/g_layer-overlap.asp
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    ==================
    "Johnny the boy" <[email protected]> wrote
    in message
    news:[email protected]...
    >I have a wrapper div and a footer div below that. I want
    to center the
    >wrapper
    > div in the middle of the page and then position sub
    elements within this
    > wrapper div. For example, I would like to create a "nav"
    div and an
    > "actual
    > content" div within the wrapper div. I learned that I
    can relatively
    > position
    > the wrapper div to be in the middle of a page regardless
    of screen width
    > and
    > then absolutely position the "nav" div and "actual
    content" within the
    > wrapper
    > div. The problem with this is that as soon as I
    absolutely position the
    > "actual content" div within the wrapper div then the
    footer div jumps up
    > the
    > page to be right in the middle of the wrapper div when
    it should be
    > located
    > completely below the wrapper div. The other way of doing
    it would be to
    > relatively position (or don't specify) both the nav and
    actual content
    > divs and
    > just float the nav to the left. This seems to work but I
    am wondering why
    > the
    > footer jumped up when I tried to absolutely postion divs
    in the wrapper
    > div.
    > Is there a way to not make the footer jump up and also
    what is the
    > standard way
    > of doing this?
    >

  • How to keep content centered in full screen mode

    I've searched all over Google and in here but am surprised to
    find nobody else with the same problem!
    How do you keep all of the items centered inside a Div when
    switching to full screen mode in IE? Everything in my "#global" Div
    shifts upwards creating a big mess and doesn't stay where it should
    in my content box (which is part of the background. There's no
    problems when resizing the window by dragging, just when using full
    screen mode. Here is my body and #global code:
    body {
    background-image: url(images/background2.jpg);
    background-color:#ECE5C8;
    background-repeat:no-repeat;
    background-position: 50% 50%;
    margin-top: 4%;
    margin-bottom:4%;
    #global {
    margin:auto;
    position:relative;
    width: 784px;
    height:554px;

    > background-position: 50% 50%;
    > margin-top: 4%;
    > margin-bottom:4%;
    Why use a percentage margin?
    Can we see the rest of the page?
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    ==================
    "afriendofcheese" <[email protected]> wrote
    in message
    news:g8gaha$oh7$[email protected]..
    > I've searched all over Google and in here but am
    surprised to find nobody
    > else
    > with the same problem!
    >
    > How do you keep all of the items centered inside a Div
    when switching to
    > full
    > screen mode in IE? Everything in my "#global" Div shifts
    upwards creating
    > a
    > big mess and doesn't stay where it should in my content
    box (which is part
    > of
    > the background. There's no problems when resizing the
    window by dragging,
    > just
    > when using full screen mode. Here is my body and #global
    code:
    >
    > body {
    > background-image: url(images/background2.jpg);
    > background-color:#ECE5C8;
    > background-repeat:no-repeat;
    > background-position: 50% 50%;
    > margin-top: 4%;
    > margin-bottom:4%;
    > }
    >
    > #global {
    > margin:auto;
    > position:relative;
    > width: 784px;
    > height:554px;
    > }
    >
    >
    >
    >
    >

  • How to put type in a footer div that already has an image

    Very beginner question - but I can't seem to get the copy to go into the div.
    Here's my code:
      <div id="footer" class="footer">
         <img src="images/final images/inquiries-footer02.jpg" alt="Inquiries, Inc. footer" width="950" height="50" border="0" />
         Copyright &copy; 2011 Inquiries, Inc. • <a href="mailto:[email protected]">[email protected]</a>
      </div>
    Here's what it looks like:
    Thanks for taking a look!

    Thanks, here's what I have... Finally got it loaded to a test site: http://inquiriesinc.alisonquarles.com/
    #footer {
    width:950px;
    height:50px;
    border-top-color: #666;
    border-top-style: solid;
    border-top-width: thin;
    clear: both;
    .footer {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #C03;
    text-decoration: none;
    text-align: center;
    I want the type to be centered in the div on top of the image.
    The top nav is set up in Photoshop for the moment but I'll need to rework it sooner or later.

  • IE7 seems to "hide" text in DIV tags

    Hi Guys
    How can I solve this? I would like to have the text horizontally and vertically centered in the DIV-tags. It goes quite well but in Internet Explorer 7 it only shows half of the text.
    How to solve this?
    And an additionnal question: I would like the lowest of the three buttons to be nearly pasting to the bar you can see under it. In Internet Explorer, that goes smoothly, but in Google Chrome or Firefox there's a lot of space between the button and the bar?
    Thanks!
    Bob

    I'm not certain what you're using now, but I would write the css code something like this...
    .centered {
         font-family:verdana;
         font-size:12px;
         font-weight:bold;
         line-height:20px;
         text-align:center;
         width:150px;
         height:20px;
         background-color:purple;
         border-radius:5px;
    Then the html would look like this...
    <div class="centered">some text</div>
    It's hard to say what's going on with yours though without a link to the actual page.

  • Centering Background Image

    After countless hours of using the forums I finally am
    posting my first question.
    Is there a way to center the background image that is set
    through page properties? I have a centered table and it would be
    nice to have a continuous background.
    Any help would be appreciated.

    Or you could do what Murray just said :-) But through
    standard html, no.
    Lawrence Cramer
    *Adobe Community Expert* - Dreamweaver -
    http://tinyurl.com/jhnyq
    email: lawrence at cartweaver dot com
    Cartweaver CF, ASP & PHP Shopping Cart for Dreamweaver
    www.cartweaver.com
    news://support.cartweaver.com
    =====================================================
    "Lawrence *Adobe Community Expert*"
    <[email protected]> wrote in
    message news:emuj2u$636$[email protected]..
    > Nope, you can't center a page background image. You have
    to work from the
    > top left hand corner.
    >
    > Now you could create a fixed width, floating, centered
    "master container"
    > div and have a background image for this div. Then place
    all your
    > content in this container. This would give you the
    illusion of a centered
    > page background.
    >
    > Hope this helps.
    > --
    > Lawrence Cramer
    > *Adobe Community Expert* - Dreamweaver -
    http://tinyurl.com/jhnyq
    > email: lawrence at cartweaver dot com
    >
    > Cartweaver CF, ASP & PHP Shopping Cart for
    Dreamweaver
    > www.cartweaver.com
    > news://support.cartweaver.com
    > =====================================================
    >
    >
    > "cheesewagon" <[email protected]> wrote
    in message
    > news:emuhmn$4hv$[email protected]..
    >> After countless hours of using the forums I finally
    am posting my first
    >> question.
    >>
    >> Is there a way to center the background image that
    is set through page
    >> properties? I have a centered table and it would be
    nice to have a
    >> continuous
    >> background.
    >>
    >> Any help would be appreciated.
    >>
    >>
    >
    >

  • Centering text onto an image.

    How do you do it?
    For example
    g.drawImage(image, x, y, Graphics.HCENTER | Graphics.VCENTER);
    g.drawString("text", x, y, Graphics.HCENTER | Graphics.BOTTOM);does not work, I could try all different variations of positions; Top, Bottom, Vcenter, Hcenter for both graphics and text and the text still won't center onto the image, absolutely centered.
    Of course if Vcenter would work for text it'd probably do the job but that of course isn't allowed, in order for me to work around this at the moment I have to add a number to drawstring which looks like this.
    g.drawString("text", x, y+textAdjust, Graphics.HCENTER | Graphics.BOTTOM);Of course this is useless if ported onto another phone with a different screen size.
    Any help would be apreciated thanks.
    Edited by: GLGunblade on Jul 27, 2010 7:41 AM

    Though before I go changing every image in my code (It's a lot of images), is there no way to just alter text placement or does it have to be the background image to fit the text?Not sure what you mean here... What do you mean by changing every image?
    This simple calculation I have pasted in my previous post lets you position both text and image, so that their centers are aligned, which I think is what you want to achieve.
    All you have to do is to establish the height of the image and the height of the text every time you paint them, which is just a matter of calling some APIs.
    Daniel

  • SWF not aligning to bottom of div tag?

    I'm trying to build a tight site and have an .swf file that RELIES on being at the absolute bottom of its div section, but when I put it in and look at it online, there's a small gap between the .swf file and the next div.  It's HORRIBLE.  http://www.hrwisellc.com/newsite
    How do I fix this?

    Can't be done reliably, but you can fool people into thinking you have done so.  Google "Faux Columns".

  • Horizontal center align multiple divs

    I have a container div (#div1), which contains 5 child divs (#div2, #div3, #div4, #div5, #div6) contained inside it.
    The code is something like this:
    <div id="div1">
    <div id="div2">Content2</div>
    <div id="div3">Content3</div>
    <div id="div4">Content4</div>
    <div id="div5">Content5</div>
    <div id="div6">Content6</div>
    </div>
    The Content2,3,4,5,6 are all of different length.
    I want to align the 5 child divs (#div2, #div3, #div4, #div5, #div6) horizontally in one row inside the container #div1, such that the vacant space inside #div1 gets uniformly distributed between the child divs and the child divs become uniformly aligned in the "center".
    The main code for all child divs is (id no is the only thing changed to 3,4,5,6 etc)
    #div2{
    width: 23%;
    position: relative;
    margin:0px auto;
    white-space:normal;
    *display: inline;
    _display: inline;
    *margin: 0 2px 0 2px;
    display:INLINE-block;
    float:none;
    The main code for container #div1 is
    #div1{
    margin:0px auto;
    width:98%;
    text-align:center;
    vertical-align:top;
    white-space:nowrap;
    position:relative;
    display:block;
    float:none;
    However the above code only centers the child div on localhost in IE and Chrome Browser. However on the remote production server it aligns all child divs in one row only in Chrome browser. In IE9, it aligns all the child divs in one single column below one another instead of in one row as shown when hosted on localhost.
    If we change float to left or right for child div, no centering takes place and instead all the child divs align to one side. If the display property of child div is changed to block, the centering fails even on localhost. If the display is changed to inline, the div width becomes 100% automatically and it occupies the complete with of container.
    Can some one advise on how to ensure uniform horizontal alignment of all child divs in one row on localhost as well as actual remote site server on IE (>=IE6, all other browsers also). I would prefer if display:inline-block is also avoided (display:block or inline is preferred) as it may not be supported in earlier browsers.

    when margin-left:2%, the suggested code is making the div before gap d dropoff to next row.
    Each descendent div will have an effective width of 18% + 2% = 20%.  There are 5 such divs.  20% x 5 = 100%.  Thus 100% of the space available in div1 will be filled - no more no less.  Bear in mind that the container div is set at a percent width as well, meaning that the resulting number may not produce even results when 18% and 2% are caclulated, i.e., there will be a rounding error.  Also bear in mind that the left-most div in my example will also have the margin applied.  You can eliminate that by a bit more CSS trickery (this applies the margin only to divs that are not the first child of div#div1) -
    <style type="text/css">
    #div1 div {
              width: 18%;
              margin-left:2%;
              float:left;
    #div1 div:first-child {
          margin-left:0;
    #div1 {
              margin:0px auto;
              width:95%;
              background-color:#CCC;
              overflow:hidden;
    </style>
    That method, however, will leave some variable gap to the right of the last div because of the rounding error and the fact that you are now only using up 18% + 20% + 20% +20% + 20% = 98% of the total space.
    Be aware that you will need to invoke Live mode to see this render properly in DW.
    This approach is simply a variant of the approach shown on css-tricks (which will also fail depending on the width of the containing element.  I suggest you NOT use a containing element that is percent sized and set a fixed width for it.  That will alow you to specify your interior spacing with no rounding error.

  • How do you position text in a div tag to be in the center vertically?

    Can someone help?  I am struggling to convert from being dependent on tables to design sites to using all css and divs.  Anyway, in my practice file, i made a header that is styled to be 50 pixels tall.  The type in the header goes to the top.  I am used to having type default to to the left and positioned vertically in the center they way type "works" when placed in a <td>. What am I not "getting?" I would like to know that if I change the css for the header region from 50 to another value that the type will always be positioned where I want it. 
    thanks in advance for any suggestions.  Maybe the picture I've attached will better explain what I'm talking about. Oh, and I've also attached the html file

    HudsonSwimmer wrote:
    Can someone help?  I am struggling to convert from being dependent on tables to design sites to using all css and divs.  Anyway, in my practice file, i made a header that is styled to be 50 pixels tall.  The type in the header goes to the top.  I am used to having type default to to the left and positioned vertically in the center they way type "works" when placed in a <td>. What am I not "getting?" I would like to know that if I change the css for the header region from 50 to another value that the type will always be positioned where I want it. 
    thanks in advance for any suggestions.  Maybe the picture I've attached will better explain what I'm talking about. Oh, and I've also attached the html file
    I'm afraid you'll have to starting looking at things differently. Css cannot yet vertically centre anything in a <div> container reliably.
    About as good as it gets is one line of text (see code below) using the line-height attribute AND you need to give the <div> a height too which is also likely to lead to other problems. So forget it. You can use padding and margin to push it into a 'visual position vertically centered' in your browser but there is no guarantee that others with different browser set ups will be seeing it the same.
    <!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" />
    <title>Untitled Document</title>
    <style type="text/css">
    #vertCentre {
    height: 300px;
    background-color:#FF0;
    line-height: 300px;
    text-align: center;
    p {
    font-family: verdana, helvetica, arial, sans-serif;
    font-size: 12px;
    margin: 0;
    padding: 0;
    </style>
    </head>
    <body>
    <div id="vertCentre"><p>This is some vertically centered text</p></div>
    </body>
    </html>

Maybe you are looking for