css positioning (cms system)

Discussion in 'CSS' started by krike, Apr 5, 2009.

  1. #1
    I'm trying to style a theme for the nuke evolution system. Normaly it is done using tables but I had some request of people who would like to have a 100% css theme for that system.

    it's working quite well except for the footer

    I have 3 main div's "header", "bodymain" and "footer"

    bodymain and footer are set to position relative (so I can place all the div's in it using absolute).
    now I have a problem with the footer which is displayed on top of bodymain div instead of under it, normally "clear:both;" should push it below but it won't.

    any suggestions?
    a preview can be found here -> http://i119.photobucket.com/albums/o134/krike06/frozen.png

    here is the css:

    /*####################################################
    	FOOTER CSS
    ###################################################"*/
    #footer{
    position: relative;
    height: 253px;
    width: 100%;
    background-image: url('../../../themes/frozen/images/footer_background.jpg');
    background-repeat: repeat-x;
    clear: both;
    }
    
    /* footer container main div */
    #footer #container{
    position: relative;
    top: 0px;
    width: 980px;
    margin: 0 auto;
    }
    
    /* footer copyright main div */
    #footer #copyright{
    top: 26px;
    position: absolute;
    text-align: left;
    width: 220px;
    padding: 0px;
    }
    
    /* footer affiliates main div */
    #footer #affiliates{
    text-align: left;
    position: absolute;
    width: 220px;
    left: 300px;
    margin-top: 26px;
    }
    
    #footer #affiliates ul, #footer #newsarticle ul{
    padding: 0px;
    margin: 0px;
    line-height: 15px;
    list-style-type: none;
    }
    
    /* footer newsarticle main div */
    #footer #newsarticle{
    position: absolute;
    text-align: left;
    width: 480px;
    margin-left: 500px;
    top: 26px;
    }
    
    
    #footer #copyright .title, #footer #affiliates .title, #footer #newsarticle .title{
    clear: both;
    font-size: 18px;
    font-weight: bold;
    padding-bottom: 10px;
    color: white;
    }
    
    #footer #copyright .text, #footer #affiliates .text, #footer #newsarticle .text{
    color: white;
    line-height: 16px;
    font-size: 10px;
    font-weight: bold;
    }
    
    #footer #copyright .text a, #footer #affiliates .text a, #footer #newsarticle .text a{
    color: #8b9a9c;
    font-size: 10px;
    font-weight: bold;
    }
    
    
    
    /*####################################################
    	HEADER CSS
    ###################################################"*/
    #header{
    text-align: left;
    margin: 0 auto;
    }
    
    
    /*####################################################
    	BLOCK CSS
    ###################################################"*/
    #block{
    background: #afbbbc;
    width: 200px;
    padding: 5px;
    }
    
    .blocktitle{
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    margin-top: 20px;
    margin-bottom: 6px;
    }
    
    
    /*####################################################
    	NEWS & NORMAL BLOCK CSS
    ###################################################"*/
    
    #newsarticlecenter{
    border: 1px solid #bcc3c4;
    background-color: #dde4e5;
    padding: 10px;
    margin: 15px 10px 15px 10px;
    color: #394547;
    width: auto;
    }
    
    #newsarticlecenter #newstitle, #newstitle strong{
    color: #394547;
    font-size: 12px;
    font-weight: bold;
    }
    
    #centerblock{
    border: 1px solid #bcc3c4;
    background-color: #dde4e5;
    padding: 10px;
    margin: 15px 10px 15px 10px;
    color: #394547;
    width: auto;
    }
    
    
    /*####################################################
    	BODY TABLE CSS
    ###################################################"*/
    #bodycontainer{
    position: relative;
    margin: 0 auto;
    width: 1000px;
    clear: both;
    }
    
    #blockleft{
    position: absolute;
    text-align: left;
    top: 0px;
    left: 0px;
    bottom:0px;
    }
    
    #blockright{
    text-align: left;
    position: absolute;
    top: 0px;
    left: 790px;
    bottom:0px;
    }
    
    #bodymain{
    position: absolute;
    text-align: left;
    width: 560px;
    left: 220px;
    top: 0px;
    }
    Code (markup):
     
    krike, Apr 5, 2009 IP
  2. ExtremeData

    ExtremeData Well-Known Member

    Messages:
    450
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    125
    #2
    The css code don't help too much.I think is better to post the html code too.
     
    ExtremeData, Apr 6, 2009 IP