Why is the body text covered by the css box?

Discussion in 'Web Design' started by gert3d, Sep 22, 2010.

to remove all ads.
  1. gert3d

    gert3d New Member

    Messages:
    2
    Why is the body text covered by the css box?

    url: http://films.eusem.com/main/comscience-sum

    relevant css:
    ------------------------------
    #l-column {
    background: #eeeeff;
    position: absolute;
    top: 150px;
    align: left;
    width: 160px;
    margin: 2px 2px 2px 2px;
    padding: 2px 2px 2px 2px;
    border-width: 1px;
    border-style: solid;
    border-color: blue;
    }



    code at top of the page:
    -----------------------------------------
    <br/>

    <div class = "l-column"> test left box<p/>
    line 2<p/>
    line 3,p/>
    </div>

    <div class="head01">The ComScience project<p></div>
    etc ....
     
  2. LouTheDesigner

    LouTheDesigner New Member

    Messages:
    506
    Two things that you might want to change are your use of absolute positioning (refer to one of PixelPisher's Sticky's for positioning DIVs) and the way you define your class.

    You say :

    class = "l-column"

    but in your CSS, you say:

    #l-column

    The # sign designates an ID, not a class. It should be changed to:

    .l-column

    and then you should change the absolute positioning.

    -Lou
     
  3. gert3d

    gert3d New Member

    Messages:
    2
    Thanks for your help.
    I got it right now:

    #l-column {
    float: left;
    background: #eeeeff;
    width: 160px;
    margin: 2px 2px 2px 2px;
    padding: 2px 2px 2px 2px;
    border-width: 1px;
    border-style: solid;
    border-color: blue;
    }

    and

    <div id = "l-column"> test left box<p/>
    line 2<p/>
    line 3,p/>
    </div>
     
  4. LouTheDesigner

    LouTheDesigner New Member

    Messages:
    506
    Glad I could help.

    -Lou
     
  5. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    gert3d,

    One other quick thing, there should not be spaces between the attribute name, equals sign, and value. You paragraphs need to open and close correctly. Should look like this:
    HTML:
    <div id="I-column">
       <p>test left box</p>
       <p>line 2</p>
       <p>line 3</p>
    </div>
    
     
    Last edited: Sep 24, 2010

Share This Page