Перейти из форума на сайт.

Новости • Файловые архивы
Поиск • Активные темы • Топ лист
Правила • Кто в on-line?
Вход • Забыли пароль? • Первый раз на этом сайте? • Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » Помощь HTML

Модерирует : Cheery

 Версия для печати • Подписаться • Добавить в закладки
Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

Открыть новую тему     Написать ответ в эту тему

IIOPTAJI

Newbie		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Ребят, я новичок в хтмл, и на этом форуме тоже, песочницу найти не мог.
Я создаю простой блокнот, пишу там всякие коды, которые нашел в интернете, и возник вопрос, как сделать фон чтобы не белый фон был, а какая нибудь картинка. Если что-то не то задал из вопросов, прошу прощения
Всего записей: 4 | Зарегистр. 05-07-2011 | Отправлено: 21:09 09-08-2013
Niko0808

Newbie		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
"добавляете класс цвета фона в <div class="sphere">"
Можно целиком пример?  
 
"или выставляете background-color: нужного цвета в  
Цитата:
.sphere {"
 
Вот смотрите, сейчас мне нужен зеленый шарик. А например кнопку нажали и шарик стал красным.  
Можете такой пример прислать, самой простой реализации. Видел примеры, где фон страницы меняют, где картинки добавляют.  
Мне нужно закрасить кружок разными цветами пусть хоть по нажатию кнопки.Например две кнопки одну нажимаем кружок зеленый, другую нажимаем кружок красный.  
 
Всего записей: 3 | Зарегистр. 21-03-2012 | Отправлено: 23:16 10-08-2017
Mavrikii

Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Niko0808

Цитата:
Можно целиком пример?  

нельзя, я понятия не имею о какой внешней переменной вы говорите.
в простейшем виде у вас должно получиться <div class="sphere red">
 

Цитата:
 А например кнопку нажали и шарик стал красным.  

ну так и нужно говорить сразу. https://jsfiddle.net/opu00r7z/
Всего записей: 15108 | Зарегистр. 20-09-2014 | Отправлено: 00:25 11-08-2017 | Исправлено: Mavrikii, 00:27 11-08-2017
Niko0808

Newbie		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Спасибо. Отличный пример, буду разбираться дальше.
Всего записей: 3 | Зарегистр. 21-03-2012 | Отправлено: 07:09 11-08-2017
Alexey87

Advanced Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Уважаемые форумчане, помогите, пожалуйста, в реализации задуманного с использованием html+css или нужна программная оснастка (php, скрипты и пр.)...
 
Хочу разместить на сайте афишу с новостями сообразно скриншоту.
Особого функционала не требуется:
1. От 3 до 5 активных новостей (остальные - прокруткой или по нажатию кнопок/ссылок и т.д.).
2. Смена новостей при использовании кнопок ГОД или МЕСЯЦ (на данный момент кнопка ГОД не нужна).
3. Открытие полной версии новости на новой странице сайта по нажатию ссылки (например, слово "Подробнее") или новостного блока (желательно наименование страниц по дате новости, в случае совпадения дат новостей - возможность переименования страниц).
4. Реализация афиши - любая (возможна прокрутка или что-то другое).
 
Если реализация задуманного возможна, то каким образом?
Всего записей: 657 | Зарегистр. 27-01-2008 | Отправлено: 10:36 29-09-2017 | Исправлено: Alexey87, 10:37 29-09-2017
Mavrikii

Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Alexey87
новости откуда брать то будете?  
а так - html + css + javascript
Всего записей: 15108 | Зарегистр. 20-09-2014 | Отправлено: 21:12 29-09-2017
Alexey87

Advanced Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
новости откуда брать то будете?

каждая новость будет формироваться на отдельной странице
 

Цитата:
html + css + javascript

пример посмотреть можно?
Всего записей: 657 | Зарегистр. 27-01-2008 | Отправлено: 20:44 05-10-2017
Mavrikii

Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Alexey87

Цитата:
каждая новость будет формироваться на отдельной странице  

речь не о том. список же как то нужно генерить, предположим, что у вас есть все в вашей базе.
 

Цитата:
пример посмотреть можно?

под конкретный дизайн - нет, ибо это займет время. а слайдеров (вернее тикеры) полно.
http://jquery-plugins.net/responsive-jquery-news-ticker-plugin-with-bootstrap
https://www.aakashweb.com/jquery-plugins/easy-ticker/
к любому вертикальному тикеру приделать кнопки и все, по сути
 
ps: ну раз не поняли, вот накидал простейший тикер - https://jsfiddle.net/3mga690y/
Всего записей: 15108 | Зарегистр. 20-09-2014 | Отправлено: 21:00 05-10-2017 | Исправлено: Mavrikii, 22:23 05-10-2017
Alexey87

Advanced Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
список же как то нужно генерить

в моём представлении это выглядит так:
каждая новость формируется на отдельной странице, а её отображение в списке - из одной фотографии и первого предложения/абзаца полной версии новости (т.е. из новости на отдельной странице)
Всего записей: 657 | Зарегистр. 27-01-2008 | Отправлено: 11:11 07-10-2017
Mavrikii

Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Alexey87

Цитата:
в моём представлении это выглядит так

Я все это понимаю. Картинка в тикере и ссылка, ведущая на полную новость, это уже мелочи.
Всего записей: 15108 | Зарегистр. 20-09-2014 | Отправлено: 20:38 07-10-2017
Alexey87

Advanced Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii, а как бы использовать Ваш код для таблицы?
Всего записей: 657 | Зарегистр. 27-01-2008 | Отправлено: 18:03 08-10-2017
Mavrikii

Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Alexey87
Какой таблицы?
Всего записей: 15108 | Зарегистр. 20-09-2014 | Отправлено: 19:03 08-10-2017
Alexey87

Advanced Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
Какой таблицы?

вместо списка
например:
<table>
<tr><td>дата</td><td>картинка</td><td>описание</td></tr>
<tr><td>дата</td><td>картинка</td><td>описание</td></tr>
<tr><td>дата</td><td>картинка</td><td>описание</td></tr>
и т.д.
</table>
Всего записей: 657 | Зарегистр. 27-01-2008 | Отправлено: 20:48 08-10-2017
Mavrikii

Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Alexey87

Цитата:
вместо списка  

не нужно использовать таблицы там, где в них нет необходимости.
все это реализуется через дивы и css
https://jsfiddle.net/3mga690y/1/
можно обойтись и без списка. аналогично можно сделать и с таблицей, но я старательно избегаю ее использование.
http://htmlbook.ru/content/preimushchestva-i-nedostatki-tablits
Всего записей: 15108 | Зарегистр. 20-09-2014 | Отправлено: 21:07 08-10-2017
Alexey87

Advanced Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii, а как для последнего кода сделать следующее:
- вертикальное и горизонтальное выравнивание даты и картинки по середине относительно соседних элементов списка;
- для описания: вертикальное выравнивание по середине, а горизонтальное - по левому краю или по ширине
 
для таблиц есть align и valign...
Всего записей: 657 | Зарегистр. 27-01-2008 | Отправлено: 22:10 08-10-2017
Mavrikii

Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Alexey87
ну хотите делать таблицами, сделайте по таблице внутри li элемента.
можно и целиком строками tr в таблице манипулировать, вместо li, но.. я писал уже выше.
но дело в том, что даже div можно заставить себя вести как таблицу, без лишних элементов разметки: https://jsfiddle.net/3mga690y/3/
 
ps: там есть небольшой баг, если очень быстро жать на кнопки, но легко исправляется, к примеру так - https://jsfiddle.net/3mga690y/4/
Всего записей: 15108 | Зарегистр. 20-09-2014 | Отправлено: 22:32 08-10-2017 | Исправлено: Mavrikii, 04:52 09-10-2017
Alexey87

Advanced Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii, каким образом переписать последний код на чистом JS без использования других FRAMEWORKS & EXTENSIONS?
Всего записей: 657 | Зарегистр. 27-01-2008 | Отправлено: 20:38 09-10-2017
Mavrikii

Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Alexey87

Цитата:
каким образом переписать последний код на чистом JS

изучить что делает каждая использованная функция и записать ее аналогом на чистом js.
вот этого я делать точно не буду, дабы не возиться с анимацией (хотя ее можно сделать на чистом CSS3, но я и так уже много вам подсказал)
+ http://youmightnotneedjquery.com/
Всего записей: 15108 | Зарегистр. 20-09-2014 | Отправлено: 20:42 09-10-2017
Alexey87

Advanced Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Всё ещё нуждаюсь в решении вопроса (в новой трактовке).
Всего записей: 657 | Зарегистр. 27-01-2008 | Отправлено: 20:43 13-10-2017 | Исправлено: Alexey87, 21:55 20-10-2017
WONDROUS



Silver Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Насколько или как может повлиять скажем так лишний код в html? На работу страницы он вроде бы не влияет, просто есть. CSS, на который этот "лишний" код ссылается не активен.
Всего записей: 3347 | Зарегистр. 30-06-2002 | Отправлено: 23:23 04-03-2019
Mavrikii

Platinum Member		Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
скажем так лишний код в html

что значит "лишний"? если выставить ему display: none, то он есть на странице, но никак не отображается и не реагирует на клики и остальное - это "лишний" код?
Всего записей: 15108 | Зарегистр. 20-09-2014 | Отправлено: 23:28 04-03-2019
Открыть новую тему     Написать ответ в эту тему

Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

Компьютерный форум Ru.Board » Интернет » Web-программирование » Помощь HTML


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru