How do I create a sidebar header like the one on lifehacker?

Discussion in 'CSS' started by deltanovember, Feb 5, 2011.

0
  1. #1
    http://www.lifehacker.com.au/

    Has a nice sidebar with white text and a rectangular beige background. What CSS code do I use to create the equivalent effect? My site is wordswithfriends.net and my sidebars look a little bit bare
     
    deltanovember, Feb 5, 2011 IP
  2. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Something like this?
    
<html>
<head>
<style type="text/css">
* { 
	border: 0; 
	margin: 0; 
	padding: 0; 
}

body { 
	background-color: #fff; 
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding: 100px;
}

.box { 
	background-color: #fff;
	border: 1px solid #a1a783;
	width: 300px;
}

.box h3 {
	background-color: #a1a783;
	color: #fff;
	font-size: 14px;
	height: 16px;
	margin-bottom: 10px;
	padding: 10px 20px;
}

.box p { 
	color: #786e29;
	padding: 0 20px 10px; 
}

</style>
</head>
<body>
<div class="box">
	<h3>Heading</h3>
	<p>Blah</p>
	<p>Blah</p>
	<p>Blah</p>
</div>
</body>
</html>
    Code (markup):
    Difficult to get the curved borders without making new background images.
    You could use border-radius instead of images but that does not work in IE.
     
    Cash Nebula, Feb 7, 2011 IP