Div Background not showing

Discussion in 'HTML & Website Design' started by ggokulg, Apr 9, 2011.

0
  1. #1
    I have a problem that in my page div background for #wrapper not showing the background color as I specified in css.

    Css :

    body{
    background:url(img/bg_sm_bk.jpg) #000000 repeat-x top center;
    color:#999999;
    width:1000px;
    margin:0px auto;
    text-align:center;
    }
    img{
    border:none;
    }
    #wrapper{
    background:#333333;
    }
    #bookmark{
    text-align:right;
    padding-right:8%;
    }
    #site_logo{
    background:url(img/bg_full.jpg) center no-repeat;
    display:inline-block;
    width:100%;
    height:149px;
    }
    .fb_bk:link, .fb_bk:active, .fb_bk:visited{
    background:url(img/facebook.jpg) center no-repeat;
    display:inline-block;
    text-decoration:none;
    width:27px;
    height:20px;
    padding:14px 5px 0 5px;
    vertical-align:middle;
    border:none;
    }
    .fb_bk:hover{
    background:url(img/facebook_hover.jpg) center no-repeat;
    display:inline-block;
    text-decoration:none;
    width:27px;
    height:20px;
    padding:14px 5px 0 5px;
    vertical-align:middle;
    border:none;
    }
    .tw_bk:link, .tw_bk:active, .tw_bk:visited{
    background:url(img/twitter.jpg) center no-repeat;
    display:inline-block;
    text-decoration:none;
    width:27px;
    height:20px;
    padding:14px 5px 0 5px;
    vertical-align:middle;
    border:none;
    }
    .tw_bk:hover{
    background:url(img/twitter_hover.jpg) center no-repeat;
    display:inline-block;
    text-decoration:none;
    width:27px;
    height:20px;
    padding:14px 5px 0 5px;
    vertical-align:middle;
    border:none;
    }
    .in_bk:link, .in_bk:active, .in_bk:visited{
    background:url(img/linkedin.jpg) center no-repeat;
    display:inline-block;
    text-decoration:none;
    width:27px;
    height:20px;
    padding:14px 5px 0 5px;
    vertical-align:middle;
    border:none;
    }
    .in_bk:hover{
    background:url(img/linkedin_hover.jpg) center no-repeat;
    display:inline-block;
    text-decoration:none;
    width:27px;
    height:20px;
    padding:14px 5px 0 5px;
    vertical-align:middle;
    border:none;
    }
    .navlink:link, .navlink:visited, .navlink:active{
    line-height:19px;
    font-size:15px;
    padding-top:6px;
    display:inline-block;
    text-align:center;
    width:100px;
    height:25px;
    text-decoration:none;
    color:#999999;
    border-left:#333333 1px solid;
    border-right:#333333 1px solid;
    }
    .navlink:hover{
    background:url(img/lbgbh.jpg) right repeat-x;
    line-height:19px;
    font-size:15px;
    padding-top:6px;
    display:inline-block;
    text-align:center;
    width:100px;
    height:25px;
    text-decoration:none;
    color:#000000;
    border-left:#333333 1px solid;
    border-right:#333333 1px solid;
    }
    #left_bar{
    float:left;
    width:25%;
    text-align:justify;
    }
    #right_bar{
    float:right;
    width:75%;
    text-align:justify;
    }
    .bolds{
    font-weight:bold;
    }
    .navlinks{
    background:url(img/lbgb.jpg) repeat-x;
    border-bottom:#000000 1px solid;
    }
    .testi_img{
    vertical-align:middle;
    padding:15px 0 12px 0;
    text-align:right;
    border:none;
    }
    .float_body{
    margin:50px 0 0 0;
    padding:10px 0 0 15%;
    }
    .float_body2{
    margin:50px 0 0 0;
    padding:10px 5% 0 5%;
    }
    #footer{
    height:31px;
    line-height:19px;
    padding:6px 0 0 0;
    }

    My HTML :

    <body>
 
<div id="bookmark">
 
<span style="vertical-align:middle; padding:0 2px 0 0;">Share this @</span>
 
<a class="fb_bk" title="Share on facebook" href="http://www.facebook.com/sharer.php?u=http://localhost/Sitede/&amp;t=Royal Arts and Decoration - Face makeup, Hairstyles, Marrigae makeup, Office decoration, Party decoration, Hall Decoration"></a>
 
<a class="tw_bk" title="Post to twitter" href="http://twitter.com/home?status=Currently reading http://localhost/Sitede/"></a>
 
<a class="in_bk" title="Bookmark at linkedIn" href="http://www.linkedin.com/shareArticle?mini=true&amp;url=http://localhost/Sitede/&amp;title=Royal Arts and Decoration - Face makeup, Hairstyles, Marrigae makeup, Office decoration, Party decoration, Hall Decoration&amp;summary=At Royal Arts and Decors we do running a beauty parlour to provide many types of makeups such as Face makeup, Jadai Hairstyles, Kondai Hairstyles, Character Makeup and Mehndi. We also decorate your office as well as home for parties like birthday party, anniversary and also we decorate marriage and reception halls.&amp;source=http://localhost"></a>
 
</div>
 
<div id="site_logo">
 
<div style="text-align:right; padding:0 5px 0 0;">
 
<img title="Call us" src="img/help.jpg" height="70" width="134" alt="call" />
 
</div>
 
</div>
 
<div class="navlinks">
 
<a class="navlink" title="Home" href="http://localhost">Home</a><a class="navlink" title="Services we provide" href="http://localhost/services.html">Services</a><a class="navlink" title="About RAAD" href="http://localhost/about_us.html">About us</a><a class="navlink" title="Contact us" href="http://localhost/contact_us.html">Contact us</a><a class="navlink" title="Client Testimonials" href="http://localhost/testimonials.html">Testimonials</a>
 
</div>
 
<div id="wrapper">
 
<div id="left_bar">
 
<div class="float_body">
 
<span style="font-weight:bold; height:22px; display:block; border-bottom:#999999 1px solid; margin-bottom:6px;">
 
<img style="vertical-align:text-top; padding:0 3px 0 0;" src="img/users.jpg" height="16" width="21" alt="user" /> Client Reviews :</span>
 
<span style="font-weight:bold;">
 
Kumar S</span><span >Thank you.</span>
 
<div class="testi_img">
 
<a style="padding:0 5px 0 0;" href="http://localhost/testimonials.html" title="View all Reviews"><img src="img/readall.jpg" width="80" height="25" alt="Add" /></a>
 
<a href="http://localhost/contact_us.html" title="Add Testimonial"><img src="img/addreview.jpg" width="80" height="25" alt="Add" /></a></div>
 
</div>
 
</div>
 
</div>
 
<div id="right_bar">
 
<div class="float_body2">
 
<div style="font-size:22px;">Welcome to Royal</div>
 
<img align="right" src="img/des1.jpg" style="padding:0 10px 10px 15px;" alt="Image" width="290" height="220" />
 
<div style="height:15px;">&nbsp;</div>
 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;We are glad to welcome you.
 
</div>
 
</div>
 
<div style="clear: both;"></div>
 
</div>
 
<div id="footer">
 
&copy; 2011. All Rights reserved
 
</div>
 
</body>
    HTML:
    Please help me :(:(
     
    ggokulg, Apr 9, 2011 IP
  2. the-sand-man

    the-sand-man Active Member

    Messages:
    43
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    91
    #2
    Add this to #wrapper

     
    the-sand-man, Apr 9, 2011 IP
  3. webserv

    webserv Active Member

    Messages:
    85
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    61
    #3
    use <div style="clear:both"></div> just before the ending of wrapper </div>. hope it'll work
     
    webserv, Apr 9, 2011 IP
  4. anupkumarpandey

    anupkumarpandey Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
     
    anupkumarpandey, Apr 10, 2011 IP
  5. anupkumarpandey

    anupkumarpandey Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    function callFontColor(){
    var colour;
    if(document.getElementById("color").options[1].selected){
    colour = "red";
    }else if(document.getElementById("color").options[2].selected){
    colour = "blue";
    }else if(document.getElementById("color").options[3].selected){
    colour = "green";
    }
    else if(document.getElementById("color").options[4].selected){
    colour = "orange";
    }
    else if(document.getElementById("color").options[5].selected){
    colour = "yellow";
    }
    else if(document.getElementById("color").options[6].selected){
    colour = "brown";
    }
    else if(document.getElementById("color").options[7].selected){
    colour = "white";
    }
    else if(document.getElementById("color").options[8].selected){
    colour = "black";
    }
    else {
    colour = "None";
    }
    document.getElementById('put').style.background = colour;
    }

    </script>

    <div style="background: #ffffcc; width:'100%';" align="center">
    Select color :
    <select id="color" onChange="callFontColor();">
    <option value="-1">Select</option>
    <option value="red">red</option>
    <option value="red">blue</option>
    <option value="red">green</option>
    <option value="red">orange</option>
    <option value="red">yellow</option>
    <option value="red">brown</option>
    <option value="red">white</option>
    <option value="red">black</option>
    </select>

    </div>
    <div id='put' style=" width:100%; height:80px;"></div>

    </body>
    </html>
    anup kumar pandey
     
    anupkumarpandey, Apr 10, 2011 IP
  6. ggokulg

    ggokulg Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I got my problem solved. Thank you all friends.
     
    ggokulg, Apr 11, 2011 IP