Как сделать что бы margin-left не воздействовал на родителя

[Hol1killer]

Доброй ночи друзья. Столкнулся с проблемой, никак не могу понять почему так. Но понимаю что решение на поверхности

Есть скроллер и проблема в том что первый пункт меню li влияет на ширину родителя.

http://elemisdesign.com/demos/carousel/light/index.html тут к примеру 4 слайд его margin-right не воздействует на родителя и не расширяет его на 11 пикселей. Как мне сделать что бы у меня так же первый пункт li и его margin-left:10px не влиял на родителя. У родителя задан одинаковый ровный паддинг справа и слево что центрировать. Но опять же первый элемент li сдвигает все в право на 10px и получается что левый кусок больше чем правый на 10px.

Хотелось бы узнать какую обертку следует использовать что бы li не воздействовал и не сдвигал так всю конструкцию. Надеюсь понятно обьяснил.

[Galaxy]

задачку лучше писать в jsfidle ,если проблема с первым li то попробуйте через псевдокласс first-child убрать отступ для него. что-то типа li:first-child{margin-left:0px;}

[Hol1killer]

задачку лучше писать в jsfidle ,если проблема с первым li то попробуйте через псевдокласс first-child убрать отступ для него. что-то типа li:first-child{margin-left:0px;}

Тогда при скроле, следующие li будут отступать от родителя. А между li должен быть отступ. Я пример скинул как хочу. У меня код такой же только у них margin-right не воздействует, а у меня почему то margin-left сдвигает конструкцию.

Хотя все взято в обертку <div style="position:relative; overflow:hidden:"> список </div> По идеи же не должно быть такого.

[Bumblebee]

http://jsfiddle.net/...ebee1993/Naz9F/

Так не пойдет? Прошу прощения у эпилептиков за выбранные цвета.

Edited July 16, 2013 by Bumblebee

[Hol1killer]

http://jsfiddle.net/...ebee1993/Naz9F/

Так не пойдет? Прошу прощения у эпилептиков за выбранные цвета.

Спасибо щас попробую.

[Hol1killer]

Не получается сдвигаю блок так же как у вас в примере. Все равно первый li двигает конструкцию направо и получается что левая часть фона занимает больше чем правая.

Edited July 16, 2013 by Hol1killer

[Bumblebee]

Тогда конкретнее скажите, что вам нужно

Все по центру должно быть?

Можете обернуть в еще один блок и уже им манипулировать.

[Hol1killer]

Тогда конкретнее скажите, что вам нужно

Все по центру должно быть?

Можете обернуть в еще один блок и уже им манипулировать.

Да у меня есть родитель а в нем список ul с li.

Список реализован через скроллер который сдвигает li с помощью left на ширину li.

Все расчитано по блочной модели.

Следующий код

<div class="indent-row-service">
<div class="container">
<div class="d-carousel">
	 <ul class="newsflash-horiz carousel">
	 <li class="first">
		 <p> <a href="/services/object-protection.html"> <span class="capt-1">Охрана <br/>
		 объектов</span> <img src="/images/service/object-protection.jpg" alt=" Охрана объектов" /></a> </p>
	 </li>
	 <li>
		 <p> <a href="/services/support-of-cargoes.html"> <span class="capt-1">Сопровождение грузов</span> <img src="/images/service/support-cargoes.jpg" alt="Сопровождение грузов, инкассация" /></a> </p>
	 </li>
	 <li>
		 <p> <a href="/services/hardware-protection.html"> <span class="capt-1">Техническая защита</span> <img src="/images/service/hardware-protection.jpg" alt="Техническа зашита" /></a> </p>
	 </li>
	 <li>
		 <p> <a href="/services/antireyder.html"> <span class="capt-1"> Антирейдер <span class="descr">(популярное)</span></span> <img src="/images/service/antireyder.jpg" alt="Антирейдер" /></a> </p>
	 </li>
	 <li>
		 <p> <a href="/services/collection.html"> <span class="capt-1"> Инкассация <br>
		 средств </span> <img src="/images/service/collection.jpg" alt="Инкассация" /></a> </p>
	 </li>
	 <li class="last">
		 <p> <a href="/services/legal-aid.html"> <span class="capt-1">Юридическая помощь</span> <img src="/images/service/legal-aid.jpg" alt="Юридическая помощь" /></a> </p>
	 </li>
	 </ul>
	 <div class="all-service"> >> <a href="/services/"> Все услуги «Бизнес-Безопасность МТБ» </a> </div>
</div>
</div>
</div>

и CSS

.container ul.newsflash-horiz {
margin:0;
}
.container ul.newsflash-horiz li {
border:3px #565656 solid;
float:left;
width: 214px;
margin-left:10px;
background:url('/images/row_bot.gif') bottom repeat-x;
padding:0;
}
.container ul.newsflash-horiz li:hover {
cursor:pointer;
background:#000;
border-color:#fff;
}
.container ul.newsflash-horiz li p {
color: #B4B5B3;
display: block;
font-size: 13px;
margin: 0;
padding: 0;
line-height:25px;
text-indent:0;
}
.container ul.newsflash-horiz li p a {
display:block;
}
.container ul.newsflash-horiz li p span {
background: none repeat scroll 0 0 transparent;
color: #B4B5B3;
display: block;
padding: 0 15px 12px;
position: relative;
top: -8px;
}
.container ul.newsflash-horiz li p .capt-1 {
color:#FF8E29;
display:block;
font-size:24px;
padding: 27px 15px 5px 25px;
font-family:'PFSquareSansProMedium';
}
.container ul.newsflash-horiz li p .capt-1 .descr {
color:#FFF;
top:0;
padding:0;
}
.container ul.newsflash-horiz li p.hover .capt-1 {
color:#fff;
background:#010101;
}
.indent-row-service { padding:28px 30px 5px 30px; }

Получается что первый li списка воздейсвует на indent-row-service и в отладчике я вижу тоже что на скрине. Если я обнуляю li:first-child { margin-left:0 } то при прокрутке вправую сторону скроллера у меня конструкция сдвигается вправа на 10px если не обнулять то получается что слева больше места свободного чем справа и это очень хорошо видно ( потому что у меня там стоят стрелки ).

Ширина родителя 980px .indent-row-service сдвигает через паддинг по 30px слева и справа остается 920px и у меня 4 пункта li показываются ( которые занимают по 230px каждый ширина 214px + 6px бордер + 10px ( маргин лефт )

Edited July 16, 2013 by Hol1killer

[Zverushka]

Вам надо дать ссылку на свою неверно работающую страницу...

[mrnobody]

Скорее всего нужно что-то прописать в API плагина, какой-нибудь метод.

[rash]

Покажите свой код.

Кажется, что проблема может быть не совсем в том, с чем вы боретесь, лучше увидеть, а не гадать.

[Hol1killer]

Делал на локалхосте но залил на пробник.

http://provdomen.ru/new/ - вот ссылочка ребят.

Все спасибо за помощь, ценю это!

[Switch74]

Хм.. смотрю в Хроме не вижу ни каких проблем - все ровненько

[rash]

Я тоже проблем не увидел, у вас все еще воспроизводится?

[Hol1killer]

Я тоже проблем не увидел, у вас все еще воспроизводится?

сейчас я просто сдвинул блок .d-carousel .jcarousel-container { position:relative; right:5px } и благодаря этому я первый отсуп li с margin-left:10px отцентровал.

Впринципе это решение конечно. Но интересует как можно обойтесь без сдвига на 5px

[rash]

А если задать марджин не как 0 10px 0 0, а как 0 5px?

Не могу сейчас поэкспериментировать сам

[Hol1killer]

А если задать марджин не как 0 10px 0 0, а как 0 5px?

Не могу сейчас поэкспериментировать сам

Да пробывал и такой метод, тогда при скролле вправую часть, будет помещаться 4 фотку + кусочек еще 1 фотки ( бордер будет видно и еще что-то ).

Ели будет возможность, это будет отчетливо видно.

http://elemisdesign.com/demos/carousel/light/index.html - вот тут сделали так что margin-left:10px не воздействует никак и не толкает блок.