Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Nov 2009
    Posts
    39
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Backgrounds, CSS help

    Here's my full CSS:
    Code:
    html,body{margin:0;padding:0}
    body{background: #000 url('../images/bg-overall.jpg'); background-position: center top; background-repeat: no-repeat;font: 76% arial,sans-serif;text-align:center;} 
    p{margin:0 10px 0; text-align:justify;}
    a{padding:5px; text-decoration:none; color:#000000;}
    div#login{background-image: url('../images/bg-login.png'); height:33px; line-height: 33px;color:#fcd551;font-weight:bold; text-indent: 20px;}   
    div#header{background-image: url('../images/bg-header.png'); height: 134px;}
    div#date{background-image: url('../images/bg-date.png'); height: 32px; line-height: 32px; text-indent: 40px; color:#dcb002;}
    div#container{text-align:left;}
    div#continue {background-image: url('../images/bg-center.png');background-repeat: repeat-y;}
    div#content p{line-height:1.4}
    div#navigation{background:#F6F0E0;}
    div#navigation ul{margin-top: 3px; margin-bottom: 0; padding:0; list-style-type:none;}
    div#navigation li{background:#d5c29a;margin-bottom:0px;border-top: 1px solid #a07c3c; margin-left: 16px;margin-right: 15px;height:20px;line-height:20px;text-indent:20px;}
    div#footer{background:#BFBD93;}
    div#footer p{margin-left:auto;margin-right:auto;text-align:center;}
    div#container{width:978px;margin:0 auto}
    div#content{float:right;width:718px}
    div#content h1 {font-size:15pt; margin:0 10px 0;line-height:30px; font-weight:normal;}
    div#contenttop {background-image: url('../images/content-top.png');width:664px;height:6px;margin-left:20px;margin-top:20px;}
    div#contentbg {background-image: url('../images/content-bg.png');width:664px;margin-left:20px;border-bottom: 1px solid #39382f;} 
    div#contentbottom {width:664px;margin-left:20px;height:4px;margin-bottom:10px;}
    div#contenttitle {background-image: url('../images/content-title.png');height:29px;width:637px;margin-left:auto;margin-right:auto;line-height:29px;text-indent:10px;}
    div#news {background:#d5c29a; width:637px;margin-left:auto;margin-right:auto;margin-top:7px;margin-bottom:20px;}
    div#navigation{float:left;width:229px; margin-left:15px; margin-right:15px;margin-top: 20px;}
    div#navlefttop {background-image: url('../images/nav-left-top.png');width:229px;height:5px;}
    div#navleftbg {background-image: url('../images/nav-left-bg.png'); background-repeat:repeat-y;}
    div#navleftbottom {background-image: url('../images/nav-left-bottom.png');width:229px;height:5px;}
    div#navlefttitle {background-image: url('../images/nav-left-title.png');height:23px;width:198px;margin-left:auto;margin-right:auto;line-height:23px;text-indent:10px;}
    div#footer{float:left;clear:both;width:100%;height:171px;background-image: url('../images/footer-bg.png');color:#d3b276;line-height:171px;}
    div#page{background: #000 url('../images/bg-center.png'); background-repeat: repeat-y; height:100%;}
    As you can see the body has a background, this runs behind everything else and is full width. I then have content over the top of this.

    Here's an image what it looks like and what I'm trying to do.

    http://i48.tinypic.com/29mq2ag.png
    Last edited by -Karl-; 07-07-2010 at 11:33 PM.

  • #2
    New Coder
    Join Date
    Nov 2009
    Posts
    39
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Adding the background to html does the bg-center fine, but the bg-overall is cut off after the content top

    html{margin:0;padding:0;background: #000 url('../images/bg-center.png'); background-position: center; background-repeat: repeat-y;}

    Still trying to find a work around to this, if you have any ideas, fire away.

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    As you can see the body has a background, this runs behind everything else and is full width.
    Adding the background to html does the bg-center fine, but the bg-overall is cut off after the content top
    Still trying to find a work around to this, if you have any ideas, fire away.
    Can we have a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    New Coder
    Join Date
    Nov 2009
    Posts
    39
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Yeah I've just uploaded it.

    http://hevvo.com/rh/

  • #5
    New Coder
    Join Date
    Nov 2009
    Posts
    39
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Does anyone have any ideas how I can work around this?

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    If a container has some inner elements floated, it will not extend its height upon the highest of those elements. This is a layout problem which can be solved in many ways. The classical way is to create an empty div, at the bottom, which should clear the float.
    Code:
    <div id="container">
    <div style="float:left">some content</div>
    <div style="float:right">some content</div>
    <div style="clear:both"></div>
    </div>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #7
    New Coder
    Join Date
    Nov 2009
    Posts
    39
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Okay, then how can I get the bg-center.png to work?

  • #8
    New Coder
    Join Date
    Nov 2009
    Posts
    39
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Still need help with this.

  • #9
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    I have nothing more to say. It seems like you didn't understand what I have shown you, but I can not do more than that. It is a basic and simple CSS issue there.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #10
    New Coder
    Join Date
    Nov 2009
    Posts
    39
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Apparently not, as I am unable to figure it out. I've tried what you said, and it didn't work. If it was a simple CSS issue I'd be able to fix it. However, I cannot.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •