Div tags problem on centered layout

Like the title says, I'm working on a centered layout and I
need to place a div tag that has an overflow for scrolling. The
problem is what do I do so that it does just that. I tried using an
AP div tag but it doesn't follow the rest of the layout if you play
with the browser width. And if I simply put a div tag in my table,
I don't know how to put an overflow on it. I only have a limited
amount of space for the text, and I have too much text to simply
put it in the table. It's my first time working on a centered
layout, so I'm kind of at a lost right now. And that's the only
thing stopping me from putting it online.

> And if I simply put a div tag in
> my table, I don't know how to put an overflow on it.
<div style="overflow:scroll">
> I only have a limited
> amount of space for the text, and I have too much text
to simply put it in
> the
> table.
If that's the case, then you have a broken layout scheme, and
a usability
problem.
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
==================
"cprime" <[email protected]> wrote in
message
news:g6n78v$qmn$[email protected]..
> Like the title says, I'm working on a centered layout
and I need to place
> a div
> tag that has an overflow for scrolling. The problem is
what do I do so
> that it
> does just that. I tried using an AP div tag but it
doesn't follow the rest
> of
> the layout if you play with the browser width. And if I
simply put a div
> tag in
> my table, I don't know how to put an overflow on it. I
only have a limited
> amount of space for the text, and I have too much text
to simply put it in
> the
> table. It's my first time working on a centered layout,
so I'm kind of at
> a
> lost right now. And that's the only thing stopping me
from putting it
> online.
>

Similar Messages

  • Ap Div Tag Problem

    OK so this is my first wbesite in dreamweaver so and i ran into a problem....i made a AP div tag but i can get it where i want it.....my backrground is center in the website and i put my nav links in a AP div tag so i could then put them in a certain area where i wanted.(i think is the only way i know hjow to do this)  Well how can i get them centered left and right in the website but the top and bottom i want to place by hand???? they are where they need to be when i preview it in the browser but in the dreamweaver file they are down and to the right......i had to keep messing with it and previewin it until it showed up where i wanted it to in the browser. Im sure i have a setting worng either in my CSS or html.... Please help!

    First rule of web design is to stop thinking like a graphic or print designer.  Web pages need to be flexible to perform well on different devices, browsers, user settings, screen and text sizes.  And web designers have almost no control over these user-centric variables.
    The second rule of web design, you cannot precisely position text or other elements on top of big background image and expect it to stick.  It just doesn't work.
    http://alt-web.com/Backgrounds.shtml
    If your navigation bar requires a background, it should be separate from the page background. You'll need to use solid colors or create image slices for your nav bar in your graphics editor.
    Third rule, use default CSS positioning (which is no positioning at all).  Align objects with CSS margins, padding and floats.
    Basic CSS Layout.  (No APDivs used, no animals were harmed)
    http://alt-web.com/TEMPLATES/Basic-1-col-fixed.html
    Also read this tutorial:
    Taking  a Fireworks (or Photoshop) comp to a CSS based layout in DW
    http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html
    Good luck with your project!
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    www.alt-web.com/
    www.twitter.com/altweb
    www.alt-web.blogspot.com

  • HTML or PHP visibility div tag problem in IE

    Hi,
    I have a PHP search function on a travel site a programmer
    did for me. When you look at it in FF and Safari, it looks fine.
    But in IE, there is a big blank space where the calendar function
    goes. He has the div tag set to visibility:hidden. Any ideas how to
    make it look right in IE as well?? Any help would be appreciated!
    The PHP code is below:
    He thinks the problem is here in this part of the code:
    <div id="kalendar" style="visibility:hidden; width:0px;
    height:0px; border:0;">
    //then goes some tables
    </div>
    Any help would be much appreciated...we are stumped!
    Thanks

    >
    http://www.bluehippotravel.com/surfingvacations
    404 on that link.
    > Does this tell you anything?
    Unfortunately, yes. The person who coded this has no sense of
    best practice
    in HTML authoring....
    I'd like to see the page in the wild if I could - can you
    investigate the
    404, please?
    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
    ==================
    "Lvanhoff" <[email protected]> wrote in
    message
    news:[email protected]...
    > Murray,
    > As always you are a genius :-)
    >
    > The only problem I still have, and only in IE, not FF,
    is that the drop
    > down
    > menus are cutting part of themselves off...any idea why?
    >
    http://www.bluehippotravel.com/surfingvacations
    > Top left...see how the arrows are cut off on the drop
    downs?
    >
    > Not sure if its ok to post to page??
    >
    > I didn't do this part of the page...so not sure how it
    was done...
    > Does this tell you anything?
    >
    > <table bgcolor="#f7ebb3" class="search"
    style="table-layout: fixed;
    > padding:0px" border="0">
    > <tr><td colspan="4" width="auto">
    > <select size="1" class="search" id="country"
    > onchange="javascript:listajzemlje(this.value)">
    > <?php
    > drzave();
    > ?>
    > </select>
    > </td></tr>
    > <tr><td colspan="4" width="auto">
    > <div id="state1">
    > <input type="hidden" id="state" value="" >
    > <input type="hidden" id="city" value="" >
    >
    > </div></td></tr>
    > <tr>
    >
    >
    > <td colspan="4" width="auto">
    > <input class="search" id="hotel" name="hotel" value="
    Hotel name
    > (optional)" />
    >
    >
    >
    > <tr><td colspan="4" style="cursor:pointer;"
    onClick="showKalendar()"
    > class="search" >
    >
    > <img class="search"
    src="images/btn-hotelmenu-searchbydate.jpg"
    > alt="Search by
    > date (optional) ">
    > </td></tr>
    > <tr><td colspan="4">
    > <div id="kalendar" style="display:none; width:0px;
    height:0px;
    > border:0;layout:fixed">
    >
    > <table border="0" class="submenucolor" align="center"
    width="auto">
    >
    > <tr>
    > <td></td><td></td>
    > <td class="HotelSearchMenu" colspan="2"
    align="right">In:<?
    > $aCalendarParams=array(
    > "sIconPath" => "./img/calendar.png",
    > "iAction" => 1, //0=>reloadCurrentPage with get
    param sDate,
    > 1=>fill
    > field sFieldName
    > "sFieldName" => "DPC_date1",
    > "iStyle" => 1, //0=>display calendar,
    1=>display div on icon
    > click
    > "aMonthNames" => $aMonthNames["EN"],
    > "aDaysNames" => $aDaysNames["EN"],
    > "sDateFormat" => $sDateFormat["EN"]
    >
    > );
    > new oCalendarPicker("calFixe1",$sDate,$aCalendarParams);
    > ?></td>
    >
    >
    >
    >
    >
    > </tr>
    >
    >
    > Thanks!
    >

  • Applet Over DIV tag problem

    Hi,
    we are using Div tag along wth applet. While loading we want to freeze the screen. so we set width and height for DIV tag. All textboxes and other thngs are going behind the DIV but not working for applets like Browser, Grid. Applets are coming over the DIV tag when freezing. We set the high Z index forApplet div and low for freezing DIV and also tried in reverse. But it is not working..
    How to solve this problem?
    Regards,
    Senthil

    The problem is that applets are not part of the DOM.   This is why most commonly; iframes are used whenever you need to "dynamically" need to manipulate a MII applet.   You may be better off using an XSLT style sheet transform or AJAX / Javascript framework so that you can more precisely control your grids.
    Some people have tried using OBJECT tags instead of APPLET but I haven't heard of much success in this route.

  • How do I center an image inside a div tag using fluid grid layout?

    where do I find and what do i use the image properties position when using the fluid grid layout. I'd like to center the image in the mobile page versus th left position in the desktop.

    This is what my css codes looks like where the image is in the div tag:
    #logo_links {
        clear: both;
        float: left;
        margin-left: 0;
        width: 32.2033%;
        display: block;
    This is the html code where the image is:
      </div>
        <div id="logo_links">
          <div align="center">
            <p><img src="../fluidgrid/images/3_7x2logo.jpg" alt="" width="236" height="110" align="left"></p>
          </div>
        </div>
    I'm going to need more detail where to insert the suggested code as I am a newby!
    Thanks

  • Div tag problem

    Hi there,
    i am creating a website.i seem to be having a bit of trouble with div tag...i think.the navigation bar and the main content seem to be overlapping each other.any ideas?id appreciated any help.
    thanks.
    <body>
    <div id="header">Heading</div>
    <div id = "nav">
    <ul id="Fyp">
      <li><a href="html/Index.html">Home</a>  </li>
      <li><a href="html/Conventional.html">Conventional Encryption</a></li>
      <li><a href="#">Public Key Encryption</a>
        <ul>
      <li><a href="html/PublicKey-Confidentiality.html">PublicKey-Confidentiality</a></li>
      <li><a href="html/PublicKey-Authentication.html">PublicKey-Authentication</a></li>
      <li><a href="html/Public Key-Confidentiality and Authentication.html">Public Key-Confidentiality and Authentication</a></li>
        </ul>
      </li>
      <li><a href="#">MAC Encryption</a>
        <ul>
      <li><a href="#">MAC - Message Authentication</a></li>
         <li><a href="#">Message Authentication and Confidentiality (Plaintext)</a></li>
         <li><a href="#">Message Authentication and Confidentiality(Ciphertext)</a></li>
    </ul>
      </li>
       <li><a href="#">HASH Encryption</a>
           <ul>
                <li><a href="#">Encryption after Concatenation</a></li>
                <li><a href="#">Encryption before Concatenation</a></li>
                  <li><a href="#">Authentication</a></li>
                <li><a href="#">Authentication and Confidentiality</a></li>
               <li><a href="#">Secret Value</a></li>
              <li><a href="#">Secret Value and Encryption</a></li>
         </ul>
        </li>
       <li><a href="#">Self Test</a></li>
    </ul>
    </div>
    <div id="main_content">
    <p> </p>
    <p>This is the home page for Message Authentication and Digital Signatures.This page will explain the funamental basis of these elements.</p>
    <p> </p>
    <p><strong>Authentication</strong>:</p>
    <p><a name="#Authtentication"></a> 
    The Authentication service is concerned with assuring that a communication is authentic. Authentication acts as an warning or a alarm signal. The function of the authentication service is to assure the recipient that he message is from the source that it calms to be from.</p>
    <p> </p>
    <p><strong>Confidentiality</strong>:</p>
    <p><a name = "Confidenitiality"></a>
      Confidentiality is the protection of transmitted data from passive attacks. This makes sure that the message sent can not be read by anyboby except for the intended recipient  .
    </p>
    <p> </p>
    <p><strong>Public Key:</strong></p>
    <p><a name = "Public Key"></a>
    </p>
    <p><strong>Digital Signature:</strong>
    <p><a name = "Digital Signature"></a></p>
    </p>
    <p><strong>Integrity:</strong>
    <p><a name = "Integrity"></a> </p>
    <p><strong>MAC Function:</strong></p>
      <p><a name = "MAC"></a> </p>
    <p>A MAC (Message Authentication Code) is a small fixed size block of data that is appended to the message. The technique assumes hat two communicating parties say (Source A and B) share a common secret key(k). When A sends a message to B, it calculates the MAC as a function of the message and the key. The recipient performs the same calculation on the received message using the same key, to generate a new MAC. The received MAC and the calculated MAC are then compared. If the received MAC matches the calculated MAC, then the message is said to be authentic.</p>
    </p>
    </div>
    <div id="footer">
    <p>
    Footer - all about the designer and contact links go here
    </p>
    </div>
    </body>
    </html>

    Here ya go.
    body {
      margin:0px;
      padding:0px;
      text-align:center;
      font-size:1.0em;
      font-family:trebuchet ms, tahoma, arial, sans-serif;
    #container {
    text-align:left;
    margin:0px;
    width:1270px;
    border:1px black solid;
    padding: 0px;
    #header  {
    text-align:center;
    width:1270px;
    #width:1022px;
    height:100px;
    font-size:2.0em;
    background-color:white;
    color:white;
    padding-top:0px;
    padding-right:0px;
    border-bottom:1px black solid;
    #nav {
      width:1270px;
      #width:1270px;
      height:24px;
      font-size:0.8em;
      background-color:#20548E;
      color:black;
      border-bottom:1px black solid;
    #main_content {
      width:1270px;
      #width:1022px;
      font-size:0.9em;
      background-color:white;
      color:black;
      border-bottom:1px black solid;
    #footer {
      text-align:center;
      width:1270px;
      #width:1022px;
      height:100px;
      font-size:1.0em;
      background-color:#20548E;
      color:white;
      border-bottom:1px black solid;
    #Fyp
    { margin: 0;
         padding: 0;
    #Fyp li
    { float: left;
      list-style: none;
      font: 12px Tahoma, Arial;
    #Fyp li a
    { display: block;
      background: #20548E;
      padding: 5px 12px;
      text-decoration: none;
      border-right: 1px solid white;
      width: 140px;
      color: #EAFFED;
      white-space: nowrap;
    #Fyp li a:hover
    { background: #1A4473;
      #Fyp li ul
      { margin: 0;
       padding: 0;
       position: absolute;
       visibility: hidden;
       border-top: 1px solid white;
      #Fyp li ul li
      { float: none;
       display: inline;
      #Fyp li ul li a
      { width: auto;
       background: #9F1B1B;
      #Fyp li ul li a:hover
      { background: #7F1616;

  • Div tag problem with gap

    Hello dreamweavers.
    Ive place four divs one next to another till here it seems fine. then I add another Div by the name of article and its causing me
    an issue. It seems fine in the DW work area, but when I see it on the internet it has a huge gap which is cause by the height of the div I think.
    so please take a look at my exampels and code:
    seems fine in DW
    <style type="text/css">
    #one {
              background-color: rgb(0,204,255);
              width: 200px;
              height: 200px;
              float: left;
              margin-left: 45px;
    #container {
              background-color: rgb(153,204,102);
              width: 1024px;
              height: 768px;
              margin-right: auto;
              margin-left: auto;
    #article {
              background-color: rgb(153,51,153);
              height: 200px;
              margin-top: 230px;
              width: 938px;
              margin-left: 43px;
              float: none;
    #two {
              background-color: rgb(153,255,204);
              width: 200px;
              height: 200px;
              float: left;
              margin-left: 45px;
    #three {
              background-color: rgb(255,255,204);
              width: 200px;
              height: 200px;
              float: left;
              margin-left: 45px;
    #four {
              background-color: rgb(204,153,204);
              width: 200px;
              height: 200px;
              float: left;
              margin-left: 45px;
    </style>
    </head>
    <body>
    <div id="container">
    <div id="one">Content for  id "header" Goes here</div>
    <div id="two">Content for  id "two" Goes </div>
    <div id="three">Content for  id "three" Goes Here</div>
    <div id="four">Content for  id "four" Goes Here</div>
    <div id="article">Content for  id "article" Goes Here</div>
    </div>
    </body>
    </html>

    Do it this way
    <!doctype html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    #one {
        background-color: rgb(0,204,255);
        width: 200px;
        height: 200px;
        float: left;
        margin-left: 45px;
    #container {
        background-color: rgb(153,204,102);
        width: 1024px;
        height: 768px;
        margin-right: auto;
        margin-left: auto;
    #two {
        background-color: rgb(153,255,204);
        width: 200px;
        height: 200px;
        float: left;
        margin-left: 45px;
    #three {
        background-color: rgb(255,255,204);
        width: 200px;
        height: 200px;
        float: left;
        margin-left: 45px;
    #four {
        background-color: rgb(204,153,204);
        width: 200px;
        height: 200px;
        float: left;
        margin-left: 45px;
    #article {
        background-color: rgb(153,51,153);
        height: 200px;
        width: 938px;
        margin-left: 43px;
        margin-top: 20px;
        float: none;
    .clear{
            clear:both;
    </style>
    </head>
    <body>
    <div id="container">
      <div id="one">Content for  id "header" Goes here</div>
      <div id="two">Content for  id "two" Goes </div>
      <div id="three">Content for  id "three" Goes Here</div>
      <div id="four">Content for  id "four" Goes Here</div>
      <div class="clear"></div>
      <div id="article">Content for  id "article" Goes Here</div>
    </div>
    </body>
    </html>

  • Why I am not able to see Fluid Grid Layout Div tag

    Why I am not seeing Fluid Grid Layout Div tag In the Insert Layout menu

    DW CC changed the panels.  If you're working in FGLayouts, DW intuitively inserts the correct Div for you.
    Nancy O.

  • Div Tag

    Hello,
    What is the diffrence between Insert Div Tag, Insert Fluid Grid Layout Div Tag and Draw AP Div?
    How to use all these three?
    Where to use all these three?
    What will be the effect in the design with these three?

    Learn CSS positioning in 10 Steps
    http://www.barelyfitz.com/screencast/html-training/css/positioning/
    Default positioning (static or unspecified) is all you need for 98% of layouts. 
    "Drawing boxes" in DW is not a good way to work either. DW is not a graphics editor like Photoshop.  It's a web authoring tool.
    When you draw & move APDivs on your workspace, you remove content from the normal document flow and position them relative to the top, left corner of browser window or the nearest relatively positioned parent container.  
    When you preview the page in browsers, everything falls apart.  APDivs are not a good layout approach.  Here's more on why:
    http://www.apptools.com/examples/pagelayout101.php
    Nancy O.

  • Gap around div tag

    Hello Dreamweavers.
    Ive made a div tag and Ive centered it in the middle of my page. But on the top there is a gap.
    Ive seen some articles where it says to add:
    margin: 0;
    padding: 0;
    Im doing so, but im still getting that gap on the top.
    this is my CSS
    #box1 {
              background-color: #00F;
              height: 200px;
              width: 600px;
              padding: 0px;
              margin: auto;
    I have margin to Auto in order to center the box, is this correct?, there for I add the 0 padding in order to get rid of the gap.

    You could try adding the following to the top of the CSS
        margin: 0;
        padding: 0;
    or better still, add a normalise script as in
    /*! normalize.css v1.1.1 | MIT License | git.io/normalize */
    /* ==========================================================================
       HTML5 display definitions
       ========================================================================== */
    * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    main,
    nav,
    section,
    summary {
        display: block;
    * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
    audio,
    canvas,
    video {
        display: inline-block;
        *display: inline;
        *zoom: 1;
    * Prevent modern browsers from displaying `audio` without controls.
    * Remove excess height in iOS 5 devices.
    audio:not([controls]) {
        display: none;
        height: 0;
    * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
    * Known issue: no IE 6 support.
    [hidden] {
        display: none;
    /* ==========================================================================
       Base
       ========================================================================== */
    * 1. Prevent system color scheme's background color being used in Firefox, IE,
    *    and Opera.
    * 2. Prevent system color scheme's text color being used in Firefox, IE, and
    *    Opera.
    * 3. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
    *    `em` units.
    * 4. Prevent iOS text size adjust after orientation change, without disabling
    *    user zoom.
    html {
        background: #fff; /* 1 */
        color: #000; /* 2 */
        font-size: 100%; /* 3 */
        -webkit-text-size-adjust: 100%; /* 4 */
        -ms-text-size-adjust: 100%; /* 4 */
    * Address `font-family` inconsistency between `textarea` and other form
    * elements.
    html,
    button,
    input,
    select,
    textarea {
        font-family: sans-serif;
    * Address margins handled incorrectly in IE 6/7.
    body {
        margin: 0;
    /* ==========================================================================
       Links
       ========================================================================== */
    * Address `outline` inconsistency between Chrome and other browsers.
    a:focus {
        outline: thin dotted;
    * Improve readability when focused and also mouse hovered in all browsers.
    a:active,
    a:hover {
        outline: 0;
    /* ==========================================================================
       Typography
       ========================================================================== */
    * Address font sizes and margins set differently in IE 6/7.
    * Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
    * and Chrome.
    h1 {
        font-size: 2em;
        margin: 0.67em 0;
    h2 {
        font-size: 1.5em;
        margin: 0.83em 0;
    h3 {
        font-size: 1.17em;
        margin: 1em 0;
    h4 {
        font-size: 1em;
        margin: 1.33em 0;
    h5 {
        font-size: 0.83em;
        margin: 1.67em 0;
    h6 {
        font-size: 0.67em;
        margin: 2.33em 0;
    * Address styling not present in IE 7/8/9, Safari 5, and Chrome.
    abbr[title] {
        border-bottom: 1px dotted;
    * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
    b,
    strong {
        font-weight: bold;
    blockquote {
        margin: 1em 40px;
    * Address styling not present in Safari 5 and Chrome.
    dfn {
        font-style: italic;
    * Address differences between Firefox and other browsers.
    * Known issue: no IE 6/7 normalization.
    hr {
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        height: 0;
    * Address styling not present in IE 6/7/8/9.
    mark {
        background: #ff0;
        color: #000;
    * Address margins set differently in IE 6/7.
    p,
    pre {
        margin: 1em 0;
    * Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
    code,
    kbd,
    pre,
    samp {
        font-family: monospace, serif;
        _font-family: 'courier new', monospace;
        font-size: 1em;
    * Improve readability of pre-formatted text in all browsers.
    pre {
        white-space: pre;
        white-space: pre-wrap;
        word-wrap: break-word;
    * Address CSS quotes not supported in IE 6/7.
    q {
        quotes: none;
    * Address `quotes` property not supported in Safari 4.
    q:before,
    q:after {
        content: '';
        content: none;
    * Address inconsistent and variable font size in all browsers.
    small {
        font-size: 80%;
    * Prevent `sub` and `sup` affecting `line-height` in all browsers.
    sub,
    sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    sup {
        top: -0.5em;
    sub {
        bottom: -0.25em;
    /* ==========================================================================
       Lists
       ========================================================================== */
    * Address margins set differently in IE 6/7.
    dl,
    menu,
    ol,
    ul {
        margin: 1em 0;
    dd {
        margin: 0 0 0 40px;
    * Address paddings set differently in IE 6/7.
    menu,
    ol,
    ul {
        padding: 0 0 0 40px;
    * Correct list images handled incorrectly in IE 7.
    nav ul,
    nav ol {
        list-style: none;
        list-style-image: none;
    /* ==========================================================================
       Embedded content
       ========================================================================== */
    * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
    * 2. Improve image quality when scaled in IE 7.
    img {
        border: 0; /* 1 */
        -ms-interpolation-mode: bicubic; /* 2 */
    * Correct overflow displayed oddly in IE 9.
    svg:not(:root) {
        overflow: hidden;
    /* ==========================================================================
       Figures
       ========================================================================== */
    * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
    figure {
        margin: 0;
    /* ==========================================================================
       Forms
       ========================================================================== */
    * Correct margin displayed oddly in IE 6/7.
    form {
        margin: 0;
    * Define consistent border, margin, and padding.
    fieldset {
        border: 1px solid #c0c0c0;
        margin: 0 2px;
        padding: 0.35em 0.625em 0.75em;
    * 1. Correct color not being inherited in IE 6/7/8/9.
    * 2. Correct text not wrapping in Firefox 3.
    * 3. Correct alignment displayed oddly in IE 6/7.
    legend {
        border: 0; /* 1 */
        padding: 0;
        white-space: normal; /* 2 */
        *margin-left: -7px; /* 3 */
    * 1. Correct font size not being inherited in all browsers.
    * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
    *    and Chrome.
    * 3. Improve appearance and consistency in all browsers.
    button,
    input,
    select,
    textarea {
        font-size: 100%; /* 1 */
        margin: 0; /* 2 */
        vertical-align: baseline; /* 3 */
        *vertical-align: middle; /* 3 */
    * Address Firefox 3+ setting `line-height` on `input` using `!important` in
    * the UA stylesheet.
    button,
    input {
        line-height: normal;
    * Address inconsistent `text-transform` inheritance for `button` and `select`.
    * All other form control elements do not inherit `text-transform` values.
    * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
    * Correct `select` style inheritance in Firefox 4+ and Opera.
    button,
    select {
        text-transform: none;
    * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
    *    and `video` controls.
    * 2. Correct inability to style clickable `input` types in iOS.
    * 3. Improve usability and consistency of cursor style between image-type
    *    `input` and others.
    * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
    *    Known issue: inner spacing remains in IE 6.
    button,
    html input[type="button"], /* 1 */
    input[type="reset"],
    input[type="submit"] {
        -webkit-appearance: button; /* 2 */
        cursor: pointer; /* 3 */
        *overflow: visible;  /* 4 */
    * Re-set default cursor for disabled elements.
    button[disabled],
    html input[disabled] {
        cursor: default;
    * 1. Address box sizing set to content-box in IE 8/9.
    * 2. Remove excess padding in IE 8/9.
    * 3. Remove excess padding in IE 7.
    *    Known issue: excess padding remains in IE 6.
    input[type="checkbox"],
    input[type="radio"] {
        box-sizing: border-box; /* 1 */
        padding: 0; /* 2 */
        *height: 13px; /* 3 */
        *width: 13px; /* 3 */
    * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
    * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
    *    (include `-moz` to future-proof).
    input[type="search"] {
        -webkit-appearance: textfield; /* 1 */
        -moz-box-sizing: content-box;
        -webkit-box-sizing: content-box; /* 2 */
        box-sizing: content-box;
    * Remove inner padding and search cancel button in Safari 5 and Chrome
    * on OS X.
    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
    * Remove inner padding and border in Firefox 3+.
    button::-moz-focus-inner,
    input::-moz-focus-inner {
        border: 0;
        padding: 0;
    * 1. Remove default vertical scrollbar in IE 6/7/8/9.
    * 2. Improve readability and alignment in all browsers.
    textarea {
        overflow: auto; /* 1 */
        vertical-align: top; /* 2 */
    /* ==========================================================================
       Tables
       ========================================================================== */
    * Remove most spacing between table cells.
    table {
        border-collapse: collapse;
        border-spacing: 0;

  • Css centering layout problem

    Hi,
    I'm building a website from a photoshop design and I have a
    problem with the layout I can't see how to fix:
    I have a header and a footer which both need to stay centered
    and expand to whatever the browser window width is set to.
    Between them I have a div of the main content of the pages
    which also needs to be centered.
    All seems very simple. I would normally just have a big div
    around the whole page with an align="center". Job done.
    But the problem is the space to the left of the content div
    needs to be grey and the space on the right needs to be black.
    Therefore I assume I'm going to need 3 divs. 2 for the left and
    right spaces and another with the main content between them.
    Both the side divs will need to expand somehow to fill the
    space while keeping the fixed width content div centered. But I
    think they will also have to be floated to sit side by side.
    I cant seem to get the divs to stay in the correct places or
    keep the side ones filling the space between the content div and
    the edges of the browser.
    Can anyone help?
    Thanks,
    Olliebear

    Is this what you au trying to do?
    http://starttoweb.com/
    If so, you are welcome to grab the CSS file and mostly to fit
    your needs.
    Cheryl D Wise
    Adobe Community Expert
    http://starttoweb.com
    "Olliebare" <[email protected]> wrote in
    message
    news:fpn0q2$p1v$[email protected]..
    > Hi,
    >
    > I'm building a website from a photoshop design and I
    have a problem with
    > the
    > layout I can't see how to fix:
    >
    > I have a header and a footer which both need to stay
    centered and expand
    > to
    > whatever the browser window width is set to.
    >
    > Between them I have a div of the main content of the
    pages which also
    > needs to
    > be centered.
    >
    > All seems very simple. I would normally just have a big
    div around the
    > whole
    > page with an align="center". Job done.
    > But the problem is the space to the left of the content
    div needs to be
    > grey
    > and the space on the right needs to be black. Therefore
    I assume I'm going
    > to
    > need 3 divs. 2 for the left and right spaces and another
    with the main
    > content
    > between them.
    >
    > Both the side divs will need to expand somehow to fill
    the space while
    > keeping
    > the fixed width content div centered. But I think they
    will also have to
    > be
    > floated to sit side by side.
    >
    > I cant seem to get the divs to stay in the correct
    places or keep the side
    > ones filling the space between the content div and the
    edges of the
    > browser.
    >
    > Can anyone help?
    >
    > Thanks,
    >
    > Olliebear
    >

  • Centering a DIV Tag

    Hi,
    am having trouble / don't have a clue how to centre a div tag
    to the center of the page? Can someone point me where am going
    wrong. Here is the html code:
    thanks in advance
    hammer.

    >>I think you'll find significant disagreement here
    about the following
    Yes, here, I definitely will find significant disagreement.
    But I'm very
    much of the opinion that publishing to the web is for the
    masses, not just
    for you folk with the time, motivation, and expereince to
    deal with the
    range of issues relating to css layout. The simplicity of
    tables far
    outweighs the gains of css layout at this point in time.
    >>There is nothing worse than a morass of nested tables
    spanned to death,
    >>not
    only for you as the maintainer of the site, but also for the
    browsers, some
    of which simply cannot render such pages. CSS layouts do not
    have these
    problems.
    Here you are wrong. I would actually revese that whole point.
    It is css
    layout that are notorious fo rbrowsers laying out or not
    rendering properly.
    Tables never came close to having such issues. Even nested
    tables, one level
    deep, are perfectly fine.
    >>some
    of which simply cannot render such pages. CSS layouts do not
    have these
    problems.
    Politely, where the heck have you been living these last few
    years!!
    >>Future maintainence, bandwidth usage, and simplicity
    of layout are big
    benefits of using CSS as opposed to tables.
    simplicity of layout??? Again, I think you are missing the
    argument here.
    Its almost a given that tables are simpler to use for layout.
    Almost all
    books on teh topic agree, but point out the long term benefit
    of css layout
    despite the added complexity. So please don't use the
    'simplcity' as an
    argument here. CSS layout is the most intimidating and hard
    to fathom thing
    for most beginners, not just the new syntax but all the
    nonsensical
    (seeming) twists and turns that must be taken to get it to
    work properly -
    not to mention they are buggy as hell. Tables? They don't
    come close to
    being as nasty as CSS layout as it is today.
    >>Everyone here (I think) agrees that if tables work
    better for you, then use them. BUT use them correctly if you
    are going to
    do that. It's pretty simple, really....
    Agreed. I personally use tables for average sized websites
    which have to be
    edited/maintained by general staff - you can teach tables oto
    people inside
    of amorning to a day. You'd need weeks to months to teach
    enough CSS layout
    to a layman and even then he'd think it sucks. I will be
    using css for
    layout about two browser versions from now.
    I don't see the sense on jumping on a technology that, at
    every second turn
    you get, go here for this hack, do this to get around that
    problem, IE
    cannot do this so use this javascript fix, oh it doesn't work
    while looking
    at in dreanweaver but it will work in the browser, blah blah
    blah...its
    enough to put someone off web design for life.
    I came to the web initially becuase I was amazed at how much
    I could do with
    so little knowledge - it was awseome. I think this should
    still happen to
    people today - it's quite empowering. I think the reality is
    a lot more folk
    get disheartned, confused and simply don't run with it. We
    scare the crap
    out them with css layout.
    "Murray *ACE*" <[email protected]> wrote
    in message
    news:[email protected]...
    >I think you'll find significant disagreement here about
    the following -
    >
    > * CSS for layout is simply not there yet
    > * Its only the accesibility issue which tables lose
    points for
    > * Possibly, the only benefit of css layout is that it
    can be centrally
    > goverened through a linked style sheet, but even this
    can be done with DW
    > templates and tables
    >
    > CSS for layout is certainly "there". Perhaps it's not
    there for you, but
    > it surely is for others.
    >
    > There is nothing worse than a morass of nested tables
    spanned to death,
    > not only for you as the maintainer of the site, but also
    for the browsers,
    > some of which simply cannot render such pages. CSS
    layouts do not have
    > these problems.
    >
    > Future maintainence, bandwidth usage, and simplicity of
    layout are big
    > benefits of using CSS as opposed to tables.
    >
    > But let's not make this a holy war. Nobody here is
    saying that you have
    > to replace tables with CSS. Everyone here (I think)
    agrees that if tables
    > work better for you, then use them. BUT use them
    correctly if you are
    > going to do that. It's pretty simple, really....
    >
    > --
    > 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
    > ==================
    >
    >
    > "Arrdvark" <[email protected]> wrote in
    message
    > news:[email protected]...
    >> tables are much simpler, translate well to knowledge
    people have from
    >> other tools (ie; ms word) and can do layout quite
    well. CSS for layout is
    >> simply not there yet - it feels like one great big
    hack and is difficult
    >> for people to learn, especially causal web designers
    who just dont have
    >> the time to amass all teh knowledge and expereince
    needed just to get a
    >> simple css layout working in both major browsers.
    One of the things that
    >> made the web so big was how simple it was to publish
    to - CSS layout is a
    >> step backward in this regard.
    >>
    >> tables are still fine for most sites, a perfectly
    valid choice. Its only
    >> the accesibility issue which tables lose points for.
    Possibly, the only
    >> benefit of css layout is that it can be centrally
    goverened through a
    >> linked style sheet, but even this can be done with
    DW templates and
    >> tables, or dynamic pages and tables (ie: asp.net
    master pages).
    >>
    >> I am 50 / 50 these days as to wether css layout is
    worth the hassle for
    >> the average website being bult by the avergae
    person.
    >>
    >>
    >>
    >>
    >> "FreakyJesus" <[email protected]>
    wrote in message
    >> news:[email protected]...
    >>> Very well said, Thierry
    >>> And Arrdvark, I hear you on this:
    >>> "it almost always causes total confusion as to
    "why" this is the case
    >>> and puts
    >>> people right off CSS altogther."
    >>> I am showing a friend how to use CSS (blind
    leading the blind) and on a
    >>> regular basis she's like "wouldn't this be
    easier with tables within
    >>> tables."
    >>> Css CAN be very confusing.
    >>>
    >>> Andy
    >>>
    >>>
    >>>
    >>>
    >>>
    quote:
    Originally posted by:
    Newsgroup User
    >>> Al wrote:
    >>> > On Fri, 01 Dec 2006 09:39:18 -0500, Murray
    *ACE*
    >>> > <[email protected]>
    wrote:
    >>>
    >>> >> Not only something different, but an
    inferior choice at that!
    >>>
    >>> > I guess it can sometimes be difficult for
    an inexperienced user to
    >>> > assess and evaluate multiple solutions. If
    there are downsides to
    >>> > public forums, that would be at least one
    of them. It's hard enough
    >>> > for newbies to assess a single solution,
    but wading through a
    >>> > sub-discussion between third-parties
    micro-analyzing their personal
    >>> > favorite solutions can be untenable.
    >>>
    >>> I agree, but I can also understand that it can
    be frustrating for people
    >>> (people in general) who try to help to see that
    the OP (OPs in general)
    >>> didn't even try a solution that didn't require
    too much effort.
    >>> IMHO, there was not much for the OP to go
    through here since *early* in
    >>> this
    >>> thread, the OP had everything to make it work.
    >>> First post FreakyJesus said to set up the
    left/right margin of the DIV
    >>> to
    >>> "auto" and second post Murray gives a very
    explicit "fix" for IE5:
    >>> body { text-align:center; }
    >>> #graybox { text-align:left; }
    >>> Actually, just trying margin auto could have
    been enough for the OP.
    >>> Sometimes it is important to know "some"
    Javascript, HTML or else to be
    >>> able
    >>> to implement (not necessary understand) a
    solution, but here it was not
    >>> the
    >>> case.
    >>>
    >>> Nothing against the OP here, and nothing to get
    excited either ;-)
    >>> This is just a general statement about the other
    side of the coin.
    >>>
    >>> > Note to self: Recite Serenity Prayer before
    posting here in the
    >>> > future.
    >>>
    >>> Let's hope that works :)
    >>>
    >>> --
    >>> Thierry
    >>> Articles and Tutorials:
    http://www.TJKDesign.com/go/?0
    >>> The perfect FAQ page:
    http://www.TJKDesign.com/go/?9
    >>> CSS-P Templates:
    http://www.TJKDesign.com/go/?1
    >>> CSS Tab Menu:
    http://www.TJKDesign.com/go/?3
    >>>
    >>>
    >>>
    >>>
    >>>
    >>>
    >>
    >>
    >
    >

  • Insert Fluid grid layout div tag pastes CSS

    I am trying to create a new fluid grid layout.  I am able to insert 2 new layout divs, but after that, the "Insert Fluid grid layout div tag" fails.  I am in "split" display, and the code view shows CSS instead of the HTML, and the design view shows a page of  CSS code.
    Control-Z always backs me up to the proper display of code and design, but the CSS file does not contain the definitions for the newly-inserted DIV.
    Before insert:
    After insert:

    Yes.  I created a new site, named as you see, for the files created as I learn the new features in CS6.
    The problem I am seeing is 100% reproducable. The 1st 2 layout divs are inserted correctly, then all after that fail.  After the 2nd screen shot above, a single ^Z will restore the code & display panes.  I have learned that I can quickly switch into editing the CSS file, paste in the definitions for the new div (a pain, but do-able), then I can do all of the other editing, resizing, etc.
    One thing I have not tried, but will, is to remove my custom key-mapping and try this in a standard workspace.

  • Problems with ap div tags

    Hi I am currently working on a website for a school assignment and I have almost gotten my site done, however when I preview it ic the browser and then I maximize the the webpage moves but the ap div tags I have dont move with the rest of the page. Is there something that I can do about this? Any help would be greatly appreciated
    Thanks Tanya

    No.  You're much better off using default CSS positioning which is none or static along with margins, padding and floats to align page elements.   Tables are strictly for tabular data (spreadsheets, data sets).
    If you're short on time, open one of the starter pages that comes with Dreamweaver.
    File > New > Blank > HTML > Layout...  1 or 2-col, fixed, centered...   This will serve as a framework you can drop your content and images into.
    Good luck,
    Nancy O.

  • Nested div tags "Design View" problem

    I have had ongoing problems using nested div tags to layout
    my page. The page displays correct in browser but does not display
    properly in Dreamweaver Design View. Highlighting the CSS id in
    Code View shows the correct groupings. The code also passed the
    validator test.
    I am fairly new at Dreamweaver so I could be missing
    something basic.
    Code is displayed at
    http://www.mektronix-net.campusbizcenter.com/

    I've not see this before, so can't say why it would be happening.  Would the pc be low on resources?  but then again you say it happened even after a restart of the pc.
    Maybe you could try the file cache and the personal configuration folder fix to see if it fixes any issues.
    http://forums.adobe.com/thread/417116#cache
    PS:  While I'm at it, it would be wrong for me to point out that using AP divs is not the optimum way to create a layout....  unless you know the repercussions of using them.
    Here's why:  (from the Dreamweaver FAQ)
    http://forums.adobe.com/thread/477969

Maybe you are looking for