Покинул форум
Сообщений всего: 882
Дата рег-ции: Март 2010
Помог: 1 раз(а)
Подскажите, пожалуйста:
1. Как разместить два дива, имеющих каждый свою ширину, высоту, свои отступы(margin) на одной строке? А последующие элементы, чтобы располагались на другой строке? Можно конечно установить в дивах свойство display:table-cell и тогда они будут на одной строке, но тогда у них будет одинаковая высота и свойство margin не работает.
2. Нужно внутри дива разместить тег img. У дива должны быть поля(padding), а также, если картинка превышает заданные для неё max-height и max-width, то див должен спрятать выступающие части картинки. Кроме того нужно, чтобы выступающие части картинки прятались равномерно с каждой стороны, то есть, если картинка превышает максимальную ширину на 10 px, то слева она должна спрятаться на 5 px и справа тоже на 5 px. Первая сложность с которой я столкнулся это то, что если у дива задать вот эти свойства padding:10px;overflow:hidden, то если картинка превышает установленный предел ширины, то див её прячет, но!!! padding-righ внутри дива исчезает, его место занимает картинка.
Помоги, пожалуйста, заранее благодарю!
Реф
Отправлено: 27 Декабря, 2010 - 02:36:02
Частый гость
Покинул форум
Сообщений всего: 159
Дата рег-ции: Июль 2010 Откуда: Реутов, Россия
А вообще с CSSом у меня туго, думаю знающие предложат что-то поумнее.
-----
Pavelbeginner
Отправлено: 27 Декабря, 2010 - 02:56:55
Частый посетитель
Покинул форум
Сообщений всего: 882
Дата рег-ции: Март 2010
Помог: 1 раз(а)
За первое спасибо. На сколько я знаю в элемнтах, которые образуют блоки строкового уровня нельзя использовать элементы структурных блоков. Сейчас выяснил, что inline и inline-block это две разные вещи, спасибо. (Добавление)
По поводу второго вопроса, это в голову самому пришло, но уверен, что можно как-то через css нормально сделать. К тому же это не решает проблемы с тем, чтобы картинка выравнивалась по-центру, то есть, чтобы её усекающиеся части прятались равномерно со всех сторон. (Добавление)
И не могли бы своим языком рассказать на что влияет строка !doctype ? Гуглил, но не понял. На сколько я понял в каждом стандарте имеются свои теги, свой синтаксис. То есть например в версии xx.x1 атрибуты нужно писать в верхнем регистре, а в версии xx.x2 в нижнем. И вот если я не объявлю, что использую версию xx.x1, то браузер неправильно распарсит мой документ? В общем расскажите, пожалуйста, своими словами на что влияет это строка, для чего она нужна и какую лучше использовать. Очень хочу понять этот момент, заранее благодарю! (Добавление)
И ещё один последний момент. На строке нужно разместить див, справа от него текст. Внутри дива находится картинка. Если я укажу у дива свойство display:inline-block;, то одна полоса текста может разместиться справа от него, остальная часть текста размещается под дивом. А как сделать, чтобы этот див обтекал текст? свойство float:left; не предлагать, так как под текстом должен находиться ещё один див и если текста мало, а свойство float:left указано, то див под текстом заползает под див слева от картинки который. (Добавление)
И самый последний вопрос. Правильно ли я понимаю, что указание типа блока в свойстве display влияет на то какие свойства можно применять к блоку, а какие нет и то как он будет взаимодействовать с окружающими блоками?
Реф
Отправлено: 27 Декабря, 2010 - 04:52:38
Частый гость
Покинул форум
Сообщений всего: 159
Дата рег-ции: Июль 2010 Откуда: Реутов, Россия
Помог: 0 раз(а)
Pavelbeginner пишет:
К тому же это не решает проблемы с тем, чтобы картинка выравнивалась по-центру, то есть, чтобы её усекающиеся части прятались равномерно со всех сторон.
Не уверен что будет работать (так как на сколько я понял прописать width картинки в css не получится), но попробуй так:
В общем расскажите, пожалуйста, своими словами на что влияет это строка, для чего она нужна и какую лучше использовать. Очень хочу понять этот момент, заранее благодарю!
DOCTYPE предназначен для указания типа документа. Необходим, чтобы браузер "понимал", как следует интерпретировать текущую веб-страницу, поскольку существует несколько версий HTML, ещё имеется XHTML, похожий на HTML, но со своими особенностями. Чтобы браузер понял, согласно какому стандарту отображать страницу, необходимо в первой строке задавать DOCTYPE. Отсюда вытекает следующее: Не ты подстраиваешь DOCTYPE под браузер, а браузер подстраивается под указанный тобой DOCTYPE (в идеале).
Соответственно, необходимо знать все особенности выбранного Вами DOCTYPEа. Иначе выйдет, что заявленный Вами тип документа не подчиняется правилам документов того же типа. Например, Вы указали строгий (Strict) тип документа HTML 1.0, а значит обязаны контролировать, чтобы документ не содержал "устаревшие" или "не одобряемые" теги. Подробнее об особенностях каждого из типов можно найти в том же гугле.
Что лучше выбрать? Дело вкуса, опыта и здравого смысла.
Рекомендую обратить внимание на данную статью: http://www[dot]seo-copywrite[dot]ru/articles/16/
Pavelbeginner пишет:
И ещё один последний момент. На строке нужно разместить див, справа от него текст. Внутри дива находится картинка. Если я укажу у дива свойство display:inline-block;, то одна полоса текста может разместиться справа от него, остальная часть текста размещается под дивом. А как сделать, чтобы этот див обтекал текст? свойство float:left; не предлагать, так как под текстом должен находиться ещё один див и если текста мало, а свойство float:left указано, то див под текстом заползает под див слева от картинки который.
Сложновато в конце написал, но мне почему-то кажется, что float: left и clear: both тебе могут помочь.
Pavelbeginner пишет:
И самый последний вопрос. Правильно ли я понимаю, что указание типа блока в свойстве display влияет на то какие свойства можно применять к блоку, а какие нет и то как он будет взаимодействовать с окружающими блоками?
Даже больше скажу, многие свойства неявно влияют на другие. Например float, отличный от none, пораждает блочный элемент (display: block). Поэтому конструкции вида:
float: left;
display: inline;
не корректны, скажем так.
ПС: эээх... что-то захотелось вспомнить CSS, в своё время знал его весьма не плохо. А тут ещё этот CSS3...
-----
JustUserR
Отправлено: 27 Декабря, 2010 - 20:39:36
Активный участник
Покинул форум
Сообщений всего: 8715
Дата рег-ции: Июнь 2009
Помог: 17 раз(а)
Pavelbeginner пишет:
У дива должны быть поля(padding), а также, если картинка превышает заданные для неё max-height и max-width, то див должен спрятать выступающие части картинки
Решения предполагаемой вами задачи вкючает целевую информацию об отображаемом изображении на текущей инстнанции HTML-страницы - и для его коректного решения необходмо предварительное определение параметров изображения и обеспечения их включения в img-элемент - или использование управляющего JS-скрипта
-----
Pavelbeginner
Отправлено: 31 Декабря, 2010 - 05:01:46
Частый посетитель
Покинул форум
Сообщений всего: 882
Дата рег-ции: Март 2010
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<style>
</style>
</head>
<body>
<div style="border:1px red solid;width:139px;height:139px;float:left">
</div>
bla bla bla bla bla bla bla bla bla bla bla bla
<div style="border:1px blue solid;width:50px;height:50px;">
</div>
</body>
</html>
Почему inline элемент обтекает нормально, а элемент block не обтекает, а залазит на предыдущий див так, как-будто того и вовсе нету?
И я так понимаю свойство clear ничего не отменяет, оно просто запрещает, что с какого-то бока или с обоих находились другие элементы.
JustUserR
Отправлено: 02 Января, 2011 - 12:48:00
Активный участник
Покинул форум
Сообщений всего: 8715
Дата рег-ции: Июнь 2009
Помог: 17 раз(а)
Pavelbeginner пишет:
Почему inline элемент обтекает нормально, а элемент block не обтекает, а залазит на предыдущий див так, как-будто того и вовсе нету?
Возможной причиной осуществления отображения в перекрытием блочных элементов позиционируемых на основе float-параметров является выбор точки в контейнерной области на основе которой производится расчет их позиции - в частности блочное отображения предоставляет возможность статической точки последовательно расположенных блоков
-----
Pavelbeginner
Отправлено: 03 Января, 2011 - 02:07:07
Частый посетитель
Покинул форум
Сообщений всего: 882
Дата рег-ции: Март 2010
Помог: 1 раз(а)
Как осуществлять выбор точки в конкретной области на основе которой производится расчёт позиции элментов на основе float-параметров (Добавление)
Как сделать так, чтобы следующий див оказался под текстом bla bla bla
JustUserR
Отправлено: 03 Января, 2011 - 02:48:12
Активный участник
Покинул форум
Сообщений всего: 8715
Дата рег-ции: Июнь 2009
Помог: 17 раз(а)
Pavelbeginner пишет:
Как сделать так, чтобы следующий див оказался под текстом
В случае если используемая ширина и высота блоков является фиксированной в соответсвии с предполагаемым примером - то релизация задачи может быть достигнута посредством явного относительного позиционрования с фиксированными значениями
Все гости форума могут просматривать этот раздел. Только зарегистрированные пользователи могут создавать новые темы в этом разделе. Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
Главная
Помощь
Поиск
Пользователи
Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS (Модераторы: ALEN, armancho7777777)
Без описания
