Помощник
|
Как уменньшить ширину аудиоплеера на HTML5 |
master-vek
|
Сообщение
#1
|
||
|
|
||
|
|||
master-vek
|
Сообщение
#2
|
|
Проблему решил, тему желательно удалить в связи с не актуальностью. Спасибо.
|
|
|
BLIK |
31.10.2017, 23:06;
Ответить: BLIK
Сообщение
#3
|
|
|
|
|
master-vek
|
Сообщение
#4
|
|
Поясню. Дело в том, что во всех браузерах отображение плеера выглядит по разному. Просто подобрал отступ, который удовлетворяет два основных браузера, конечно выравнивание приблизительное. Можно раздвинуть ширину страницы немного, лишь бы плеера стали в ряд по горизонту. Потом они съезжают под низ при адаптации.
Главное, изначально выстроить в ряд по горизонту. Вот результат на странице: https://servis.kharkov.ua/ В Мозилле отступы мне не нравятся, а в Гугле пойдёт. Придётся поискать как подстроить боковые отступы. Ауто и % не получается. |
|
|
ShowPrint |
1.11.2017, 12:26;
Ответить: ShowPrint
Сообщение
#5
|
|
master-vek, заглянул в код ваших плееров, заодно и всего сайта.
Я бы блок плееров сверстал в виде списка, в виде:
При этом просто css-стилями можно обеспечить и адаптивность, и кроссбраузерность, и даже убрать часть картинки с плеера кнопку со значком "СКАЧАТЬ" Попробуйте разобраться. Если не получится, то как у меня будет немного свободного времени (сейчас запара) попробую набросать кусочек кода в песочнице... И по коду в целом... 1. У вас творится некоторая "вакханалия" с заголовками: h1-h5-h3-h2 - такой порядок не обеспечивает ожидаемой от них пользы, так как идёт вразрез с тем назначением для которого они были созданы. 2. В продолжение темы заголовков мне абсолютно не понятен смысл конструкции
Заголовок в который обёрнута только картинка является абсолютно лишним и неоправданным 3. Абсолютно точно, на 200%, вы очень сильно переборщили с количеством тегов <strong> 4. Выделите отдельным цветом/стилями внутренние ссылки - о том что между картинками вверху находятся 4 ссылки догадаться может только экстрасенс. 5. Попробуйте поменять в своём сознании понимание блочной вёрстки. Понимаю что это происходит не сразу - сам это проходил. Переход с табличной на блочную вёрстку это не просто замена tr/td на div, скорее это принципиально иное формирование структуры всего кода в целом. То есть просто другой подход. Схематично, для Вашего кода, при блочной вёрстке более уместна конструкция в следующем виде:
Более активно используйте вложенность, нет необходимости в целом ряде открытия/закрытия "горизонтальных" областей:
Безумно глубокой вложенность конечно не стоит делать, но именно когда начинаешь правильно использовать вложенность при блочной вёрстке начинаешь испытывать кайф о её применения. Именно в этот момент приходит понимание того, что табличная вёрстка - прошлый век. Сам через это прошёл :) ЗЫ. Прошу воспринять не как "критику", а как "подсказку" - каждый |
|
|
master-vek
|
Сообщение
#6
|
|
ShowPrint,
Все ваши рекомендации очень интересны и несут пользу этой страничке. Моя недоработка связана с тем, что я самоучка и кроме того давненько не занимался этой тематикой. А тут под вашим влиянием в комментариях пришлось волей неволей вникнуть в простейшую адаптивность. У меня 2 года сайт на WORDPRESS и я забросил вёрстку на HTML и CSS. Про вложенность буду потихоньку исправляться. Ваш пример и пояснения как пендель для дальнейшей работы. Благодарен за доходчивое аргументирование и примеры. У меня ещё должны быть странички аналогичные этой, так что тренировка неизбежна. Как наработаю по вашим критериям, доложу на Ваш разбор. По всем вашим пунктам проведу на странице корректировку. Но, с тегом <strong> что то не знаю. как же мне показать посетителю ключевые слова. Ведь, человек не будет читать про все модели, ему нужна конкретная модель или неисправность. Вот здесь прошу подробнее. В целом спасибо, сейчас скопирую весь ваш текст и за работу. |
|
|
ShowPrint |
1.11.2017, 13:33;
Ответить: ShowPrint
Сообщение
#7
|
|
master-vek, я тоже самоучка - книжки, справочники и личный опыт.
Как пример вёрстки аудиоплееров посредством списка можете посмотреть (и проверить адаптивность) у меня здесь, с той только разницей что вместо audio у меня video =) Вот здесь прошу подробнее. Помимо тега "стронг" есть ещё тег <b>, правда его обильное использование я также не стал бы рекомендовать. Почитайте про оба и поймите разницу. Можно загуглить например "разница между strong и b в html" В целом есть два варианта решения: Первый, на мой взгляд более правильный, отойти от "простыни" и сделать отдельные страницы по конкретным моделям/неисправностям и упор сделать на грамотную навигацию для того чтоб пользователь мог удобно найти то, что ему нужно. Второй, более простой, оставляя "многабукафф" на одной странице: вместо strong ( или b) для выделения использовать тег span с определенными стилями. Например:
|
|
|
master-vek
|
Сообщение
#8
|
|
Рассматривал ваш сайт с большим интересом. Если думать, что это сделано на базе самостоятельной подготовки, то это предел возможностей в моём понимании..
Функционал очень высок. Придётся скопировать, с вашего разрешения, часть кода применительно CSS по видео. Особенно понравилась строка <video controls width='98%' poster='/video/small/BrotherEmbroidery.jpg' preload='none' id='video'> Если я поменяю видео на аудио 98%. Относительно жирности текста буду углубленно изучать. По <span> интересно - попробую. Делать много страничник не в планах. Соберу разные страницы по тематике воедино. Спасибо за конкретные примеры. |
|
|
ShowPrint |
1.11.2017, 21:22;
Ответить: ShowPrint
Сообщение
#9
|
|
это сделано на базе самостоятельной подготовки Так и естьэто предел возможностей А это ошибка - благодаря подсказкам профи я надолго обеспечен работой по улучшению и модернизации. До совершенства ещё ох как далеко.Придётся скопировать, с вашего разрешения, часть кода На здоровье, если бы прятал - не давал бы ссылкуЕсли будете делать вывод аудио плееров через список, то можно подобрать такую ширину элементов списка, чтоб кнопка "скачать" выходила за её пределы. Соответственно если этим элементам списка присвоить css-свойство overflow-x:hidden, то кнопки скачать не будет видно ;) |
|
|
master-vek
|
Сообщение
#10
|
|
Спасибо на добром слове и совете. Учту обязательно.
|
|
|
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Большие ставки для кликов в Я.Директ. Как удешевить? | 2 | rownong27 | 1122 | 26.3.2024, 14:13 автор: knezevolk |
|
Как вы бросили работу и перешли на заработок с сайтов? | 12 | uahomka | 2292 | 25.3.2024, 6:52 автор: Skyworker |
|
Как отозвать банковский платеж фрилансеру? | 28 | metvekot | 3920 | 25.3.2024, 6:34 автор: Skyworker |
|
Как вывести деньги в Украине с заблокированного Юмани ? | 23 | freeax | 3644 | 24.3.2024, 20:55 автор: Liudmila |
|
Через какой браузер и как можно найти в кэшэ браузера видео | 10 | Room | 1939 | 23.3.2024, 7:41 автор: Room |
Текстовая версия | Сейчас: 29.3.2024, 9:08 |