Этот баннер — требование Роскомнадзора для исполнения 152 ФЗ.
«На сайте осуществляется обработка файлов cookie, необходимых для работы сайта, а также для анализа использования сайта и улучшения предоставляемых сервисов с использованием метрической программы Яндекс.Метрика. Продолжая использовать сайт, вы даёте согласие с использованием данных технологий».
Политика конфиденциальности
|
|
|
Верстка необычного заголовка блока
|
|||
|---|---|---|---|
|
#18+
Всем привет. Есть заголовок блока, который представляет собой иконку и текст, справа от нее. Что-то типа того: Код: html 1. 2. 3. 4. Задача: сверстать таким образом, чтобы при длинном тексте (в 2 и более строки), вторая строка оказывалась не под иконкой, а также, как и первая строка справа от нее. Т.е. все строки должны выравниваться по левой границе относительно первой строки. И весь этот текстовый блок должен быть справа от иконки. Как это сделать таблицами я знаю. А как слоями? Подскажите плиз, никак не получается. Заранее спасибо! ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 31.10.2016, 12:28 |
|
||
|
Верстка необычного заголовка блока
|
|||
|---|---|---|---|
|
#18+
urukhay, http://webcodius.ru/spravochnik-css/kak-sdelat-bukvicu-na-html-stranice-pri-pomoshhi-css.html ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 31.10.2016, 12:45 |
|
||
|
Верстка необычного заголовка блока
|
|||
|---|---|---|---|
|
#18+
urukhay , ширина той "иконки" какая? ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 31.10.2016, 14:09 |
|
||
|
Верстка необычного заголовка блока
|
|||
|---|---|---|---|
|
#18+
Ну 30*30, к примеру. Небольшая. Возможно, я задаю глупые вопросы. Возможно - это азы. Всю жизнь верстал таблицами. Пытаюсь перейти на дивы - тяжело идет. Пока, лично для себя, никаких преимуществ дивов не вижу - один сплошной геморрой. Может руки не оттуда растут? )) Хз, при верстке таблицами вроде оттуда расли )) ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 31.10.2016, 14:46 |
|
||
|
Верстка необычного заголовка блока
|
|||
|---|---|---|---|
|
#18+
Вадя, там должна быть именно иконка, а не буквица! ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 31.10.2016, 14:46 |
|
||
|
Верстка необычного заголовка блока
|
|||
|---|---|---|---|
|
#18+
urukhay, а выложите готовый пример, где сверстано таблицами. ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 31.10.2016, 15:41 |
|
||
|
Верстка необычного заголовка блока
|
|||
|---|---|---|---|
|
#18+
urukhay, Ну если тебе заголовок (header) только нужно - оставь себе таблицу.... ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 31.10.2016, 15:41 |
|
||
|
Верстка необычного заголовка блока
|
|||
|---|---|---|---|
|
#18+
urukhayНу 30*30, к примеру. Т.е. фиксированная? Код: html 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. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 31.10.2016, 15:51 |
|
||
|
Верстка необычного заголовка блока
|
|||
|---|---|---|---|
|
#18+
urukhayВадя, там должна быть именно иконка, а не буквица! чукча писатель? просмотреть всё не умеет? ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 31.10.2016, 16:07 |
|
||
|
Верстка необычного заголовка блока
|
|||
|---|---|---|---|
|
#18+
krvsa, спасибо! У меня также было, за исключением одного: у .title тоже float: left стоял. Видимо, в этом причина была! user89, лови: Код: html 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. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. В общем, прихожу к выводу, что когда речь идет о каком-то выравнивании, проще использовать таблицы. Хотя, опыта верстки дивами мало, но пока создается такое впечатление. Буду пробовать смешанную верстку, в принципе таблицы никто не отменял. Жаль только, что из стандартов w3c убрали довольно полезные атрибуты align, valign и им подобные. Без них табличная верстка стала тяжелее. Всем спасибо за помощь! ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 31.10.2016, 22:15 |
|
||
|
Верстка необычного заголовка блока
|
|||
|---|---|---|---|
|
#18+
urukhayВ общем, прихожу к выводу, что когда речь идет о каком-то выравнивании, проще использовать таблицы. Хотя, опыта верстки дивами мало, но пока создается такое впечатление. Буду пробовать смешанную верстку, в принципе таблицы никто не отменял. Жаль только, что из стандартов w3c убрали довольно полезные атрибуты align, valign и им подобные. Без них табличная верстка стала тяжелее. Всем спасибо за помощь! Смешанной вёрсткой и надо делать. Там где нужна таблица не следует дивы пихать. Но только там, где таблица будет семантически правильной, а не там, где надо элементы выровнять по ширине :) Насчёт align и valign... Не помню что бы align и valign кто-то отменял для текста в css (может ошибаюсь... если да, киньте ссылку пожалуйста, если кому не лень, когда отменили и что предложили взамен). Зато теперь появилось очень полезное display: flex... Ждём пока браузеры поправят все несоответствия спецификации и начинает юзать по полной :) (когда последний раз смотрел у IE ещё много чего было отмечено жёлтым в том числе "многострочность" этого свойства и у андроида тоже что-то не так вроде было. Может сейчас уже поправили... больше трёх месяцев верстать не приходилось уже) Пока пользовал только частично: для распределения нескольких элементов в одной строке с одинаковыми зазорами между ними (space-between), центрирования нескольких элементов и равномерного распределения по ширине (space-around). Но возможностей там в разы больше! ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 31.10.2016, 23:46 |
|
||
|
Верстка необычного заголовка блока
|
|||
|---|---|---|---|
|
#18+
Програмёр , я имел в виду html атрибуты align и valign, а не css-свойства. CSS-свойств, кстати, таких нет, есть text-align и vertical-align )) А верстка с этими атрибутами пока работает, но валидатор выдает ошибки, что атрибуты устарели. Вот ссылки: align и valign Flex - крутая штука. Правда мне пока приходилось работать только с justify-content: center. Но оно работает во всех последних версиях браузеров CH, FF, O, IE (в виндовом сафари - нет). В мобильных браузерах android и ios тоже работает. За помощь всем большое спасибо! ) ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 01.11.2016, 03:29 |
|
||
|
Верстка необычного заголовка блока
|
|||
|---|---|---|---|
|
#18+
urukhay, хм... Да, ошибся я :) Извините. Давно вёрсткой не занимался, подзабыл некоторые моменты, да и усталость сказывается (почему-то align и valign как свойства css вспомнились :) ) ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 01.11.2016, 05:50 |
|
||
|
Верстка необычного заголовка блока
|
|||
|---|---|---|---|
|
#18+
urukhayЖаль только, что из стандартов w3c убрали довольно полезные атрибуты align, valign и им подобные. Для отображения ЦСС. ;) ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 01.11.2016, 08:26 |
|
||
|
|

start [/forum/topic.php?fid=22&gotonew=1&tid=1444932]: |
0ms |
get settings: |
8ms |
get forum list: |
13ms |
check forum access: |
3ms |
check topic access: |
3ms |
track hit: |
165ms |
get topic data: |
12ms |
get first new msg: |
7ms |
get forum data: |
2ms |
get page messages: |
61ms |
get tp. blocked users: |
1ms |
| others: | 301ms |
| total: | 576ms |

| 0 / 0 |
