I'm trying to use a horizontal gradient in our masthead and a vertical
gradient in a left column (see this mockup:
http://www.rodeftzedek.org/home/jcc/JCC-mockup.jpg).
The CSS is as follows (from
http://www.rodeftzedek.org/home/jcc/css/general.css):
#header {
width: 1024px;
float: left;
background-image: url(images/bannrtopgradient_rust_gold.png);
background-repeat: repeat-y;
background-position: top left;
}
#main-nav {
width: 1024px;
float: left;
text-align: center;
padding-top: 125px;
padding-bottom: .25em;
margin-top: -7em;
border-top:1px solid #000;
border-bottom:1px solid #000;
background-image: url(images/left_palegreeen.png);
background-repeat: repeat-y;
background-position: top left;
/* background: #b7da9d; */
}
Here's the associated markup:
<div id="header">
<img id="logo"
src="images/zweisslogoJAR.png"
width="66"
height="90"
alt="Jewish Climent Challenge logo"/>
<div id="website-name" style="">
The Jewish Climate Challenge
</div>
<div style="clear:both;"></div>
<div id="main-nav">
<a class="masthead-choice-link"
href="index.html">Home</a>
<a class="masthead-choice-link"
href="index.html">How we're
different</a>
<a class="masthead-choice-link"
href="index.html">What you can
do</a>
<a class="masthead-choice-link"
href="index.html">Accept the
Challenge</a>
<span
class="current-masthead-choice">Resources</span>
<a class="masthead-choice-link"
href="index.html">About us</a>
</div>
</div>
<div id="leftcolumn">
<div class="sidebar" style="padding-top: 80px;">
<img src="images/pledge.jpg"
border="0"
alt="pledge"/><br/>
<a id="pledge"
href="index.html">Accept the Challenge</a>
</div>
<div class="sidebar">
Will air travel ever be green? Seems only a matter of time...
<a target="_blank" href="http://gas2.org/2008/01/15/algae-
based-biofuel-to-power-virgin-atlantic-747-jet/">Check it out</a>
</div>
</div>
My questions are:
- Why aren't the gradients showing up?
- Why is the border-top showing up at the top of the header div rather
than the main-nav div?
- Also, changing the background color of the main-nav div results in
the background of the header div to change. Why is this happening?
Here's the page in question: http://www.rodeftzedek.org/home/jcc/
TIA,
David
--~--~---------~--~----~------------~-------~--~----~
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
-~----------~----~----~----~------~----~------~--~---
