The left navigation does not sit right ie flush to the left of the page. The top navigation does not float to the right flush either. I hesitantly post this question as a previous post seemed to have caused a long thread of disputes.
Here is the HTML
[html] <td valign="top" rowspan="2" width="117">
<div id="navigation">
<ol>
<li><a href="mosaic.htm">mosaic workshop</a></li>
<li><a href="screen.htm">screen printing</a></li>
<li><a href="craft.htm">creative crafts</a></li>
<li><a href="web.htm">web design</a></li>
<li><a href="gallery.htm">gallery</a></li>
<li><a href="events.htm">events</a></li></ol></div>
<div id="leftcontent"> <img src="images/pheonix.jpg"
alt="image of artists work - pheonix" width="110" height="145"
align="center">
</td>
</html>
[/html]
and the css
Expand|Select|Wrap|Line Numbers
- #table {align: left;
- width: 750px;
- height: 700px;
- margin: 0 auto;}
- #navigation { padding: 0;
- margin: 1px;
- text-align: left;
- width: 180px;
- height: 160px;
- color: #6600CC;
- }
- #navigation li { margin-bottom: 3px; }
- #navigation a { background: #fff;
- display: block;
- color: #6600CC;
- padding: 3px;
- margin: 1px; }
- #navigation a:hover { background: #e60073;
- text-decoration: none; }
- #leftcontent {align: left;
- float: left; }
- #topnavigation ( text-align: right;
- color: #6600CC;
- padding: 3px;
- width: 300px;
- height: 30px;
- text-decoration: none;
- margin: 0px;
- background: #fff; }
- #topnavigation li { display: inline; }
- #topnavigation a { background: #fff;
- color: #6600CC;
- padding: 3px;
- text-align: right;
- text-decoration: none; }