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 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Need Help RE: <div> Not displaying properly

    Hi -
    I created a social box using the various social plugin elements (FB Like box, Google Badge code, etc) and am still playing with the carious elements I want to display in it, but wanted to make sure the code was working properly before sharing it with others.

    Previously, I had this set up in my sidebar and it displayed properly. Now I have a small widget area in my header and I'm not sure if I changed something by mistake when I switched out my code or not, but I can't get one part of my "box" to work properly.

    I should note I am a newbie to coding, though I'm not afraid to learn!

    So, here is the CSS I added to custom.css file to enable my social section:
    Code:
    /* Kat's Social Box */
    body.custom div#KatSocial {
      border-bottom-color:#B86969;
      border-bottom-left-radius:5px 5px;
      border-bottom-right-radius:5px 5px;
      border-bottom-style:solid;
      border-bottom-width:2px;
      border-left-color:#B86969;
      border-left-style:solid;
      border-left-width:1px;
      border-right-color:#B86969;
      border-right-style:solid;
      border-right-width:1px;
      border-top-color:#B86969;
      border-top-left-radius:5px 5px;
      border-top-right-radius:5px 5px;
      border-top-style:solid;
      border-top-width:2px;
      width:440px;
    }
    body.custom div#KatSocialSectA {
      background:##ECE5E5 !important;
      border-bottom-color:#B86969;
      border-bottom-width:1px;
      border-top-color:#B86969;
      border-top-style:solid;
      border-top-width:1px;
      padding-bottom:5px;
      padding-left:10px;
      padding-right:10px;
      padding-top:5px;
    }
    body.custom div#KatSocialSectB {
      background:#DDC5C5;
      border-bottom-color:#B86969;
      border-bottom-width:1px;
      border-top-color:#B86969;
      border-top-style:solid;
      border-top-width:1px;
      padding-bottom:5px;
      padding-left:10px;
      padding-right:10px;
      padding-top:5px;
    }
    body.custom div#KatSocialSectC {
      background:##FFFFFF !important;
      border-bottom-color:#B86969;
      border-bottom-width:1px;
      border-top-color:#B86969;
      border-top-style:solid;
      border-top-width:1px;
      padding-bottom:5px;
      padding-left:10px;
      padding-right:10px;
      padding-top:5px;
    }
    body.custom div#KatSocialSectD {
      background:#CC9999;
      border-bottom-color:#B86969;
      border-bottom-width:1px;
      border-top-color:#B86969;
      border-top-style:solid;
      border-top-width:1px;
      padding-bottom:5px;
      padding-left:10px;
      padding-right:10px;
      padding-top:5px;
      position: relative;
      float: left;
      width: 420px;
    }
    I'm using Headway, if that makes a difference to anyone. For some reason, the first part of this, the "KatSocial" part - isn't displaying properly. It looks like it is not wrapping around the other elements.

    Rather than post the code for the widgeted area, you can go to my site and see this in action on my homepage, on the upper right side of the header area:

    http://katscafe.org

    I'll be changing out some elements but the actual problem seems to be that the "KatSocial" element won't wrap around the other elements (even though it did before). I don't know if I need to code it a little differently or something?

    Please help this newbie to coding out? This is driving me crazy!

    --Kat
    Last edited by KatMoody; 01-25-2012 at 09:12 PM. Reason: forgot one section of the code *grin*


 

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
  •