6 Replies Latest reply: Mar 3, 2013 10:38 AM by MurraySummers RSS

    CSS

    Bogi13

      I am a beginner, I created my first webpage with CSS , which I want to make a template http://www.naszchleb.pl/test2/ , I have encountered a few problems.

      1. how to center a page in the internet/browser ?  

      now it is centered a I have put a left margin in the #container of 450 px but I know I should have put " auto" on both left and right margin in the #container it page should center itself, it my case it did not , where did  I make an error ?

      2. I donot know how to align pictures in the sidebar with with H3 box -white  ( with bread names) , as you can see pictures are wider on the left than the white box.

      3. Other remarks to the CSS to make this page look better ?

      Thx

        • 1. Re: CSS
          MurraySummers ACP/MVPs

          1. how to center a page in the internet/browser ? 

          now it is centered a I have put a left margin in the #container of 450 px but I know I should have put " auto" on both left and right margin in the #container it page should center itself, it my case it did not , where did  I make an error ?

          You still have a 450px margin on the left of the #container div in your stylesheet! Change that to "auto" and your page will center.

           

          #container {

                    width: 960px;

                    margin-right: auto;

                    margin-left: 450px;

          }

          2. I donot know how to align pictures in the sidebar with with H3 box -white  ( with bread names) , as you can see pictures are wider on the left than the white box.

           

          The .news h3 element is also inheriting the left-hand border that you specify in the h3 rule! So, to get rid of that, just add "border:none;" to the .news h3 rule. Now see what happens.

          3. Other remarks to the CSS to make this page look better ?

           

          Just keep trying. It's not bad as it is.

          • 2. Re: CSS
            Bogi13 Community Member

            Thanks Murray

             

            for the 2nd answer, I have made the change and it works perfectly, thanks for the tip

             

            For the 1st answer though  I have made the change in the #container from 450 px  of left margin to auto and it has not centered 

            • 3. Re: CSS
              Nancy O. MVP

              Try this instead of what you have now.

               

              body {

                  font-family: Verdana, Geneva, sans-serif;

                  background-color: #ccc;

                  width: 960px;

                 margin:0 auto;

              }

               

               

              Nancy O.

              • 4. Re: CSS
                MurraySummers ACP/MVPs

                Remove "width:960px;" from the rule for the body tag. The problem you have is that the page CANNOT center, since the width of the body is set to the width of the centering container.

                 

                You could also accomplish the same thing by removing the width and margins from the #container rule, and placing them on the body rule.

                • 5. Re: CSS
                  Bogi13 Community Member

                  Thanks Murry

                  That was it, I have removed 960px from the body tab and it has centered.Thanks for the tip

                  • 6. Re: CSS
                    MurraySummers ACP/MVPs

                    Good luck!