Help, my first attempt at css and I'm already stuck!
I've just created a class called "homepage-box" within an id called
"content". However, my css rule "#content.homepage-box" does not show any
rules I set (top border etc.), either in Dreamweaver's design view, or on
the uploaded page at www.devonweddingcakes.co.uk Here's the code, followed
by the css sheet. Can anyone help please?
<body>
<div id="header">
<a href="#"><img src="images/cake_logo.jpg" alt="logo with close up photos
of cakes" width="969" height="99" id="logo" /></a>
<div id="header-bottom">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Sitemap</a></li>
</ul>
</div>
</div>
<div id="content">
<h1>Cakes to celebrate any occasion</h1>
<div class="homepage-box">
<h2><a href="#">Wedding Cakes</a></h2>
<p>We can design and create your wedding cake according to your wishes.
Choose from traditional royal iced wedding cakes, sugarcraft cakes,
chocolate cakes, novelty cakes, and individual cup cake & mini cake
towers.<img src="images/wedding_cake_chocolate.jpg" alt="Wedding cake in
dark and milk chocolate" width="200" height="294" /></p>
</div>
<div class="homepage-box">
<h2><a href="#">Corporate Cakes </a></h2>
<p>Make your corporate event special with a cake from us. 25 years
experience of making these types of cake ensures that it will project
exactly the right image for your business. <img
src="images/corporate_cake_first.jpg" alt="Corporate cake iced with first
great western" width="425" height="294" /></p>
</div>
<div class="homepage-box">
<h2><a href="#">Birthday Cakes</a></h2>
<p>First birthday cakes, children's party cakes, 18th and 21st birthday
cakes, 40's 50's etc., right through to cakes for centenarians, everyone
needs a birthday cake! <img src="images/birthday_cake_ship.jpg"
alt="birthday cake with ship, train and dolphins" width="304" height="294"
/></p>
</div>
<div class="homepage-box">
<h2><a href="#">Novelty Cakes </a></h2>
<p>Let your imagination run riot!Almost anything can be turned into a
cake. <img src="images/novelty_cake_wolf.jpg" alt="a cake shaped like a
wolfs head" width="313" height="294" /></p>
</div>
<div class="homepage-box">
<h2><a href="#">Christening Cakes </a></h2>
<p>Choose from contemporary or traditional cakes, tiered or non-tiered.
<img src="images/christening_cake_tiered.jpg" alt="Tiered christening cake
with baby on top" width="297" height="294" /></p>
</div>
<div class="homepage-box">
<h2><a href="#">Anniversary Cakes </a></h2>
<p>Silver, Ruby, Gold, Diamond anniversary - celebrate the achievement
with a fitting cake. <img src="images/anniversary_cake_golden.jpg"
alt="golden wedding anniversary cake" width="287" height="294" /></p>
</div>
<div class="homepage-box">
<h2><a href="#">Photo Cakes </a></h2>
<p>Particularly good for birthday and anniversary cakes, bring out those
treasured old photographs, and let us transfer them onto your cake. Also
great for any picture or image that's difficult to reproduce by traditional
icing methods.<img src="images/photo_cake_corporate.jpg" alt="a magazine
cover printed on a cake" width="357" height="294" /> </p>
</div>
<div class="homepage-box">
<h2><a href="#">Other Cakes </a></h2>
<p>Leaving cakes, retirement cakes, and any cake not in our other
categories.<img src="images/retirement_cake_gardening.JPG" alt="cake with
marzipan fruits and vegetables on top" width="300" height="285" /></p>
</div>
</div>
body {
font-size: 1em;
color: #000000;
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
}
#header {
width: 100%;
}
#logo {
position: absolute;
left: 0px;
top: 0px;
}
#header-bottom {
background-color: #CCFFCC;
height: 10px;
margin-top: 100px;
}
#header-bottom ul {
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#header-bottom li a:link {
color: #000000;
text-decoration: none;
}
#header-bottom li a:visited {
color: #000000;
text-decoration: none;
}
img {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
#header-bottom li {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 90%;
font-weight: bold;
display: inline;
margin-right: 2.4em;
}
#content {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 80%;
margin-top: 50px;
margin-right: 40px;
margin-left: 150px;
}
#content.homepage-box {
float: right;
width: 49%;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCFFCC;
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
