Нужно расположить несколько <p> элементов на некотором расстоянии друг от друга.
Пытался сделать через класс:
.info{height:30px;width:200px;position:relative;top:20px;}
не получается,отступ появляется только у самого верхнего элемента.
Если postion absolute,то все соответственно сливается в одну точку.
На margin даже и не надеялся, попробовал,толку конечно же 0.
Возможно ли вообще через класс отступ от предыдущего элемента задать?Или к каждому через absolute свой top прописывать?
_____________
Чем больше круг знаний - тем больше длина окружности соприкосновения с областью неизвестного - тем больше степень моего незнания.
Лёгкость принятия решений и громкость слов (или число нулей ожидаемой прибыли) свойство окружностей сверхмалого диаметра, стремящихся к точке - к точке зрения.
Полная Версия: Отступ элементов по классу.
Larik Честно не совсем понял что вы хотите, насколько я понял вы хотите сделать несколько блоков с отступом, ну во первых никогда не давайте блокам фиксированную высоту а во вторых позиционирование для олухов.
Воспользуйтесь флотами и маржинами, все должно работать нормально. Margin-top: 20px.
Воспользуйтесь флотами и маржинами, все должно работать нормально. Margin-top: 20px.
| Цитата (sz47181 @ 17.10.2014 - 22:14) |
| а во вторых позиционирование для олухов |
Слишком громкое утверждение, чтобы быть правдой
Любые категоричные утверждения такого типа никогда не бывают верными.В данном случае да, не нужно позиционирование. Достаточно маржинги прописать. Но это не значит, что его нельзя применять. Можно. Иногда даже нужно! Только с пониманием.
| Цитата (Larik @ 17.10.2014 - 21:51) |
| На margin даже и не надеялся, попробовал,толку конечно же 0. |
Интересно, почему ты "не надеялся" на то, что здесь как раз и нужно применять? Покажи свои стили с маржингами.
_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL
* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.
* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)
Хм,проблему решил,поставив отрицательный маржин.
Но очень странно,если менять margin от 0 до 15 px разницы нету.
.profileinfo{position:relative;margin-top:15px;height:30px;width:200px;background-color:778899;font-size:15;font-weight:bold;color:FFFFFF;font-family:monospace;text-inde nt:10px;}
<div id="profile">
<p class="profileinfo">Город<p/>
<p class="profileinfo">Возраст<p/>
<p class="profileinfo">День рождения<p/>
<p class="profileinfo">VK<p/>
<p class="profileinfo">Instagram<p/>
<p class="profileinfo">Twitter<p/>
</div>
_____________
Чем больше круг знаний - тем больше длина окружности соприкосновения с областью неизвестного - тем больше степень моего незнания.
Лёгкость принятия решений и громкость слов (или число нулей ожидаемой прибыли) свойство окружностей сверхмалого диаметра, стремящихся к точке - к точке зрения.
Но очень странно,если менять margin от 0 до 15 px разницы нету.
.profileinfo{position:relative;margin-top:15px;height:30px;width:200px;background-color:778899;font-size:15;font-weight:bold;color:FFFFFF;font-family:monospace;text-inde nt:10px;}
<div id="profile">
<p class="profileinfo">Город<p/>
<p class="profileinfo">Возраст<p/>
<p class="profileinfo">День рождения<p/>
<p class="profileinfo">VK<p/>
<p class="profileinfo">Instagram<p/>
<p class="profileinfo">Twitter<p/>
</div>
_____________
Чем больше круг знаний - тем больше длина окружности соприкосновения с областью неизвестного - тем больше степень моего незнания.
Лёгкость принятия решений и громкость слов (или число нулей ожидаемой прибыли) свойство окружностей сверхмалого диаметра, стремящихся к точке - к точке зрения.
sergeiss Ну я именно про данный случай писал, позиционирование очень редко нужно, даже в очень сложных проектах можно обойти его.
Очень часто вижу что используют позиционирование для выравнивания иконок, честно и сам использовал данный метод раньше а сейчас отказался.
Очень часто вижу что используют позиционирование для выравнивания иконок, честно и сам использовал данный метод раньше а сейчас отказался.
| Цитата (sz47181 @ 17.10.2014 - 22:14) |
| Larik Честно не совсем понял что вы хотите, насколько я понял вы хотите сделать несколько блоков с отступом, ну во первых никогда не давайте блокам фиксированную высоту а во вторых позиционирование для олухов. Воспользуйтесь флотами и маржинами, все должно работать нормально. Margin-top: 20px. |
Если про высоту в px,то я ее потом на проценты поменяю все рассчитав,мне так удобней позиционировать:)
_____________
Чем больше круг знаний - тем больше длина окружности соприкосновения с областью неизвестного - тем больше степень моего незнания.
Лёгкость принятия решений и громкость слов (или число нулей ожидаемой прибыли) свойство окружностей сверхмалого диаметра, стремящихся к точке - к точке зрения.
Larik Семантический неправильно используете параграф, и уберите позиционирование а то глаза режет
Высоту не надо никогда указывать.
Высоту не надо никогда указывать.
Larik, зачем тебе тут "position:relative"?
И кстати, ты можешь упростить код
1. Убери 'class="profileinfo"' из HTML.
2. В CSS вместо ".profileinfo" напиши "#profile p", т.е. стили для абзацев, расположенных внутри элемента с id, равным profile.
Почему у тебя "не работают" маржинги от 0 до 15... Не знаю. Опять же, показывай те стили, которые не работают.
И кстати, ты можешь упростить код
1. Убери 'class="profileinfo"' из HTML.
2. В CSS вместо ".profileinfo" напиши "#profile p", т.е. стили для абзацев, расположенных внутри элемента с id, равным profile.
Почему у тебя "не работают" маржинги от 0 до 15... Не знаю. Опять же, показывай те стили, которые не работают.
| Цитата (sz47181 @ 17.10.2014 - 22:56) |
| Высоту не надо никогда указывать. |
Опять же, некорректное утверждение. Ты не знаешь, что там за дизайн запланирован. Вполне возможно, что в дизайне эти элементы имеют определенную высоту.
| Цитата (sz47181 @ 17.10.2014 - 22:54) |
| позиционирование очень редко нужно, |
Представь, что нужно сделать множество ДИВов, каждый из которых имеет сложную структуру. Причем, каких-то внутренних частей в ДИВах может не быть. Без абсолютного позиционирования внутри ДИВов ты не сделаешь так, чтобы все элементы были на своих местах, вне зависимости от наличия других элементов.
_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL
* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.
* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)
sergeiss Я как раз все правильно говорю, правила современной веб-разработки гласят что добавление контента не должно ломать верстку.
Представьте что сидит девушка контент-менеджер ничего не понимающая в верстке и добавляет что нибудь
Если попался безграмотный дизайнер то всегда есть min-height.
Представьте что сидит девушка контент-менеджер ничего не понимающая в верстке и добавляет что нибудь
Если попался безграмотный дизайнер то всегда есть min-height.
| Цитата (sz47181 @ 17.10.2014 - 23:02) |
| Я как раз все правильно говорю |
Про то, что "высоту никогда не надо указывать"?????
_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL
* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.
* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)
| Цитата (sergeiss @ 17.10.2014 - 22:59) |
| Представь, что нужно сделать множество ДИВов, каждый из которых имеет сложную структуру. Причем, каких-то внутренних частей в ДИВах может не быть. Без абсолютного позиционирования внутри ДИВов ты не сделаешь так, чтобы все элементы были на своих местах, вне зависимости от наличия других элементов. |
Верстал очень сложные вещи и пока не встречался чтобы нужно было, но все может быть.
sergeiss Да про высоту, вроде везде сейчас предупреждают никогда не ловить высоту.
#profile > * + * {
margin-top: 15px;
}
с обнулением дефолтного марджина для p:
#profile > * + * {
margin: 15px 0 0;
}
_____________
Профессиональная разработка на заказ
Я на GitHub | второй профиль
html>
<style>
.profileinfo{margin-top:15px;height:30px;width:200px;background-color:778899;font-size:15;font-weight:bold;color:FFFFFF;font-family:monospace;text-indent:10px;}
</style>
<body>
<div id="profile">
<p class="profileinfo">Город<p/>
<p class="profileinfo">Возраст<p/>
<p class="profileinfo">День рождения<p/>
<p class="profileinfo">VK<p/>
<p class="profileinfo">Instagram<p/>
<p class="profileinfo">Twitter<p/>
</div>
</body>
</html>
Вот готовый html,попробуй сам поменять:) У меня Chrome 38.0.2125.101 m если что.
За #profile спасибо:)
На счет высоты,в данном случае я для заливки указывал.
_____________
Чем больше круг знаний - тем больше длина окружности соприкосновения с областью неизвестного - тем больше степень моего незнания.
Лёгкость принятия решений и громкость слов (или число нулей ожидаемой прибыли) свойство окружностей сверхмалого диаметра, стремящихся к точке - к точке зрения.
и вообще это делается через ul > li по феншую в данном случае, а то и dl > dt, dd
_____________
Профессиональная разработка на заказ
Я на GitHub | второй профиль
_____________
Профессиональная разработка на заказ
Я на GitHub | второй профиль
Здесь расположена полная версия этой страницы.