Проблема с отступами внутри блока

Freeman Liberty · January 8, 2010

Добрый день!

С прошедшими праздниками всех!

Помогите пожалуйста решить проблему следующего характера:

я делаю сайт на Joomla, от html и CSS еще очень далек, хотя и пытаюсь понемногу осваивать и их (иначе о создании собственных сайтов можно забыть - как я понял на собственном опыте ).

Итак о проблеме: на сайте который я делаю модули по умолчанию выглядят так

не очень красиво не правда ли?

Но в настройках можно задать суффикс класса модуля, тогда выглядит симпатичнее, но появляется проблема

В файле general.css нашел параметры модуля

/* Columns Modules Suffix = style2 */
#columns-container .col-module-style2 {
	position:relative;
	overflow:hidden;
	margin:0 -11px;}

	#columns-container .col-module-style2 .col-module_br {
		background:url(../images/colmodule_style2_br.png) no-repeat bottom right;}

	#columns-container .col-module-style2 .col-module_bl {
		background:url(../images/colmodule_style2_bl.png) no-repeat bottom left;}

	#columns-container .col-module-style2 .col-module_tr {
		background:url(../images/colmodule_style2_tr.png) no-repeat top right;}

	#columns-container .col-module-style2 .col-module_tl {
		background:url(../images/colmodule_style2_tl.png) no-repeat top left;
		min-height:126px;
		padding:20px 0 0}	


	#columns-container .col-module-style2 h3 { 
		font-size:1.3em;
		padding:0;
		margin:-4px 22px 7px;
		border-bottom:1px dashed #ccc;}

		#columns-container .col-module-style2 h3 span { color:#999 } 

		#columns-container .col-module-style2 .col-module_content {
			padding:0 23px 20px;}

Задал ему padding-left

/* Columns Modules Suffix = style2 */
#columns-container .col-module-style2 {
	position:relative;
	overflow:hidden;
	margin:0 -11px;
padding-left:10px;}

Получилось следующее

Думаю вопрос понятен, как сделать отступ внутри модуля слева так, чтобы при этом не менялась ширина самого модуля?

P.S. Извините если получилось слишком длинно - старался предоставить всю необходимую информацию :lol:

Заранее спасибо!

Edited January 9, 2010 by Freeman Liberty

psywalker · January 8, 2010

1) Во-первых НЕТ рисунка, наверное забыл вставить

2) Во-вторых насчёт отступа можно в Див засунуть ещё один Див и ему уже назначить необходимые отступы.

tgnet · January 8, 2010

Тоже картинок не вижу

vknw123 · January 8, 2010

1) Во-первых НЕТ рисунка, наверное забыл вставить
2) Во-вторых насчёт отступа можно в Див засунуть ещё один Див и ему уже назначить необходимые отступы.

Случайно может знаете, если в один Див засунуть несколько Дивов, какой колличество вложенных Дивов будет воспринято адекватно?

Edited January 10, 2010 by s0rr0w

Freeman Liberty · January 8, 2010

Есть картинки.

не загружаються почемуто.

В IE задал режим совместимости загрузились или можно прйти по ссылкам на http://fastpic.ru/

Во-вторых насчёт отступа можно в Див засунуть ещё один Див и ему уже назначить необходимые отступы

Спасибо за совет.

Если не сложно напиши как это должно выглядеть и куда вставлять :lol:

psywalker · January 8, 2010

Случайно может знаете, если в один Див засунуть несколько Дивов, какой колличество вложенных Дивов будет воспринято адекватно?

Сколько хватит у тебя времени.

Спасибо за совет.
Если не сложно напиши как это должно выглядеть и куда вставлять

Берёшь див, в него засовываешь ещё один див, и последнему уже отступы какие нужно. Тут нечего объяснять.

Edited January 10, 2010 by s0rr0w

Freeman Liberty · January 8, 2010

Не могу понять что за глюк но в лисе картинок не видно даже по ссылкам в IE в режиме совместимости все нормально.

Берёшь див, в него засовываешь ещё один див, и последнему уже отступы какие нужно. Тут нечего объяснять.

Получилось открыть изображения?

Psywalker спасибо за разъяснения, но не мог бы ты на примере того кода что я дал показать как это должно выглядеть?

Тебе не сложно и мне сильно облегчит жизнь :lol:

Спасибо!

psywalker · January 8, 2010

Я не знаю, что там у тебя за дивы, ну вот например. Первый див - #columns-container, Второй див .col-module-style2. Как и должно быть, второй вложен в первый и получает отступы margin: 11px;

#columns-container .col-module-style2 {
	position:relative;
	overflow:hidden;
	margin: 11px;
}

Можешь продолжать также задавать второму, вложенному диву паддинги.

vknw123 · January 8, 2010

Сколько хватит у тебя времени.

Получается что согласно спецификации, нерекомендуется засовывать Див в Див , так?

Edited January 10, 2010 by s0rr0w

psywalker · January 8, 2010

Получается что согласно спецификации, нерекомендуется засовывать Див в Див , так?

Чушь какая-та

Edited January 10, 2010 by s0rr0w

Freeman Liberty · January 8, 2010

Я не знаю, что там у тебя за дивы, ну вот например. Первый див - #columns-container, Второй див .col-module-style2. Как и должно быть, второй вложен в первый и получает отступы margin: 11px;
#columns-container .col-module-style2 {
	position:relative;
	overflow:hidden;
	margin: 11px;
}
Можешь продолжать также задавать второму, вложенному диву паддинги.

Если я правильно понимаю то #columns-container выводит модуль по умолчанию, .col-module-style2 это тот самый суффикс класса модуля который я задаю.

Зачем же мне еще один суффикс класса модуля когда я всего лишь хочу немного подправить этот, сделать так чтобы у него был небольшой отступ слева.

Получилось открыть изображения?

Может тогда понятней станет о чем я говорю.

psywalker · January 8, 2010

Может тогда понятней станет о чем я говорю.

Нет, не получилось.

Freeman Liberty · January 8, 2010

В IE у меня все нормально загружается попробуй через него.

Какие то траблы у лисы с fastpic.ru

psywalker · January 8, 2010

А попробуй задать отступы самим абзацам и т. д. внутри модуля, обратись к ним.

gesandte · January 8, 2010

А попробуй задать отступы самим абзацам и т. д. внутри модуля, обратись к ним.

а можно впринципе не вставлять еще один див как прослойку, а попробывать так

div.wrapper > div,
div.wrapper > table,
div.wrapper > p {
    margin: 11px;
}

Смыл вобщем такой, а там надо смотреть что внутри блока

psywalker · January 8, 2010

а можно впринципе не вставлять еще один див как прослойку, а попробывать так
div.wrapper > div,
div.wrapper > table,
div.wrapper > p {
    margin: 11px;
}
Смыл вобщем такой, а там надо смотреть что внутри блока

Ну да, я это и предложил в последнем посте. :lol:

gesandte · January 8, 2010

Ну да, я это и предложил в последнем посте.

Да)))) неразглядел ну ладно, привел пример на твой пост

Freeman Liberty · January 9, 2010

Почти помогло

сделал так

/* Columns Modules Suffix = style2 */
#columns-container .col-module-style2 
div.wrapper > div,
div.wrapper > table,
div.wrapper > p

Появились небольшой отступ справа

psywalker · January 9, 2010

А ты его убей также, назначив правый паддинг или меньший марджин

Freeman Liberty · January 9, 2010

А ты его убей также, назначив правый паддинг или меньший марджин

так я заменил код

/* Columns Modules Suffix = style2 */
#columns-container .col-module-style2 {
	position:relative;
	overflow:hidden;
	margin:0 -11px;}

на

/* Columns Modules Suffix = style2 */
#columns-container .col-module-style2 div.wrapper > div,
div.wrapper > table,
div.wrapper > p

Без margin: 11px т.к. изменение его величины абсолютно не как не отражалось на отображении модуля

psywalker · January 9, 2010

так я заменил код
/* Columns Modules Suffix = style2 */
#columns-container .col-module-style2 {
	position:relative;
	overflow:hidden;
	margin:0 -11px;}
на
/* Columns Modules Suffix = style2 */
#columns-container .col-module-style2 div.wrapper > div,
div.wrapper > table,
div.wrapper > p
Без margin: 11px т.к. изменение его величины абсолютно не как не отражалось на отображении модуля

а если сделать так margin:0 -15px; В твоём случае нужно пробовать варианты.

Freeman Liberty · January 9, 2010

а если сделать так margin:0 -15px; В твоём случае нужно пробовать варианты.

Я же говорю изменение margin никак не влияет

/* Columns Modules Suffix = style2 */
#columns-container .col-module-style2 div.wrapper > div,
div.wrapper > table,
div.wrapper > p {
margin:0 -15px;}

или

margin:0 -55px

или

margin:0 0 -15px

ничего не меняется

psywalker · January 9, 2010

Я же говорю изменение margin никак не влияет
/* Columns Modules Suffix = style2 */
#columns-container .col-module-style2 div.wrapper > div,
div.wrapper > table,
div.wrapper > p {
margin:0 -15px;}
или
margin:0 -55px
или
margin:0 0 -15px
ничего не меняется

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

Freeman Liberty · January 9, 2010

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

Ок.

Спасибо за оказанную помощь , буду экспериментировать дальше авось что-то да получиться.

psywalker · January 9, 2010

Ок.
Спасибо за оказанную помощь , буду экспериментировать дальше авось что-то да получиться.

Давай, удачи

Sign In

Проблема с отступами внутри блока

Question

Link to comment

Share on other sites

24 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information