How can I create sheet borders that are suppressed around the header? |
|
Jen
|
Hi all, I so hope someone can help me with this.
I created a design that has a kind of floating effect that is supposed to appear as if it extends over and above the top of the header, transparently. Here's the theme, as I've got it now: http://dartmouthdesign.com/joomla/
I have easily accomplished that by creating my own header graphic and matching its background color to the main background color of the theme.
The trouble is that the whole main visual area is supposed to have a 3px orange border running around it.
In anticipation of the trickiness this could cause, I built the border-top, so to speak, into the header image itself, as you can see in the template. (And I prepared a header image with border on the left and right, as well, which I will need in the end, I'm sure.)
The problem is obvious--if you use Artisteer to apply the border styling, then the border appears to extend above the visual top of the header, because the header is actually taller than it appears to the eye.
I can get rid of the top of the border, but I get stuck with the left- and right-side borders seeming to stick up about a 1/2" above the top-left and top-right corners of the design.
I have tried just applying border styling to the divs from menu to footer without success. I've tried a bunch of things, really, and I get results like the border only showing up on one side, or on 2 out of 3 divs.
There's got to be an easier way, right? This is such a popular type of design (something with a transparent background appearing to cross the edge of the header.
Thanks so much!
|
| |
Abland
|
Hi, Jen,
Redo your header image so you have your borders on left and right also.
Add to your theme's "template.css":
.border-wrap
{
border-bottom: 3px #ecc460 solid;
border-left: 3px #ecc460 solid;
border-right: 3px #ecc460 solid;
width:894px;
}
Then edit the following for width values: (currently 900px)
.art-sheet
{
width: 894px;
}
.art-footer
{
width: 894px;
}
.art-content-layout
{
width: 894px;
}
Then add right above "<div class="art-nav">":
<div class="border-wrap">
Then find:
<div class="art-footer-background"></div>
</div>
and add a closing "</div>" right beneath it.
|
| |
Jen
|
Thanks, Abland!
I actually solved it in a very similar way before I saw your reply, but your fix looks easier. 
Afterward, I had plenty of cross-browser issues (894px vs 900px vs 90spx), but the big GiantIsland css fix helped me out!
Many thanks,
Jen
|
| |
|
|