Emma White
New member
I have this CSS linked to my HTML. I am trying to make a calendar and for the border I am trying to use pictures by linking them in my CSS to a certain spot in my HTML I just dont know how to reference to the spot in CSS. Im new to this so sorry if it sounds dumb.
Here is the CSS:
Filename: ccc.css
Supporting Files: bottom.jpg, bottomleft.jpg, bottomright.jpg, left.jpg
tab.jpg, top.jpg, topleft.jpg, topright.jpg, right.jpg
*/
body {font-family: Verdana, Geneva, sans-serif}
#heading {position: absolute; top: 0px; left: 15px; width: 920px;
border-bottom: 1px solid red; }
#leftColumn {position: absolute; top: 170px; left: 15px; width: 280px}
#rightColumn {position: absolute; top: 170px; left: 320px; width: 600px}
#? {background-image: url(topleft.jpg) no-repeat 100%; position: absolute, top 0, left 0;}
^^^^ I just dont know what to call where the question mark is. It is supposed to reference to the tlCorner element in the HTML. I have tried #rightColumn tr since it is under the rightColumn and under the tr also but that didnt work, Ive tried just tr and just #rightColumn. Any suggestions? So now take a look at the HTML below.
HTML:
Filename: feb.htm
Supporting files: bottom.jpg, bottomleft.jpg, bottomright.jpg, calendar.css,
ccc.css, ccc.jpg, left.jpg, right.jpg, tab.jpg, top.jpg,
topleft.jpg, topright.jpg
-->
<title>February at the Chamberlain Civic Center</title>
<link href="ccc.css" rel="stylesheet" type="text/css" />
<link href="calendar.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="heading">
<img src="ccc.jpg" alt="The Chamberlain Civic Center" />
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Box Office</a></li>
<li><a href="#">Facilities</a></li>
<li><a href="#">Directions</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div id="leftColumn">
<h2>Coming in February</h2>
<p>February will be another banner month at the Chamberlain Civic
Center with a two day performance of the Tony Award winning
musical, <i>West Side Story</i> by the Broadway Touring Company.
Tickets are going fast, so order yours today.</p>
<p>Celebrate Valentine's Day with the Chamberlain Symphony and
their special selection of classical music for lovers. The next
day, exercise your mind by attending the Charles Dickens classic,
<i>The Mystery of Edwin Drood</i>.</p>
<p>Jazz lovers have a lot to celebrate in February with a visit
from the <i>Jazz Masters</i> on February 10th, and then on February
21st, enjoy the music of The Duke with an <i>Ellington Tribute</i>
performed by the Jazz Company of Kansas City.</p>
<p>Pins, bottles, plates, and chairs are flying at the Chamberlain
Civic Center in February. The <i>Taiwan Acrobats</i> return with
another amazing performance. Then, on February 25th, the <i>Madtown
Jugglers</i> get into the act with their unique blend of comedy,
juggling, and madness.</p>
<p>Enjoy a classical brunch every Sunday in February with music
provided by the <i>Carson Quartet</i>. Seating is limited, so please order
your table in advance.</p>
</div>
<div id="rightColumn">
<table class="calendar">
<caption>Events in February at the CCC</caption>
<colgroup>
<col class="weekdays" span="5" />
<col class="weekends" span="2" />
</colgroup>
<thead>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</thead>
<tbody>
<tr>
<div class"tBorder"><div class"rBorder">
<div class"bBorder"><div class"bBorder">
<div class"tlCorner"><div class"trCorner">
^^^^^^ This "tlCorner" is where the .jpg picture is supposed to reference to.
<div class"blCorner"><div class"brCorner">
<div class="boxContent">
<td>
<h3>26</h3>
<dl>
<dt>Carson Quartet plays</dt>
<dd>1:00 p.m. ($8)</dd>
</dl>
ect...ect, the rest doesnt pertain to the question.
That didnt answer my question though, I knew the float wasnt right to begin with my main point was I dont know what to put in place of the question mark in my CSS to refrence it to <div class"tlCorner"> in my HTML.
Here is the CSS:
Filename: ccc.css
Supporting Files: bottom.jpg, bottomleft.jpg, bottomright.jpg, left.jpg
tab.jpg, top.jpg, topleft.jpg, topright.jpg, right.jpg
*/
body {font-family: Verdana, Geneva, sans-serif}
#heading {position: absolute; top: 0px; left: 15px; width: 920px;
border-bottom: 1px solid red; }
#leftColumn {position: absolute; top: 170px; left: 15px; width: 280px}
#rightColumn {position: absolute; top: 170px; left: 320px; width: 600px}
#? {background-image: url(topleft.jpg) no-repeat 100%; position: absolute, top 0, left 0;}
^^^^ I just dont know what to call where the question mark is. It is supposed to reference to the tlCorner element in the HTML. I have tried #rightColumn tr since it is under the rightColumn and under the tr also but that didnt work, Ive tried just tr and just #rightColumn. Any suggestions? So now take a look at the HTML below.
HTML:
Filename: feb.htm
Supporting files: bottom.jpg, bottomleft.jpg, bottomright.jpg, calendar.css,
ccc.css, ccc.jpg, left.jpg, right.jpg, tab.jpg, top.jpg,
topleft.jpg, topright.jpg
-->
<title>February at the Chamberlain Civic Center</title>
<link href="ccc.css" rel="stylesheet" type="text/css" />
<link href="calendar.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="heading">
<img src="ccc.jpg" alt="The Chamberlain Civic Center" />
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Box Office</a></li>
<li><a href="#">Facilities</a></li>
<li><a href="#">Directions</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div id="leftColumn">
<h2>Coming in February</h2>
<p>February will be another banner month at the Chamberlain Civic
Center with a two day performance of the Tony Award winning
musical, <i>West Side Story</i> by the Broadway Touring Company.
Tickets are going fast, so order yours today.</p>
<p>Celebrate Valentine's Day with the Chamberlain Symphony and
their special selection of classical music for lovers. The next
day, exercise your mind by attending the Charles Dickens classic,
<i>The Mystery of Edwin Drood</i>.</p>
<p>Jazz lovers have a lot to celebrate in February with a visit
from the <i>Jazz Masters</i> on February 10th, and then on February
21st, enjoy the music of The Duke with an <i>Ellington Tribute</i>
performed by the Jazz Company of Kansas City.</p>
<p>Pins, bottles, plates, and chairs are flying at the Chamberlain
Civic Center in February. The <i>Taiwan Acrobats</i> return with
another amazing performance. Then, on February 25th, the <i>Madtown
Jugglers</i> get into the act with their unique blend of comedy,
juggling, and madness.</p>
<p>Enjoy a classical brunch every Sunday in February with music
provided by the <i>Carson Quartet</i>. Seating is limited, so please order
your table in advance.</p>
</div>
<div id="rightColumn">
<table class="calendar">
<caption>Events in February at the CCC</caption>
<colgroup>
<col class="weekdays" span="5" />
<col class="weekends" span="2" />
</colgroup>
<thead>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</thead>
<tbody>
<tr>
<div class"tBorder"><div class"rBorder">
<div class"bBorder"><div class"bBorder">
<div class"tlCorner"><div class"trCorner">
^^^^^^ This "tlCorner" is where the .jpg picture is supposed to reference to.
<div class"blCorner"><div class"brCorner">
<div class="boxContent">
<td>
<h3>26</h3>
<dl>
<dt>Carson Quartet plays</dt>
<dd>1:00 p.m. ($8)</dd>
</dl>
ect...ect, the rest doesnt pertain to the question.
That didnt answer my question though, I knew the float wasnt right to begin with my main point was I dont know what to put in place of the question mark in my CSS to refrence it to <div class"tlCorner"> in my HTML.