Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Элементы в строку. DIV или UL / 11 сообщений из 11, страница 1 из 1
22.08.2016, 13:01
    #39295466
urukhay
urukhay
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Элементы в строку. DIV или UL
Всем привет!

Есть задача расположить в строчку, к примеру , 3 элемента меню.
Эту задачу можно решить как с помощью div, так и с помощью ul:

Код: html
1.
2.
3.
4.
5.
<div class="inline-div">
    <div>О компании</div>
    <div>Услуги</div>
    <div>Контакты</div>
</div>


Код: css
1.
2.
3.
.inline-div { display: table; }
.inline-div div { float: left; margin-right: 20px; }
.inline-div:last-child { margin-right: 0; }



или

Код: html
1.
2.
3.
4.
5.
<ul class="inline-list">
    <li>О компании</li>
    <li>Услуги</li>
    <li>Контакты</li>
</ul>


Код: css
1.
2.
3.
.inline-list { display: table; list-style: none; }
.inline-list li { float: left; margin-right: 20px; }
.inline-list:last-child { margin-right: 0; }



Как обычно, и у того и у другого способа, наверное, есть свои плюсы и минусы.
Подводные и надводные камни. Хотелось бы узнать, какой способ предпочтительнее?
Естественно, это будет использоваться не только на таких тривиальных задачах.
Будет что-то более сложное, но смысл один: расположение каких-то элементов в строку.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.08.2016, 13:20
    #39295485
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Элементы в строку. DIV или UL
urukhayХотелось бы узнать, какой способ предпочтительнее?
Есть некое понятие " семантическая верстка " и есть мнение, что имеет смысл придерживаться ее основ.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.08.2016, 13:52
    #39295529
urukhay
urukhay
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Элементы в строку. DIV или UL
Спасибо за статью.
Но большая часть информации в ней мне знакома.

Ответ на мой вопрос в случае с меню я получил.
Но это совсем простой пример.
А как быть в случае вложенных списков?
В статье советуется по возможности минимизировать число div на странице.
Значит ли это, что предпочтительнее использовать ul вместо div, когда есть возможность?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.08.2016, 14:04
    #39295543
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Элементы в строку. DIV или UL
urukhayВ статье советуется по возможности минимизировать число div на странице.
На данный момент достаточно много элементов для разного рода информации...
urukhayЗначит ли это, что предпочтительнее использовать ul вместо div, когда есть возможность?
Если это какой-то явный список - почему бы его не оформить как список!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.08.2016, 14:05
    #39295544
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Элементы в строку. DIV или UL
urukhayА как быть в случае вложенных списков?
Таки оформить как вложенные списки... ;)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.08.2016, 14:33
    #39295565
urukhay
urukhay
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Элементы в строку. DIV или UL
авторЕсли это какой-то явный список - почему бы его не оформить как список!
Так в том-то и дело, что это может быть не явный список.
Взять, опять же, банальный пример: слева - картинка, справа от нее - текст.
Можно и дивами, и списком.
Вот у меня вопросы вызывают как раз, такие неявные ситуации.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.08.2016, 15:02
    #39295583
urukhay
urukhay
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Элементы в строку. DIV или UL
А можно еще пару вопросов по статье?
1. Там рекомендуется текст размещать не в div, а в p. А у меня как-то исторически сложилось размещение текста в span.
Это нормально или в данном случае, аналогично div, и не рекомендуется?
2. В статье сказано для небольших изображений не использовать img в html, а выносить в css. Насколько я понимаю, это класть изображение бэкграундом. Ок, но как тогда быть при масштабируемости (под различные разрешения). С размером такого изображения ничего нельзя будет сделать (бэкграунды не имеют размеров, они кладутся, "как есть").
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.08.2016, 15:29
    #39295612
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Элементы в строку. DIV или UL
urukhayТак в том-то и дело, что это может быть не явный список.
Взять, опять же, банальный пример: слева - картинка, справа от нее - текст.
Можно и дивами, и списком.
Если текст относится к картинке... Таких "пар" на странице несколько... Они следуют "друг за другом" - думаю, что это таки список.
Список картинок с пояснительным текстом.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.08.2016, 15:38
    #39295622
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Элементы в строку. DIV или UL
urukhayА можно еще пару вопросов по статье?
Всегда нужно понимать, что статья это всего лишь статья... Практически "мнение автора". Или его понимание некой проблемы. ;)

urukhay1. Там рекомендуется текст размещать не в div, а в p. А у меня как-то исторически сложилось размещение текста в span.
Это нормально или в данном случае, аналогично div, и не рекомендуется?
span строчный элемент...
Его назначение
htmlbook.ruвыделить часть информации внутри других тегов
http://htmlbook.ru/html/span
С текстом у меня подход аналогичен работе в Ворде... Весь текст разбивается на абзацы. Потом с ними можно выполнять другие манипуляции.

urukhay2. В статье сказано для небольших изображений не использовать img в html, а выносить в css. Насколько я понимаю, это класть изображение бэкграундом. Ок, но как тогда быть при масштабируемости (под различные разрешения). С размером такого изображения ничего нельзя будет сделать (бэкграунды не имеют размеров, они кладутся, "как есть").
По изображениям не все так просто...
Ранее вообще рассматривали варианты когда пользователь вообще отключал картинки вовсе!
Сейчас наверное это отмерло...

Но смотря что ты собрался делать с теми картинками и насколько они малы.
Т.е. опять возвращаемся к поговорке "существует 100 способов как ободрать кошку"...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.08.2016, 15:43
    #39295628
urukhay
urukhay
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Элементы в строку. DIV или UL
Спасибо за ответы.
По поводу изображений - опустим этот вопрос ненадолго, т.к. чуть позже в отдельной ветке задам новый.
И там более подробно распишу.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.08.2016, 15:56
    #39295640
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Элементы в строку. DIV или UL
urukhayНасколько я понимаю, это класть изображение бэкграундом. Ок, но как тогда быть при масштабируемости (под различные разрешения). С размером такого изображения ничего нельзя будет сделать (бэкграунды не имеют размеров, они кладутся, "как есть").
И это давно уже не так... ;)
htmlbook.ru <проценты>
Задает размер фоновой картинки в процентах от ширины или высоты элемента.
http://htmlbook.ru/css/background-size
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Элементы в строку. DIV или UL / 11 сообщений из 11, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]