Jump to content
  • 0

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

Freeman Liberty

Asked by Freeman Liberty,

 Share

Question

Freeman Liberty Explorer

Freeman Liberty

Posted
Posted (edited)

Добрый день!

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

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

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

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

snap201001.jpg

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

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

snap201001081.jpg

В файле 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;}

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

snap2010010.jpg

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

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

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

Edited by Freeman Liberty
Link to comment
Share on other sites

24 answers to this question

Recommended Posts

  • 0
vknw123 Explorer

vknw123

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

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

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

Edited by s0rr0w
Link to comment
Share on other sites
  • 0
Freeman Liberty Explorer

Freeman Liberty

Posted
  • Author
Posted

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

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

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

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

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

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

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

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

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

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

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

Edited by s0rr0w
Link to comment
Share on other sites
  • 0
Freeman Liberty Explorer

Freeman Liberty

Posted
  • Author
Posted

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

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

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

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

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

Спасибо!

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

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

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

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

Link to comment
Share on other sites
  • 0
Freeman Liberty Explorer

Freeman Liberty

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

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

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

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

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

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

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

Link to comment
Share on other sites
  • 0
gesandte Explorer

gesandte

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

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

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

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

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

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

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

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

Link to comment
Share on other sites
  • 0
Freeman Liberty Explorer

Freeman Liberty

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

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

/* 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 т.к. изменение его величины абсолютно не как не отражалось на отображении модуля

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

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

/* 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; В твоём случае нужно пробовать варианты.

Link to comment
Share on other sites
  • 0
Freeman Liberty Explorer

Freeman Liberty

Posted
  • Author
Posted
а если сделать так 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

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
Я же говорю изменение 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

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

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

Link to comment
Share on other sites
  • 0
Freeman Liberty Explorer

Freeman Liberty

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

Ок.

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept