Menu
I have a snippet of code I’m working on. Basically it’s a div that has a corner set to the top right of the image. Similar to the rounded corners things I find all over the web, except for one major difference – it only has one rounded corner image. The image itself is also a shade of grey and a darker grey with a 1px border. So, to match the look of the corner image, I set the bg color to the lighter grey and apply a dark grey 1px border to the div (as seen below). However, that puts the border around the image itself and causes the rounded corner to be pointless. So I tried wrapping the content in a div inside that div and applying the border to that, so as to “push” the rounded corner div outside, but that didn’t work either… Any idea on how to get this code to work?
[code]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Untitled Document</title>
<style type=”text/css”>
<!–
#left_box {
float: left;
width: 207px;
}
#left_box .title {
color: #FFFFFF;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
background-image: url(img12.jpg);
background-repeat: no-repeat;
height: 19px;
}
#left_box .content_corner {
color: #000000;
background-color: #F4F4F4;
background-position: right top;
background-image: url(leftFrame_TLcurve.jpg);
background-repeat: no-repeat;
font-size: x-small;
border: none;
}
#left_box .content {
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
height: 100px;
}
–>
</style>
</head>
<body>
<div id=”left_box”>
<div class=”title”>Header</div>
<div class=”content_corner”>
<div class=”content”>
Lorem ipsum dolor sit amet, bene facilisi.
</div>
</div>
</div>
</body>
</html>
I can’t post this live to the net so will attach the two images below.
[upl-file uuid=6dff8445-0d6f-488a-a538-f568b690b61b size=393B]leftFrame_TLcurve.jpg
[upl-file uuid=1c4a012b-c608-4ffd-9327-a28315367f5c size=1kB]img12.jpg