Skip navigation
Bogi13
Currently Being Moderated

CSS

Mar 3, 2013 5:38 AM

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

 
Replies
  • Currently Being Moderated
    Mar 3, 2013 8:58 AM   in reply to Bogi13

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 3, 2013 10:19 AM   in reply to Bogi13

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 3, 2013 10:19 AM   in reply to Bogi13

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 3, 2013 10:38 AM   in reply to Bogi13

    Good luck!

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points