CSS Style trouble shooting required.

Discussion in 'CSS' started by saadi123, Apr 19, 2010.

0
  1. #1
    First the css code and then the question.

    <html><head>
    <title>My Blog Page</title>
    <link rel="stylesheet" type="text/css" href="my_first.css" />
    </head>

    <body><h1>My Blog Page</h1>
    <div id="wrap">
    <div id="sidebar"><center><b>Widgets Go Here</b><p>widgets</p><p>widgets</p></center></div>
    <div id="container"><center><b>My first text of my blog.</b></center></div>
    <div class="clear"></div>
    </div>
    </body>
    </Html>

    my_first.css file's css coding is:

    body
    {
    background-repeat:no-repeat;
    background-color:#c0c0c0;
    width:100%;
    height:100%;
    }

    h1
    {
    color:#ffffff;
    margin-top:50px;
    text-align:center;
    }

    #wrap
    {
    margin:35 80 10 80;
    background-color:#ffffff;
    overflow:inherit;
    border:solid 1px c0c0c0;
    }


    #container
    {
    background-color:#ffffff
    margin-right:300px;
    margin-left:10px;
    margin-top:10px;
    width:700px;
    padding:4px;
    border:1px;
    border-style:solid;
    border-color:c0c0c0;
    }

    #sidebar
    {
    background-color:#ffffff;
    margin-top:10px;
    margin-right:10px;
    margin-bottom:10px;
    border:1px;
    border-style:solid;
    border-color:c0c0c0;
    float:right;
    width:350px;
    padding:4px;
    }

    .clear
    {
    clear:both;
    }

    The problem is that I am not able to provide an upper margin to the container id and the "top walls" of container id merge with the top walls of wrap id.

    Second question is that in order to make sure that the id "side bar" appears right beside the container id, I have to place "sidebar" before container in an HTML file. I want to know that what's the logic behind it.

    Yeah I know there are many useless tags in it so please do not point them out. :)
     
    saadi123, Apr 19, 2010 IP
  2. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Float the container left.
    It will fix the margin problem, and you can put the sidebar after it.

    But the biggest problem is the zillions of useless....oh! ;)
     
    Last edited: Apr 19, 2010
    Cash Nebula, Apr 19, 2010 IP
  3. digital29

    digital29 Peon

    Messages:
    462
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Here`s a tip if you want to use more margins (left, right, etc)
    instead of putting:
    margin-top:1px;
    margin-right:2px;
    margin-bottom:3px;
    margin-left:4px;

    you can use: margin: 1px 2px 3px 4px;
     
    digital29, Apr 20, 2010 IP
  4. Paweł

    Paweł Active Member

    Messages:
    210
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    55
    #4
    Hi,

    since it's a classic design structer, I would suggest You start with this one:
     
    Paweł, Apr 20, 2010 IP
  5. saadi123

    saadi123 Well-Known Member

    Messages:
    196
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #5
    @cash nebula
    @pawel
    @digital29

    Thanks to all for your help.

    @digital29
    I believe that the margin you have advised works in the clockwise manner which means top, right, bottom and left. Am I right?

    @pawel
    Thanks for your time typing this whole chunk of code along with the comments which helped me a lot in understanding it.
     
    saadi123, Apr 20, 2010 IP