Another banner old html help needed to translate!

Hello lovely helpful people.

I've got another non-validating banner problem.

I want to put one of the search bars from the charity search engine 'Everyclick' on my site (at http://www.northwiltsholidayclub.org.uk/). The search box codes are here, http://www.everyclick.com/uk/myevery...LIDAY%20CLUB#6

I have copied and pasted one below.

I want my pages to validate because I want them to be as accessible as possible (I know that's not the only accessiblilty consideration) but I can't with these search boxes in them (I haven't used them at the moment for that reason). I think I know what at least part of the problem is - they are formatted as tables using HTML for things that should be done with CSS (width,height etc) - but as I am new to HTML and CSS and have taught myself both from web tutorials over the last few months I don't know what the old methods are, so I can't 'translate' them to the new ones.

It seems abit silly to have to learn outdated methods but it looks like I will have to! Can anyone recommend a tutorial (or better still do a translation for me? Sorry I'm being cheeky I know thats not the idea but I am not really cheating here, I want to concentrate on learning the useful stuff!)

Here is the nasty code ....

Code: Select all

<form target="_blank" action="http://www.everyclick.com/uk/northwiltsholidayclub/search" method="post">
<table width="70%" border="0" cellpadding="0" cellspacing="0" style="border: 1px solid #00CCFF;">
<tr>
    <td align="right" valign="middle" style="font-family: Arial, Helvetica, sans-serif; font-size: 12px;font-weight: bold;color: #000000;"> Search&nbsp;</td>
    <td width="45%" valign="middle"><input name="keyword" value="the web and benefit NORTH WILTS HOLIDAY CLUB" type="text" style="font-family: Arial, Helvetica, sans-serif; font-size: 11px;font-weight: normal;color: #000000; border: 1px solid #999999;background-color: #E5E5E5;" size="70"></input></td>
    <td align="left" valign="middle"><input name="refresh" type="image"  title="Search the web" value="Submit" src="http://www.everyclick.com/ext-search/tb-web.gif"/></td><td align="right" valign="middle"><a target="_blank" title="Search the web and benefit NORTH WILTS HOLIDAY CLUB" href="http://www.everyclick.com/uk/northwiltsholidayclub"><img src="http://www.everyclick.com/ext-search/poweredby.gif" alt="Powered by everyclick.com" border="0"/></a></td>
</tr>
</table>
</form>

Thank you
:bighug:

You could start by selecting and deleting table, tr, td and their closing tags. You'll be left with the form containing the input boxes, and anchors.

Take out the styling and incorporate that into a CSS file as appropriate. Bear in mind that input boxes can have inline width=, cols= etc. Position your form, probably in a DIV, as you would any other element.

Try it out and see how you get on.

There's a thread in the Beginner's Resources section that will help you

[CSS] Customize your form with CSS