3 Replies Latest reply on Feb 20, 2010 6:52 PM by justalive

    Divider line in Dreamweaver

    justalive

      I'm a complete noob when it comes to web design. But I've been learning alot. I have tables for my web layout and I am wondering how to create a divider line between cells. I have borders set to 0 i just want one side to have a line not both. Is there a way to do this?

        • 1. Re: Divider line in Dreamweaver
          John Waller Adobe Community Professional & MVP

          There are many ways to achieve this. All require some CSS.

           

          Forget border="0" which is deprecated HTML formatting.

           

          Example HTML:

           

          <td class="border">

           

          Example CSS:

           

          .border {

               border-left: 1px #000 solid;

          }

           

          gives a solid black 1 pixel border on the left side only of the table cell.

          • 2. Re: Divider line in Dreamweaver
            justalive Level 1

            Thanks for answering quickly! I tried that but when i did it nothing happened. Here is my code:

             

            @charset "UTF-8";

            body {

            margin: 0;

            text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */

            color: #000000;

            font-family: Verdana, Arial, Helvetica, sans-serif;

            font-size: 100%;

            padding-top: 0;

            padding-bottom: 0;

            padding-left: 0;

            background-color: #444;

            }

            .oneColFixCtrHdr #container {

            width: 990px;

            margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */

            border: 1px solid #000000;

            text-align: left; /* this overrides the text-align: center on the body element. */

            background-color: #FFF;

            }

            .oneColFixCtrHdr #header {

            padding: 0 10px 0 20px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */

            background-color: #FFF;

            }

            .oneColFixCtrHdr #header h1 {

            margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */

            padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */

            }

            .oneColFixCtrHdr #mainContent {

            padding-top: 0;

            padding-right: 20px;

            padding-bottom: 0;

            padding-left: 60px;

            background-color: #FFF;

            }

            .oneColFixCtrHdr #footer {

            padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */

            background:#DDDDDD;

            }

            .oneColFixCtrHdr #footer p {

            margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */

            padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */

            }.oneColFixCtrHdr #container #mainContent h1 u {

            font-size: large;

            background-color: #FFF;

            }

            .oneColFixCtrHdr #container #mainContent table tr td p {

            font-family: Arial, Helvetica, sans-serif;

            background-color: #FFF;

            }

            .oneColFixCtrHdr #container #mainContent table tr td p {

            font-size: medium;

            background-color: #FFF;

            }

            .oneColFixCtrHdr #container #mainContent table {

            font-size: medium;

            background-color: #FFF;

            I think my problem has to do with having two tables in the "mainContent" because when i clicked underneath the "Main Content" and added the border it did it to both tables i just want it with one cell. Thanks for helping me out.

            • 3. Re: Divider line in Dreamweaver
              justalive Level 1

              I figured it out. Thanks