13 Replies Latest reply on Mar 24, 2009 9:24 AM by Newsgroup_User

    Beginner CSS user

    beginCss Level 1
      As elementary as this seems, I can not figure out how, using CSS in DW CS3, how to apply a page background to the entire page. Individual elements blocks, like header and <p> have color backgrounds but are separated by white space between the element blocks.

      If you know, please help--Thanks!

        • 1. Beginner CSS user
          martcol Level 4
          In your code you have three CSS rules one for "body" one for ".oneColElsCtr #container" and one for ".oneColElsCtr #mainContent" the first one has a declaration:

          background-color: #003399;

          in the second rule you have a declaration:

          background: #FFFFFF;

          in the third rule there is no style set for background color so it will inherit the color of it's container.

          The values: #003399 and #FFFFFF are the hex values for the color. There are other ways to declare color but I think this is most comon. If you search on Google for "color hex value" or something like that you will probably find color pickers and tables that show various colors and their values.

          You can change those values to your heart's content!

          Regards

          Martin

          Edit: I forgot to say that the rule for body in your CSS is where you change color for the whole page.
          • 2. Re: Beginner CSS user
            Level 7
            To add an image to the page you would declare that in the body css as
            below. The below assumes your background image myImage.jpg is sitting
            directly in your site root folder. If its in a folder in your site root
            folder named images then you would add images/ infront of the background
            image name.


            body {
            font: 100% Verdana, Arial, Helvetica, sans-serif;
            background: #003399;
            background-image: url(myImage.jpg);
            background-repeat: no-repeat;
            margin: 0; /* it's good practice to zero the margin and padding of the
            body
            element to account for differing browser defaults */


            Heading tags and paragraph tags have default margins.

            To control those and zero them out you would use:

            p {
            margin: 0 0 0 0;
            padding: 0 0 0 0;
            }

            0 0 0 0 refers to top, right bottom, left. Specify the space you need
            like so:

            p {
            margin: 0 0 5px 0;
            padding: 0 0 5px 0;
            }


            The same applies to header

            h1, h2, h3, h4 etc




            beginCss wrote:
            > As elementary as this seems, I can not figure out how, using CSS in DW CS3, how
            > to apply a page background to the entire page. Individual elements blocks, like
            > header and <p> have color backgrounds but are separated by white space between
            > the element blocks.
            >
            > If you know, please help--Thanks!
            >
            >
            >
            > <!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">
            > <!--
            > body {
            > font: 100% Verdana, Arial, Helvetica, sans-serif;
            > background: #003399;
            > margin: 0; /* it's good practice to zero the margin and padding of the body
            > element to account for differing browser defaults */
            > padding: 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;
            > background-color: #003399;
            > }
            > .oneColElsCtr #container {
            > width: 46em;
            > background: #FFFFFF;
            > 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. */
            > }
            > .oneColElsCtr #mainContent {
            > padding: 0 20px; /* remember that padding is the space inside the div box and
            > margin is the space outside the div box */
            > }
            > -->
            > </style>
            > <link href="beLoud.css" rel="stylesheet" type="text/css" />
            > </head>
            >
            > <body class="oneColElsCtr">
            >
            > <div id="container">
            > <div id="mainContent">
            > <h1 class="beLoud2"> Main Content </h1>
            > <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent
            > aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy
            > quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo
            > porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula.
            > Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis.
            > Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et
            > ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id
            > quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget
            > purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer
            > turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus
            > mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
            > <h2>H2 level heading </h2>
            > <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent
            > aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy
            > quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo
            > porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula.
            > Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis.
            > Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
            > <!-- end #mainContent --></div>
            > <!-- end #container --></div>
            > </body>
            > </html>
            >
            • 3. Re: Beginner CSS user
              Level 7
              Ok I think what the poster meant was applying a uniform color to the
              whole page not an image.



              Osgood wrote:
              > To add an image to the page you would declare that in the body css as
              > below. The below assumes your background image myImage.jpg is sitting
              > directly in your site root folder. If its in a folder in your site root
              > folder named images then you would add images/ infront of the background
              > image name.
              >
              >
              > body {
              > font: 100% Verdana, Arial, Helvetica, sans-serif;
              > background: #003399;
              > background-image: url(myImage.jpg);
              > background-repeat: no-repeat;
              > margin: 0; /* it's good practice to zero the margin and padding of the
              > body
              > element to account for differing browser defaults */
              >
              >
              > Heading tags and paragraph tags have default margins.
              >
              > To control those and zero them out you would use:
              >
              > p {
              > margin: 0 0 0 0;
              > padding: 0 0 0 0;
              > }
              >
              > 0 0 0 0 refers to top, right bottom, left. Specify the space you need
              > like so:
              >
              > p {
              > margin: 0 0 5px 0;
              > padding: 0 0 5px 0;
              > }
              >
              >
              > The same applies to header
              >
              > h1, h2, h3, h4 etc
              >
              >
              >
              >
              > beginCss wrote:
              >> As elementary as this seems, I can not figure out how, using CSS in DW
              >> CS3, how to apply a page background to the entire page. Individual
              >> elements blocks, like header and <p> have color backgrounds but are
              >> separated by white space between the element blocks.
              >>
              >> If you know, please help--Thanks!
              >>
              >>
              >> <!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">
              >> <!--
              >> body {
              >> font: 100% Verdana, Arial, Helvetica, sans-serif;
              >> background: #003399;
              >> margin: 0; /* it's good practice to zero the margin and padding
              >> of the body element to account for differing browser defaults */
              >> padding: 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;
              >> background-color: #003399;
              >> }
              >> .oneColElsCtr #container {
              >> width: 46em;
              >> background: #FFFFFF;
              >> 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. */
              >> }
              >> .oneColElsCtr #mainContent {
              >> padding: 0 20px; /* remember that padding is the space inside the
              >> div box and margin is the space outside the div box */
              >> }
              >> -->
              >> </style>
              >> <link href="beLoud.css" rel="stylesheet" type="text/css" />
              >> </head>
              >>
              >> <body class="oneColElsCtr">
              >>
              >> <div id="container">
              >> <div id="mainContent">
              >> <h1 class="beLoud2"> Main Content </h1>
              >> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
              >> Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum
              >> diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum
              >> id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus.
              >> Quisque ornare risus quis ligula. Phasellus tristique purus a augue
              >> condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus
              >> venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien
              >> vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed
              >> neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget
              >> purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat.
              >> Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,
              >> sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et,
              >> nibh. Donec nec libero.</p>
              >> <h2>H2 level heading </h2>
              >> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
              >> Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum
              >> diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum
              >> id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus.
              >> Quisque ornare risus quis ligula. Phasellus tristique purus a augue
              >> condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus
              >> venenatis, tristique in, vulputate at, odio.</p>
              >> <!-- end #mainContent --></div>
              >> <!-- end #container --></div>
              >> </body>
              >> </html>
              >>
              • 4. Re: Beginner CSS user
                beginCss Level 1
                Thanks Mark for the reply.

                I understand hex colors, the problem is that I can select or "declare" a background color for the entire page.

                Only the block elements as you pointed out have color and each element block is separated by white space.
                • 5. Re: Beginner CSS user
                  beginCss Level 1
                  Thanks Mark for the reply.

                  I understand hex colors, the problem is that I can select or "declare" a background color for the entire page.

                  Only the block elements as you pointed out have color and each element block is separated by white space.
                  • 6. Re: Beginner CSS user
                    beginCss Level 1
                    Meant to say: I can NOT select or "declare" a background color for the entire page.
                    • 7. Re: Beginner CSS user
                      beginCss Level 1
                      Exactly, that is what I meant to say-- does anyone know how to do it?
                      • 8. Re: Beginner CSS user
                        Level 7
                        beginCss wrote:
                        > Thanks Mark for the reply.
                        >
                        > I understand hex colors, the problem is that I can select or "declare" a
                        > background color for the entire page.
                        >
                        > Only the block elements as you pointed out have color and each element block
                        > is separated by white space.
                        >

                        I'm not really understanding your question correctly.

                        Are you saying you want the whole page to be blue and not have a white
                        box with text in it with a blue border?

                        If so the delete background: #FFFFFF; from the below css.

                        .oneColElsCtr #container {
                        width: 46em;
                        background: #FFFFFF;
                        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. */
                        }
                        • 9. Re: Beginner CSS user
                          martcol Level 4
                          Delete this;

                          background: #FFFFFF;

                          and your whole page will be blue.

                          Is that what you mean? What happens then is the blue is inherited

                          Martin
                          • 10. Re: Beginner CSS user
                            beginCss Level 1
                            Thanks for the info about the image, I will put this in notes for a future time. Obviously, I did not ask the question in a way more advanced user understood--I was trying to ask about formating "uniform color to the whole page".

                            • 11. Re: Beginner CSS user
                              beginCss Level 1
                              That was it, the .oneColElsCtr#container controlled the background of the page.

                              THANKS SO MUCH!!!!
                              • 12. Re: Beginner CSS user
                                Level 7
                                beginCss wrote:
                                > Thanks Mark for the reply.
                                >
                                > I understand hex colors, the problem is that I can select or "declare" a
                                > background color for the entire page.
                                >
                                > Only the block elements as you pointed out have color and each element block
                                > is separated by white space.

                                Just set the background color on the body tag, without a class assigned
                                to the body tag.

                                Dooza
                                --
                                Posting Guidelines
                                http://www.adobe.com/support/forums/guidelines.html
                                How To Ask Smart Questions
                                http://www.catb.org/esr/faqs/smart-questions.html
                                • 13. Re: Beginner CSS user
                                  martcol Level 4
                                  No, no, no...

                                  The .oneColElsCrt#container controlled the background of "container." By deleting its color, you kind of switched it off and it gave way to the color declared in the rule for body. So the blue color is controlled by the rule for body with this declaration: background: #003399;

                                  I think that's it

                                  Martin