How to mimic the following in CSS
Terry
how would I mimic these two sections that will be drawn from a database.
The number will not exceed ten but it grows and shrinks dynamically
(verticaly). The width of is fluid bases on users screen size. If you
look at http://members.rogers.com/terrydupuis/css/help.gif the section
that it fits into is "content A" and "content B".
I have made an attempt below (first attempt at css). The things I'm
unsure of include:
- Am I using DIV's and SPAN's in the correct place?
- Am I using DIV's and SPAN's in the correct combination?
- Am I using classes and ID's correctly?
- Anyway to simplify what I've done?
Help and suggestions much appreciated.
===============================================
<html>
<head>
<title>test</title>
<style type="text/css">
<!--
body {
font:11px verdana, arial, helvetica, sans-serif;
}
.SectionTitle {
color: #CAA200;
font-size: 1.5em;
font-weight: bold;
}
.SectionItem {
padding-left: 5px;
border-bottom-width: .05em;
border-bottom-style: dotted;
}
.SectionItemArrow {
font-size: .8em;
}
.SectionItemDate {
font-weight: bold;
}
-->
</style>
</head>
<body>
<div id="LatestNews">
<div class="SectionTitle">Latest News</div>
<div class="SectionItem"><span class="SectionItemArrow">></span> <span
class="SectionItemDate">2003-01-31</span> Premier's Roundtable on
Agriculture</div>
<div class="SectionItem"><span class="SectionItemArrow">></span> <span
class="SectionItemDate">2003-01-22</span> roposed Nutrient Management
Act</div>
</div>
<div id="PopularTopics">
<div class="SectionTitle">Popular Topics</div>
<div class="SectionItem"><span class="SectionItemArrow">></span> <span
class="SectionItemDate">2002-11-29</span> Forgeign Animal Disease
Advisory</div>
<div class="SectionItem"><span class="SectionItemArrow">></span> <span
class="SectionItemDate">2002-09-22</span> Meat Inspection Hotline</div>
</div>
</body>
</html>
===============================================
Terry