Осваиваю html/css, и уже срочно нужно выполнить задание. Пишу калькулятор широкоформатной печати. В html нарисовал таблицу, сделал выпадающий список, флажки для выбора вариантов. И у меня есть картинка, которую нужно наложить на эту таблицу и возможность в этой картинке в полях писать. Подскажите пожалуйста, как это сделать?
в полях у которых есть задний фон картинка или прям на картинке нужно писать и потом дать скачать картинку с надписью?
Не совсем понял вопрос, но думаю первый вариант. Картинка калькулятора уже есть, но мне нужно её соединить с таблицей,чтобы поля таблицы в html совпали с полями картинки, т.е выпадающий список с полем выпадающего списка, флажки с флажками и кнопка Рассчитать там же, как и на картинке.
Вначале вы говорили что-то про "писа́ть в этой картинке". Если изображение бекграундом, то можно задать свойство background-size: 100% 100%; А вот тут у меня полный ступор.
Знаю, возможно не совсем понятно объяснил, имел в виду соотнести правильно поля, флажки таблицы и поля, флажки картинки.
@Deshain тогда нарисуйте как всё должно выглядеть, мы постараемся угадать --- Добавлено --- может на форме не рисовать поля и флажки, а просто задать нужный стиль самим полям и флажкам? --- Добавлено --- По какой книге?
Боюсь, что я понял. У вас на картинке нарисованы всякие элементы формы и вы хотите совместить с реальными элементами на странице? Жёсткий подход Теоретически это сделать можно, но честно скажу, что возвращаться в начало двухтысячных желанием не особо горю. Можете вывести картинку бекграундом, а элементы формы подгонять абсолютным позиционированием.
картинку приложил, буду благодарен) не могу, это моё тз, нужна именно эта картинка. По сайту webref.ru
вот этот подход можно использовать, рисовать формы не надо, будет как на картинке это энциклопедия + статьи, нужна книга, начни с книги для начинающих по HTML и CSS, лучше свежей, 2015.2016 год
Сделал, как посоветовали, бэкграундом сам калькулятор, применил абсолютное позиционирование для всех картинок, получилось вот что. Теперь вопрос, как поля таблицы подогнать под картинку? Создавать класс для каждой строки таблицы и править через css или можно как-то проще? И 2 вопрос, когда всё-таки размер подгоню, мне грани таблицы ведь уже не нужны будут, их прозрачными обычно делают?
это нужно было для полей делать, хотя с таблицей тоже хорошо вышло им тоже можно давать размеры, но лучше поля через абсолютное позиционирование расставить один класс для цвета фона, полей и т.д. второй класс для каждого поля с позиционированием и размерами если нужно, наследовать просто class="first_class second_class" --- Добавлено --- @denis01 надо ещё книгу по CSS и HTML читать, чтобы знать основы и наши советы были более понятны
всё это гуглится очень легко. Как задать размеры какие стили бывают у INPUT-ов как вставить фоновую картинку почему position absolute прилипает к верхнему левому углу браузера --- Добавлено --- ты быстрее нагуглишь чем тут будешь дожидаться ответа. Это на столько просто, что аж скучно...
значит парой классов можно обойтись? ок, попробую, а то и мне как показалось лишних понаделал много. Гуглить нужно так? Как группировать несколько полей одним классом?
Класс - он на то и класс. Ничего не нужно группировать. Просто прописываешь нескольким тэгам атрибут class='myClass' и в css пишешь. Код (CSS): .myClass { /* Правила, которые применятся ко всем тэгам с этим классом */ }
id можно давать только одному элементу на странице, иначе может выйти что-то непредсказуемое. классы можно давать нескольким элементам, т.е. можно навесить один класс на несколько элементов классы одного элемента можно перечислять через пробел, т.е. можно навесить несколько классов на один элемент вперде
Доделал, хочу грани таблицы сделать прозрачными. Но для таблицы уже есть класс в css, если opacity:0 делать, тогда и бэкграунд становится прозрачным, как в CSS указать именно таблицу?
Да, но border то я знаю, можно в table "0" поставить в html и уберется рамка, а кроме рамки еще сам текст таблицы спрятать нужно, чтобы была видна только картинка на бэкграунде с выпадающим списком. Не хочется каждой строке opacity прописывать. Пробовал группировать тэги по такому принципу http://htmlbook.ru/samcss/gruppirovanie для прозрачности, но ничего не меняется почему-то. Приходится вручную- на каждую строку по классу, и уже в нем опасити прописывать.
Код (CSS): .tableClass td, .tableClass th { opacity:0; } Вот так попробуй. Я не пробовал но должно помочь. tableClass - это класс твоей таблицы.
@Deshain какой нахрен выпадающий список внутри прозрачной таблицы? как ты себе это представляешь? Есть картинка?
Да немного не так объяснил, тогда остается картинка и один выпадающий список, а мне нужно убрать видимость таблицы html, т.е всё что голубым цветом. Как можно это получить?
искать можно: css абсолютное позиционирование как группировать: Код (CSS): .class1 { } .class2 { } HTML: <input type="text" name="test" class="class1 class2">