naomijpsMy blog is here: http://jpsblog.org
As you can see, I've already done quite a bit of styling work on my sidebar (especially that hover effect). Now, I want to take one last step but I'm not sure how. I want separate widgets into their own boxes (ie put margins in between the widgets), and then rounded corners for each of those boxes. How should I go about doing that?
Here's what my style.css code for the sidebar looks like right now:
#secondary, #third{
background-color: #BAD6EC;
text-align:left;
padding: 0px;
border: 0px #3574A8;
SP_GRADIENT
}
#secondary h4, #third h2{
background-color: #3574A8;
color: #BAD6EC;
font-family: Verdana;
font-size: 95%;
font-weight: bold;
text-align:center;
margin-top: 0px;
padding: 7px;
}
#menu {background: #BAD6EC; border-left: 3px solid #3574A8; border-top: solid 3px #3574A8; border-right: solid 3px #3574A8; border-bottom: solid 3px #3574A8; padding: 0px 0px 10px 0px; position: absolute; right: 2px; top: 0; margin-left: 10px; text-align:left; font-size:100%; }
#menu a { text-decoration:none; color: #BAD6EC; }
#menu ul li {font-family: Verdana; font-size: 85%; font-weight: normal; text-align:left; color: #3574A8; margin-top: 0px; padding-bottom: 0px; }
#menu ul li a { display:block; padding:4px 4px 4px 10px; text-decoration:none; color: #000000; }
#menu ul li a:hover { color:#BAD6EC; background: #3574A8; }
#archives ul li {font-family: Verdana; font-size: 85%; }
Thanks!
