HTML Calendar: Bottom image being displayed on the right not at the bottom
I have a HTML page that is supposed to display a calendar. There is an image meant to be displayed above the calendar & one below. But the one below(id=bottomCell) gets displayed incorrectly(on the right NOT below).
Can you assist me by telling me how to get the bottom picture to be in the correct position?
Please find my html & png's here http://www.mediafire.com/?bcddcen1tdc2urr so you can view what goes wrong with the images & how its displayed
<!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"><!-- InstanceBegin template="/Templates/homepage.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="dropDownMenu.js"></script>
<style type="text/css" media="all">
<!--
html, body, div, form, fieldset, legend, label, img { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } th, td { text-align: center; } h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; } img { border: 0; }
a:link, a:hover, a:visited, a:active { width: 100%; height: 100%; }
#container {position: relative; background-color: #BCC5C5; }
#calendar { float: left; background-color: #BCC5C5; width: 435px; }
#calendar th { position: relative; }
#topCell {}
#bottomCell { }
#leftButton { float: left; position: relative;
#rightButton { float: left; position: relative; }
-->
</style>
</head>
<body>
<div>
<img id="topCell" src="../Images/topTableCell.png" alt="" width="500px" height="50px"/>
<div id="container">
<a id="leftButton" ><img src="../Images/leftButton.png" height="30px" width="30px" alt=""/></a>
<table id="calendar">
<th colspan=7> abcd </th>
<tr> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> </tr>
<tr> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> </tr>
<开发者_开发百科tr> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> </tr>
<tr> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> </tr>
<tr> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> </tr>
<tr> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> </tr>
</table>
<a id="rightButton" ><img src="../Images/rightButton.png" height="30px" width="30px" alt=""/></a>
</div>
<img id="bottomCell" src="../Images/bottomTableCell.png" alt="" width="500px" height="30px"/>
</div>
</body>
<!-- InstanceEnd -->
</html>
@mack
In your container div there are three floating elements & you didn't clear it . so, first clear it
#container {position: relative; background-color: #BCC5C5; overflow:hidden; width:500px;}
The way you are using the bottom image, I would try making it display block:
#bottomCell {display:block;}
That will override the default inline-block which may be resulting in the apparent wrapping behaviour.
加载中,请稍侯......
精彩评论