Forum Moderators: not2easy
There's only one problem with it. I can't set the background color of the footer, since that property is aleady taken up by the image bg. And i don't have any other hooks in there. Is there a good way to do it without adding in more DIV? I am not 100% happy with the way my HTML look already, and i don't want to add any more stuff to it.
Here's the code. The graphics are sliced up the same way as they are in the tutorial above
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Design: Creating Custom Corners & Borders: A List Apart: Looks like we're finally there!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
div.Article
{
width:35%;
background: url(images/element_topleft.gif) top left no-repeat;
}
div.Article h3
{
background: url(images/element_topright.gif) top right no-repeat;
font: 18px Geneva, Arial, Helvetica, sans-serif;
color: white;
font-weight: bold;
margin: 0px;
padding-left: 15px;
height:22px;
}
div.ArticleBody
{
background: url(images/element_rightborder.gif) top right repeat-y;
margin:0px;
padding: 0px;
}
div.ArticleBody p
{
font: 14px Geneva, Arial, Helvetica, sans-serif;
background: green;
padding-left: 5px;
padding-right: 5px;
margin-left: 5px;
margin-right:5px;
margin-top:0px;
margin-bottom:0px;
}
div.ArticleFooter
{
margin: 0px;
background: url(images/element_bottomleft.gif) bottom left no-repeat;}
div.ArticleFooter p
{
background: url(images/element_bottomright.gif) bottom right no-repeat;
margin: 0px;
text-align: right;
padding-right:10px;
padding-bottom:5px;
font-style: italic;
font-size: 12px;
}
</style>
</head>
<body>
<div class="Article">
<DIV class="ArticleHeader">
<h3>Article Header</h3>
</DIV>
<div class="ArticleBody">
<p>
A few paragraphs of article text.<br />
A few paragraphs of article text.
</p>
<p>
A few paragraphs of article text.<br />
A few paragraphs of article text.
</p>
</div>
<div class="ArticleFooter">
<p>Article Footer</p>
</div>
</div>
</body>
</html>
div.ArticleFooter p
{
background: url(images/element_bottomright.gif) bottom right no-repeat;
The simple answer lies in the shorthand for the background attribute, which goes:
background: color image position repeat;
So, to add a white background (which will lie behind your image, more in a moment) your new style rule says:
div.ArticleFooter p {
background: #fff url(images/element_bottomright.gif) bottom right no-repeat;
}
That said, I suspect that this may not give you the results you want, primarily because Soren Madsen's technique involves images as the backgrounds in your various <divs>. Unless you've drastically swayed from his procedure, the only way to change the INNER background color of the footer (or any other peice inside the custom rounded corners) is to change the color of the background image in your image editor, then re-export it over the old one.
In other words, changing the background with CSS will change the color BEHIND the image, but in MAdsen;s layout, the color of your 'working' area (text location, et al) is determined by the image itself?
Capisci?
Since I learned the technique from a(nother) A List Apart article, I'll just direct you there instead of trying to explain it here. The article is called Mountaintop COrners by Dan Cederholm. Specifically, you want the section on Transparent Peaks.
Check it out and let me know if it does the trick.
That's very doable, actually (I may do it myself!). User could get a simple form <option> menu, select a color and the page reloads with the new images...
Other than that, I don't think it's possible because of the nature of the design (you could try making the white inner part of the image transparent, but i seem to remember trying that and discovering that it doesn't work.)
