Hello
I have a page here:
http://proofreading4students.com/index.asp
I am having some difficulty placing an image alongside the one you can see (actually I want to place either an image there or a small Flash graphic).
The code behind it is simple this:
<img src="./images/banner4.jpg" width="218" height="254" alt="banner" title="banner">
I have some CSS code which is as follows:
{ margin: 0;
padding: 0;
border: 1;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
body {
background: #fff;
margin:1.5em 0;
color: #797979;
font: 75%/1.5 Verdana, Arial;
}
p.main {text-align:justify;}
table { border-collapse: separate; border-spacing: 0;}
caption, th, td { text-align: left; font-weight:400;}
blockquote:before, blockquote:after, q:before, q:after { content: "";}
blockquote, q { quotes: "" "";}
a img { border: none; }
a { color: #607293; text-decoration: none; }
a:hover { color: #354158;}
#container { width: 500px; margin: auto; padding-top: 30px; padding-bottom: 50px;}
#container #logo { background: url(../img/logo.gif) no-repeat top left; height: 44px; padding-bottom: 5px; border-bottom: 1px solid #797979; margin-bottom: 20px;}
#container #logo h1 { text-indent: -9999px;}
#footer {
width:750px;
margin: 40px 0 0 0;
clear:both;
background: #000;
color: #08088A;
font-size: 11px;
}
.nav { float: right; margin-top: -15px;}
h2{ font-size: 2.2em; margin: 0; border-bottom: 1px solid #797979; margin-bottom: 5px; color: #354158;}
h3{ font-size: 1.8em; margin-top: 30px; border-bottom: 1px solid #797979; margin-bottom: 10px; color: #607293;}
h4{ font-weight: bold;}
.home .menuItem h3 { font-size: 1.8em; line-height: 1.0em; float: none; position: relative; display: block; border-bottom: none; margin: 0;}
.home .menuItem p {margin-left: 0px; margin-bottom: 0px; position: relative; display: block; border-bottom: none; }
.home .menuItem {display: block; position: relative; padding-bottom: 5px; padding-top: 5px; color: #797979; outline: none; cursor: pointer; height: 40px; border-bottom: 1px solid #797979;}
.home .menuItem:hover { background-color: #f1f1f1;}
.home h2 { color: #354158; margin-bottom: 0px;}
.arrow { font-size: 4em; position: absolute; right: 0px; top: -16px; color: #b9b9b9;}
.home .menuItem:hover .arrow { right: -4px;}
.home h2 { background: url(../img/mootools-plugins.gif) no-repeat top left; width: 500px; height: 40px; text-indent: -9999px;}
h3.example { background: url(../img/heading-example.gif) no-repeat top left; height: 30px; text-indent: -9999px;}
h3.features { background: url(../img/heading-features.gif) no-repeat top left; height: 30px; text-indent: -9999px;}
h3.compatibility { background: url(../img/heading-browser.gif) no-repeat top left; height: 30px; text-indent: -9999px;}
ul { margin-left: 15px;} dt { float: left;}
dd { margin-left: 150px; margin-bottom: 10px;}
#usage p { margin: 10px 0px 5px 0px;}
I’d be grateful for any advice, please.
Thanks.
High1