Following on from my previous thread on rounded corners with CSS. I used the link kindly supplied (this) which works an absolute treat.
However I need to modify part of my design to have transparent PNGs on the corners, as the background is going to be a Flash video.
Looking at the following code, I need to keep the red background as it is, but lose the 'edges' that show up beneath the transparent PNGs (outside the corners).
I'm assuming I probably need to add another nested DIV or two across the top and bottom 'strips' of red, but I can't figure it out. What I essentially want to do is be able to change the red background colour, without seeing it behind the PNGs. Does that make sense? If not it probably will if you download the file
http://rapidshare.com/files/387653468/rounded.zip.html
CSS:
Many thanks in advance!!
However I need to modify part of my design to have transparent PNGs on the corners, as the background is going to be a Flash video.
Looking at the following code, I need to keep the red background as it is, but lose the 'edges' that show up beneath the transparent PNGs (outside the corners).
I'm assuming I probably need to add another nested DIV or two across the top and bottom 'strips' of red, but I can't figure it out. What I essentially want to do is be able to change the red background colour, without seeing it behind the PNGs. Does that make sense? If not it probably will if you download the file
http://rapidshare.com/files/387653468/rounded.zip.html
Code:
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="test.css" media="screen" charset="utf-8" />
</head>
<body>
<div class="roundedcornr_box_313069">
<div class="roundedcornr_top_313069"><div></div></div>
<div class="roundedcornr_content_313069">
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.
</div>
<div class="roundedcornr_bottom_313069"><div></div></div>
</div>
</body>
</html>
Code:
body {background: #000; color: #000;}
.roundedcornr_box_313069 {
background: red;
}
.roundedcornr_top_313069 div {
background: url(topleft.png) no-repeat top left;
}
.test { width: 400px; background: blue;}
.roundedcornr_top_313069 {
background: url(topright.png) no-repeat top right;
}
.roundedcornr_bottom_313069 div {
background: url(bottomleft.png) no-repeat bottom left;
}
.roundedcornr_bottom_313069 {
background: url(bottomright.png) no-repeat bottom right;
}
.roundedcornr_top_313069 div, .roundedcornr_top_313069,
.roundedcornr_bottom_313069 div, .roundedcornr_bottom_313069 {
width: 100%;
height: 40px;
font-size: 1px;
}
.roundedcornr_content_313069 { border-left: 40px solid #dceaeb; border-right: 40px solid #dceaeb; background: #dceaeb; margin: 0}Many thanks in advance!!