www.webdeveloper.com
Results 1 to 4 of 4

Thread: background not extending

  1. #1
    Join Date
    Dec 2002
    Posts
    213

    Thumbs down background not extending

    Hi
    I am trying the new layout at http://erp.des-us.com/. Please notice that the gradient background ends just in the middle of the bottom div. Please check the other 2 pages with content, http://erp.des-us.com/sitemap.php and http://erp.des-us.com/career.php.
    My css code is:
    Code:
    /* if you remove this then the container disappears in IE */
    * html #containerind {height: 100%; min-height:100%;} 
    /* General */
    * {margin:0;padding:0;} 
    html, body {height:100%;}
    html {background: -moz-radial-gradient(center, #3399ff, #fff) no-repeat #BBDDFF; background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 900, from(#3399ff), to(#fff)) no-repeat #BBDDFF; background:-o-radial-gradient(center, #3399ff, #fff);}
    body {font: 1em Verdana, Arial, Helvetica, sans-serif; color: #000;}
    #wrapper {min-height:100%;}
    /* index */
    #containerind {width:85%; margin-left:auto; margin-right:auto; margin-top:5px; background-color:#FFF;border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; position:relative; padding-bottom:30px;}
    /* footer */
    #bottom {width:90%; margin-left:auto; margin-right:auto; background:#E7E7F3 no-repeat; border: thin solid #3399ff; border-radius: 45px 10px 45px 10px; -moz-border-radius: 45px 10px 45px 10px; -webkit-border-radius: 45px 10px 45px 10px; font: .55em Verdana, Geneva, sans-serif; position:relative; margin-top:-30px; padding:30px; height:30px; clear:both;}
    .copyrgt {float:left; width:50%;}
    .bottommenu {float:right;}
    .bottommenu li {display:inline; list-style-type:none; text-decoration:none; padding:0 5px; border-right: thin solid #666633; color:#666633;}
    .bottommenu li a:hover {text-decoration:underline;}
    .bottommenu li a:visited {text-decoration:none;}
    .bottommenu li a:hover,.bottommenu li a:visited { color:#6363B0;}
    and my html code is this:
    HTML Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>D.zigns SiteMap</title>
    <!--[if !IE 7]>
    	<style type="text/css">
    		#wrapper {display:table;height:100%}
    	</style>
    <![endif]-->
    <?php require_once('top.php'); ?>
    </head>
    <body>
    <div id="wrapper">
    <div id="container">
    this has top menu items
    <div id="leftcont">
    This section will have the sitemap of the website. this is left bigger column.
    <!-- end of #leftcont--></div>
    <div id="sidemenu">
    this is the right smaller column.
    <!-- end of #sidemenu--></div>
    <!-- end of #container--></div>
    <!-- end #wrapper --></div>
    <div id="bottom">
    this is the bottom or footer div
    <!-- end #bottom --></div>
    </body>
    </html>
    The css also has code for the top menu drop down, and some other styling for slideshows on various pages.

    Please help me extend the background to the whole page.
    Thanks

  2. #2
    Join Date
    Apr 2012
    Posts
    8
    use this
    #wrapper{width:100&#37;;}

    #bottom {width:100%;}

  3. #3
    Join Date
    Dec 2002
    Posts
    213
    Quote Originally Posted by legend@12 View Post
    use this
    #wrapper{width:100%;}

    #bottom {width:100%;}
    Hi
    tried, didnt change anything.
    Also, I dont want the bottom width 100%, I want it as 90%.
    thanks

  4. #4
    Join Date
    Dec 2002
    Posts
    213
    hi
    corrected my background css code. now it works fine.
    thanks

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles