Новости Joomla

0 Пользователей и 1 Гость просматривают эту тему.
  • 22 Ответов
  • 36678 Просмотров
*

zvi

  • Захожу иногда
  • 392
  • 4 / 0
 ^-^как выровнять по центру страницы блоки с float: left или display: inline-block
если страница или наружный блок резиновый?
нужен на  блоки с float: left предпочтение, это возможно?
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Float не нужен. Хотя возможно решение и с ним посредством отрицательных отступов. Но проще всего: width:100% + display:inline-block + text-align:center родителю.
*

zvi

  • Захожу иногда
  • 392
  • 4 / 0
Float не нужен. Хотя возможно решение и с ним посредством отрицательных отступов. Но проще всего: width:100% + display:inline-block + text-align:center родителю.
с float: left если блоки при внешнем динамическом (резиновом) блоке никак не получится?
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Получится. Оборачиваете отдельным дивом, сдвигаете ВПРАВО на 50%. Затем ваши блоки сдвигаете влево на 50%. Старый приём.
*

zvi

  • Захожу иногда
  • 392
  • 4 / 0
Float не нужен. Хотя возможно решение и с ним посредством отрицательных отступов. Но проще всего: width:100% + display:inline-block + text-align:center родителю.
то у меня есть блоки с display:inline-block фиксированные по размеру (ширине) мне нужно выровнять их на резиновой странице
*

zvi

  • Захожу иногда
  • 392
  • 4 / 0
Получится. Оборачиваете отдельным дивом, сдвигаете ВПРАВО на 50%. Затем ваши блоки сдвигаете влево на 50%. Старый приём.
каждый блок с float: left обернуть еще в div и дальше что? я не понял
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Вы определитесь, каким путём идте ^-^. Можно с float и без. Я бы без делал. Тогда достаточно указать выравнивание текста и ширину блока.
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
каждый блок с float: left обернуть еще в div и дальше что? я не понял
Не каждый, а все. Контейнер сделать. Он у вас будет выносить блоки за пределы родителя так, что встанет ровно посередине страницы, грубо говоря. А потом потомков обратно на половину ширины. И блоки будут посередине.
*

zvi

  • Захожу иногда
  • 392
  • 4 / 0
Не каждый, а все. Контейнер сделать. Он у вас будет выносить блоки за пределы родителя так, что встанет ровно посередине страницы, грубо говоря. А потом потомков обратно на половину ширины. И блоки будут посередине.
наружному и внутренними с float: left что присвоит
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Не понял вопроса. Присвоить отрицательные отступы.
*

zvi

  • Захожу иногда
  • 392
  • 4 / 0
Не понял вопроса. Присвоить отрицательные отступы.
буду побывать что то у меня не выходит репу добавлю за внимания спс
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
У вас тут вообще просто всё. Блоки ровно делят контейнер на части.



Код: html4strict
<body>
<p>Способ с инлайн-блоками</p>
<div class="cont" id="inln">
<div class="block"><div>первый</div></div>
<div class="block"><div>второй</div></div>
<div class="block"><div>третий</div></div>
</div>

<p>Способ с плавающими блоками</p>
<div class="cont" id="flt">
<div class="cont-wrap">
<div class="block"><div>первый</div></div>
<div class="block"><div>второй</div></div>
<div class="block"><div>третий</div></div>
</div>
</div>

</body>

Код: css
* {margin:0; padding:0}
body {padding:50px;}
.cont {background:#eee;}
#inln {word-spacing:-50px;}
.block {word-spacing:0; width:33.333%;}
#inln .block {display:inline-block;}
.block div {margin:10px; background:#fcc;}

#flt {overflow:hidden;}
#flt .block {float:left;}
*

zvi

  • Захожу иногда
  • 392
  • 4 / 0
У вас тут вообще просто всё. Блоки ровно делят контейнер на части.






Код: html4strict
<body>
<p>Способ с инлайн-блоками</p>
<div class="cont" id="inln">
<div class="block"><div>первый</div></div>
<div class="block"><div>второй</div></div>
<div class="block"><div>третий</div></div>
</div>

<p>Способ с плавающими блоками</p>
<div class="cont" id="flt">
<div class="cont-wrap">
<div class="block"><div>первый</div></div>
<div class="block"><div>второй</div></div>
<div class="block"><div>третий</div></div>
</div>
</div>

</body>

Код: css
* {margin:0; padding:0}
body {padding:50px;}
.cont {background:#eee;}
#inln {word-spacing:-50px;}
.block {word-spacing:0; width:33.333%;}
#inln .block {display:inline-block;}
.block div {margin:10px; background:#fcc;}

#flt {overflow:hidden;}
#flt .block {float:left;}

на практике что то не получилось не знаешь как справится с этими объявлениями div .asdo что бы по центру были при изменении страницы желательно с float: left  , на худой конец и с  display:inline-block пройдет вhttp://tandem.romnu.com.ua/ что бы были по центру как http://romnu.com.ua/
« Последнее редактирование: 17.06.2014, 12:44:04 от zvi »
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Нехило так намутили там. Вот так можно, например:

Спойлер
[свернуть]

Код: css
.adsmanager_table {word-spacing:-100px;}
.adsmanager_table_description {word-spacing:0; vertical-align:top; display:inline-block; width:33.333%;}
.adsmanager_table_description > div {width:auto; margin:5px; padding:5px;}
.adsmanager_table_description .btn-successs {margin:0;}
*

sportboy

  • Новичок
  • 5
  • 0 / 0
Вы определитесь, каким путём идте ^-^. Можно с float и без. Я бы без делал. Тогда достаточно указать выравнивание текста и ширину блока.

Здравствуйте, нашел Ваш форум. Очень нужен Ваш совет специалиста, как выровнять два блока по центру в моем случаи.
Изначально в шаблоне цена и вес выводятся в одну строку по разные стороны. Вот так: http://upload.akusherstvo.ru/image988193.jpg
Очень большое расстояние между ценой и весом.
Нужно, вывести цену и вес в одну строку по центру. Вот так: http://upload.akusherstvo.ru/image988194.jpg

НО, нужно решение, как это можно сделать с помощью только стилей CSS, без изменения кода html в файлах шаблона. (Потому как, если менять HTML, это придется делать это в десятках файлов: категории, поиск, и во все модулях, которые выводят товары, везде ковырять html).
Спасибо, очень буду признателен, если Вы подскажите, как это сделать?
Ссылка на страницу тут.
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Код: css
.product .weight {
    width:50%;
    text-indent:10px;
}
.product .price {
    width:50%;
    text-align:right;
}
.product .price > * {
    padding-right: 10px;
}

*

sportboy

  • Новичок
  • 5
  • 0 / 0

Спасибо, за Ваш совет, но получается не ровно по центру. Я много вариантов пробовал. Если указывать ширину 50% ровно не выходит. Так как размер контента в блоке с ценой больше, чем в блоке с весом. + цена может быть разная и разной длины.
« Последнее редактирование: 08.04.2016, 19:21:40 от sportboy »
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Вообще идеально ровно по-центру. Если вам нужно распределение, то это уже другое. Ща попробую намутить чего-нить.
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Код: css
.product .price,
.product .weight {
display:inline-block;
float:none;
padding:0 10px;
text-align:center;
}
.product .desc {
text-align:center;
}

*

sportboy

  • Новичок
  • 5
  • 0 / 0
да, этот вариант я пробовал, но мне нужно как на примере, чтобы была цена потом вес. А тут на оборот выходит.
Скажите, пожалуйста, а если для блока <div class="price"> сделать тоже float: right а для кнопки прописать clear:both чтобы не улетала.
Получится, что цена и вес по правую сторону в плотную станут. А как их потом по центру выровнять, чтобы автоматом подстраивалось?
*

sportboy

  • Новичок
  • 5
  • 0 / 0
Скажите, пожалуйста, получается, никак невыйдет одним CSS так сделать, чтобы было по центру и в нужном порядке цена а потом вес?
Придется все таки переделывать HTML чтобы в коде порядок был другой да?
Сейчас так
<div class="weight>за 1 кг</div>
<div class="price">1 700 руб.</div>
А придется делать так
<div class="price">1 700 руб.</div>
<div class="weight>за 1 кг</div>

И тогда последний код который Вы прописали подойдет. Но блине, это 10 файлов править придется.
Мне сказали что есть способ в моем случаи только с помощью CSS так сделать. Но не могут найти как.
*

sportboy

  • Новичок
  • 5
  • 0 / 0
Код: css
.product .price,
.product .weight {
display:inline-block;
float:none;
padding:0 10px;
text-align:center;
}
.product .desc {
text-align:center;
}

Выравнялось так как я хочу. Но вес стал с левой стороны, а цена с правой. А должно наоборот быть так: http://upload.akusherstvo.ru/image988194.jpg вес цена
Уточните, пожалуйста, как Вы считаете, чтобы вес цена были подряд, нужно только править HTML местами менять вывода да? Или все таки стилями можно поменять местами их и также выровнять как вы выровняли?
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
В том виде, что сейчас, без правки разметки не обойтись.
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

При прокрутке страницы виджет залезает на меню

Автор coliandra

Ответов: 2
Просмотров: 813
Последний ответ 27.11.2020, 11:33:58
от coliandra
Как выровнять блоки в модуле?

Автор arkady

Ответов: 4
Просмотров: 848
Последний ответ 14.10.2019, 23:24:14
от AlekVolsk
Как все выровнять?

Автор Gromz

Ответов: 3
Просмотров: 817
Последний ответ 30.07.2019, 06:06:16
от Stasweb
Не фиксируются блоки

Автор kushiy

Ответов: 3
Просмотров: 852
Последний ответ 04.05.2019, 20:45:29
от Alldar
Как сделать меню по центру?

Автор NAaTa

Ответов: 14
Просмотров: 1643
Последний ответ 10.08.2018, 11:09:11
от lexxbry