Hello, I’m kinda new to this CSS, I have many books but I’m still a beginner. So I have a problem. I have a calendar and I have another div below this calendar. With a scroll and different background color to that div. But nothing seems to work for me to do what I want. So help me if you can.:).Thank you!
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="calendar">
<table width="257" height="" cellspacing="4" cellpadding="4" border="1" bgcolor="#eaf5e5">
<tr>
<th height="25" scope="col"> </th>
<th height="25" scope="col" ><img src="img/arrow1.gif" align="right" /></th>
<th height="25" colspan="4" scope="col"><font face="Courier New, Courier, monospace" size="-1" color="#038a9d">SEPTEMBRE 2010</font></th>
<th height="25" scope="col"><img src="img/arrow2.gif" align="left" /></th>
</tr>
<tr>
<th width="24" height="25" scope="col">D</th>
<th width="24" height="25" scope="col">L</th>
<th width="24" height="25" scope="col">M</th>
<th width="24" height="25" scope="col">M</th>
<th width="24" height="25" scope="col">J</th>
<th width="24" height="25" scope="col">V</th>
<th width="24" height="25" scope="col">S</th>
</tr>
<tr>
<td width="24" height="25">1</td>
<td width="24" height="25">2</td>
<td width="24" height="25">3</td>
<td width="24" height="25">4</td>
<td width="24" height="25">5</td>
<td width="24" height="25">6</td>
<td width="24" height="25">7</td>
</tr>
<tr>
<td width="24" height="25">8</td>
<td width="24" height="25">9</td>
<td width="24" height="25">10</td>
<td width="24" height="25">11</td>
<td width="24" height="25">12</td>
<td width="24" height="25">13</td>
<td width="24" height="25">14</td>
</tr>
<tr>
<td width="24" height="25">15</td>
<td width="24" height="25">16</td>
<td width="24" height="25">17</td>
<td width="24" height="25">18</td>
<td width="24" height="25">19</td>
<td width="24" height="25">20</td>
<td width="24" height="25">21</td>
</tr>
<tr>
<td width="24" height="25">22</td>
<td width="24" height="25">23</td>
<td width="24" height="25">24</td>
<td width="24" height="25">25</td>
<td width="24" height="25">26</td>
<td width="24" height="25">27</td>
<td width="24" height="25">28</td>
</tr>
<tr>
<td width="24" height="25">29</td>
<td width="24" height="25">30</td>
<td width="24" height="25">31</td>
<td width="24" height="25"> </td>
<td width="24" height="25"> </td>
<td width="24" height="25"> </td>
<td width="24" height="25"> </td>
</tr>
</table>
<div id="scrooling">
<p><font face="Courier New, Courier, monospace" size="+1" color="#67bb5d"><strong>25 SEPTEMPRE 2010</strong></font><font face="Arial, Helvetica, sans-serif" size="-1" color="#058a93">
</font></p>
<ul><font face="Arial, Helvetica, sans-serif" size="-1" color="#058a93">
<li>Conge FGA et FP</li>
<li>Debut du Marie</li>
<li>Debut du DEP en dessin industriel</li></font></ul>
</div>
</div>
</body>
</html>
And the css file:
@charset "utf-8";
/* CSS Document */
th {
border:none;
font-family:"Courier New", Courier, monospace;
font-size:13px;
color:#a7b4ba;
font-style:normal;
text-align:center;
}
td {
background-color:#ffffff;
text-align:center;
}
#calendar {
position:relative;
top: 5px;
left: 5px;
z-index: 20;
height: 350px;
width: 257px;
background-color: #eaf5e5;
border:solid 1px #999;
}
#scrolling {
position:absolute;
top: 380px;
width: 188px;
height: 116px;
z-index: 10;
overflow: scroll;
background-color:#FFF;
}