Помогите чайнику!

[Таньша]

Здравствуйте! Я здесь новенькая, поэтому простите, если не в тот раздел добавляю свою тему....

Задачка такая.... Есть главная страничка сайта, где основа - это изображение дисконтных карт разных фирм.... так вот на каждой из этих карт должны располагаться 2 формы ввода - номер карты и PIN + submit ОК... таких карт + форм должно быть порядка 9 штук... где-то поля ввода будут активны, где-то нет.

Также под каждой из карт должны будут располагаться ссылки на пресс-релиз данной фирмы\компании.

Итак вопрос: как осуществить эту, простую с первого взгляда задумку...? Сделать в фотошопе фоновую картинку с изображением этих карт, а дальше мучаться с наложением форм в нужные места? не вызовет ли изменение расширения экрана пользователя сдвиг? и есть ли другие пути?

очень прошу помочь ... с логикой какая-то *опа, простите... все кажется предельно понятным, но как сделать - совсем не знаю... подскажите, пожалуйста как это сделать как можно проще...?

для наглядности эскизик (квадратики - карты, именно рисунок имитирующий настоящую карту с лого и полосой для прокатки, далее внизу Введите и поля ввода номера карты и ПИНа):

Ps умом догадываюсь, что делать это легче таблицами и ячейками, подскажите как задать фон отдельной ячейки картинкой?

Edited August 5, 2009 by Таньша

[LunatiK]

в css

.card1 {
	background-image: url(/images/card1.jpg);
	background-repeat: no-repeat;
	background-position: 0px;
}
.card2 {
	background-image: url(/images/card2.jpg);
	background-repeat: no-repeat;
	background-position: 0px;
}

в коде будь-то ячейка таблицы <td> , будь-то <div> присваеваешь имя соответствующего класса

<td class="card1"></td>
<div class="card2"></div>

ну а внутри шлёпаешь свою формус пинами

Edited August 5, 2009 by LunatiK

[Таньша]

спасибо огромное!