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

zvi

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

Shustry

  • Moderator
  • 6430
  • 735
  • Рисую дизайны
Float не нужен. Хотя возможно решение и с ним посредством отрицательных отступов. Но проще всего: width:100% + display:inline-block + text-align:center родителю.
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

zvi

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

Shustry

  • Moderator
  • 6430
  • 735
  • Рисую дизайны
Получится. Оборачиваете отдельным дивом, сдвигаете ВПРАВО на 50%. Затем ваши блоки сдвигаете влево на 50%. Старый приём.
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

zvi

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

zvi

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

Shustry

  • Moderator
  • 6430
  • 735
  • Рисую дизайны
Вы определитесь, каким путём идте ^-^. Можно с float и без. Я бы без делал. Тогда достаточно указать выравнивание текста и ширину блока.
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

Shustry

  • Moderator
  • 6430
  • 735
  • Рисую дизайны
каждый блок с float: left обернуть еще в div и дальше что? я не понял
Не каждый, а все. Контейнер сделать. Он у вас будет выносить блоки за пределы родителя так, что встанет ровно посередине страницы, грубо говоря. А потом потомков обратно на половину ширины. И блоки будут посередине.
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

zvi

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

Shustry

  • Moderator
  • 6430
  • 735
  • Рисую дизайны
Не понял вопроса. Присвоить отрицательные отступы.
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

zvi

  • Давно я тут
  • 396
  • 4
Не понял вопроса. Присвоить отрицательные отступы.
буду побывать что то у меня не выходит репу добавлю за внимания спс
*

Shustry

  • Moderator
  • 6430
  • 735
  • Рисую дизайны
У вас тут вообще просто всё. Блоки ровно делят контейнер на части.



Код: 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;}
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

zvi

  • Давно я тут
  • 396
  • 4
У вас тут вообще просто всё. Блоки ровно делят контейнер на части.






Код: 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
  • 6430
  • 735
  • Рисую дизайны
Нехило так намутили там. Вот так можно, например:

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

Код: 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;}
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

sportboy

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

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

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

Shustry

  • Moderator
  • 6430
  • 735
  • Рисую дизайны
Код: css
.product .weight {
    width:50%;
    text-indent:10px;
}
.product .price {
    width:50%;
    text-align:right;
}
.product .price > * {
    padding-right: 10px;
}

Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

sportboy

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

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

Shustry

  • Moderator
  • 6430
  • 735
  • Рисую дизайны
Вообще идеально ровно по-центру. Если вам нужно распределение, то это уже другое. Ща попробую намутить чего-нить.
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

Shustry

  • Moderator
  • 6430
  • 735
  • Рисую дизайны
Код: css
.product .price,
.product .weight {
display:inline-block;
float:none;
padding:0 10px;
text-align:center;
}
.product .desc {
text-align:center;
}

Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
*

sportboy

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

sportboy

  • Новичок
  • 5
  • 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
Код: 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
  • 6430
  • 735
  • Рисую дизайны
В том виде, что сейчас, без правки разметки не обойтись.
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Как выровнять меню по центру? [перемещено]

Автор Tigrubiyca

Ответов: 20
Просмотров: 13577
Последний ответ 05.02.2017, 11:49:11
от Shustry
Где найти HTML каждой страницы сайта

Автор Sirius02030

Ответов: 3
Просмотров: 411
Последний ответ 08.11.2016, 20:43:22
от Sirius02030
Как выровнять модуль по центру и взять в рамку

Автор SergeyVitruk

Ответов: 17
Просмотров: 7202
Последний ответ 17.10.2016, 14:52:53
от darkghost
Как выровнять строку по вертикали (header)?

Автор Ferum1

Ответов: 4
Просмотров: 320
Последний ответ 13.10.2016, 10:35:36
от Ferum1
[FAQ] CSS-класс страницы

Автор Orion

Ответов: 87
Просмотров: 42375
Последний ответ 07.09.2016, 13:00:21
от Shustry