I have a strict doc type: However, I am still unsure about css. Problems I have now are to do with floating both navigation lists. I have used tables and divs, as layouts are just too difficult for me to take on right now, but maybe this is causing problems.
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.ht m">mosaic workshop</a></li>
<li><a href="screen.ht m">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.h tm">gallery</a></li>
<li><a href="events.ht m">events</a></li></ol></div>
<div id="leftcontent "> <im g src="images/pheonix.jpg"
alt="image of artists work - pheonix" width="110" height="145"
align="center">
</td>
</html>
[/html]
and the css
[code=css]
#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; }
[/code]
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.ht m">mosaic workshop</a></li>
<li><a href="screen.ht m">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.h tm">gallery</a></li>
<li><a href="events.ht m">events</a></li></ol></div>
<div id="leftcontent "> <im g src="images/pheonix.jpg"
alt="image of artists work - pheonix" width="110" height="145"
align="center">
</td>
</html>
[/html]
and the css
[code=css]
#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; }
[/code]
Comment