Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

Сдвиг полей контента в css

Started by cristalker , May 15 2013 21:49

Best Answer khpvolga , 16 May 2013 - 08:32

ширина wrapper 930px минус два поля padding по 15px - итого 900px

едем дальше, что мы пихаем в эти оставшиеся 900px? вот это:

left-column - ширина 240px

content_inside - ширина 705px и отступ margin-left 15px

итого 240+705+15=960px

в чем сила, брат? ))) в арифметике?)))

http://htmlbook.ru/css/cat/margin

http://htmlbook.ru/css/padding

кто так сверстал?? дайте контакты, в свой блокнотик с черной обложкой занесу)))

Go to the full post

This topic is locked

6 replies to this topic

#1 cristalker

JBZoo User (rus)
User rate: ~
posts: 5
topics: 2

Posted 15 May 2013 - 21:49

Модули с фильтрами мешают размещению друг другу.

Пытаюсь разобраться в чём собственно может быть проблема.

Или это css шаблона или это фильтры неправильно отображаются.

Вот пример

Где искать корень проблемы в layout css шаблона или jbzoo.filter css?

CSS layout шаблона

.wrapper  { width:960px; margin:0 auto;}
	


/* Site Wrapper 
----------------*/
#site_wrapper {
	background: url(../images/bg_footer.png) repeat-x bottom}



/* TopBar
------------*/	
#topbar {
	clear:both;
	height:50px;}
	
	#topbar .wrapper {
		position:relative}
	
	

/* Header
------------*/	
#header {
	height:105px;
	;
	background:url(../images/header.png) no-repeat center;}
	
	#header .wrapper {
		position:relative;}


/* Logo
------------*/
#logo {
	padding:10px 0 0 30px;
	float:left}
	
	#logo p {
		margin:0;}
		
	#logo img {
		float:none;
		margin:0; }



/* -- Content --
Contain the CSS for the main and important part of the template
------------*/
#content {
	background:url(../images/content_shadow.png) no-repeat center top;	
	padding:0;}
		
	
	#content .wrapper {
		padding:0 15px;
		width:930px;
		margin-bottom:-150px;
		background:#fff;}
		
		
		#content_inside {
			position:relative;}
		
			
		#content_b {
			background:url(../images/content_b.png) no-repeat center center;
			height:220px;}		
				

/* Main Column Separator 
 This code separate the "left" and "right" module position from the content. */	
#left-column {
	float: left;}
	
#middle-column {
	min-height:700px}		   

#right-column{
	float: right;}
	
						
	
/* Promo & Bottom Modules
contain the CSS for the promo & bottom module positions
------------*/		
#promo {
	border-bottom:1px dotted #BBDBEF;
	padding-bottom:15px;
	margin:0 -10px 15px}
	


#bottom {
	clear:both;
	border-top:1px dotted #BBDBEF;
	padding-top:15px;
	margin:0 -10px 0}



/* -- IceTabs --
 contain the CSS to wrap the IceTabs module.
------------*/	
#icetabs {
	margin:0 0 15px;
	padding:0;}




/* -- Notice --
------------*/	
#notice .success {
	background-image:url(../images/notice.png);
	background-position:5px center;
	padding:10px;
	padding-left:50px;}
	
	#notice .success p {
		margin:0;
		text-shadow:1px 0 1px #fff;
		line-height:1.8em;
		font-size:1.2em;}
	
	



/* -- Content Bar --
--------------------*/		
#content_bar {
	background:url(../images/content_bar.png) no-repeat center;
	height:11px;
	margin:0 -15px 5px;
	padding:0 10px;}


	

	
	
/* -- Footer --
this wrap the footer module position plus the copyright and 
other elements that you may find on the footer
------------*/
#footer {
	background:url(../images/footer.jpg) no-repeat center bottom;
	margin:0;
	padding:0 0 35px}
	
	#footer .wrapper .padding {
		margin:0 -10px;}
	
	
	
		


/*  -- Copyright -- 
this contains the codes for the footer module position and 
icetheme copyright logo or also the "go to top" link 
---------------*/
#copyright {
	clear:both;
	padding:20px 0 0;}

	#copyright .wrapper {
		position:relative; 
		overflow:hidden}

	
	div#copytext { float:left; padding-top:24px; color:#555; text-shadow:1px 1px 1px #fff;}
	
		div#copytext .footer2 { display:none; }
	
		

	div#icelogo { float:left; padding:22px 20px 0 0;}
		div#icelogo p { margin:0;}
			div#icelogo p a {
				display:block;
				float:left;
				background:url(../images/icetheme.png) no-repeat;
				width:120px;
				height:20px;
				margin:0 auto;
				opacity:.4;
				-webkit-transition:all .5s ease-out;
				-moz-transition:all .5s ease-out;
				-o-transition:all .5s ease-out; 
				transition:all .5s ease-out;}
				div#icelogo p a:hover {
					opacity:1;}
					div#icelogo p a span { display:none}



	/* Go to Top */
	a#go2top {
		background: url(../images/go2top.png) no-repeat;
		top: 24px;
		height: 16px;
		width: 16px;
		position: absolute;
		right: 0;
		opacity:.3;
		-webkit-transform: scale(.8);
		-moz-transform: scale(.8);
		-0-transform: scale(.8);
		transform: scale(.8);
		-webkit-transition:all .5s ease-out;
		-moz-transition:all .5s ease-out;
		-o-transition:all .5s ease-out; 
		transition:all .5s ease-out;}
		a#go2top:hover {
			opacity:1;}
			
		a#go2top span {
			display:none}





/* Miscellaneous CSS
------------------------------
List of CSS codes that can not be categorized above but they may
be need by Joomla to operate normally. This codes may be used 
rarely but we reccomend to keep them and to be careful when you
try to change them
---------------------------------------------------------------- */
		
/* Template Styles custom code */
ul.ice-template-style {
	margin:0;
	padding:0;
	float:left}
	ul.ice-template-style li {
		float:left;
		margin:0 .5em .5em!important;
		padding:0!important;
		list-style-type:none;}
		
	ul.ice-template-style li span {
		display:block;
		padding:0 0 .3em;
		font-size:1.4em}

0

Back to top

#2 Sliapy

JBZoo User (rus)
User rate: 50.6
posts: 6393
topics: 15

Posted 15 May 2013 - 21:56

Не увидел у Вас там фильтра. Если вы про то, что левая колонка сдвигает контент, то просто уменьшите ее ширину в любом CSS-файле. Например, в /templates/it_property/css/layout.css

#left-column {
width: 210px;
}

0

[color=#aa0000]Не забывайте нажимать кнопку "Вопрос Решён" под сообщением, которое решило Вашу проблему.[/color]

Back to top

#3 cristalker

Topic Starter
JBZoo User (rus)
User rate: ~
posts: 5
topics: 2

Posted 15 May 2013 - 22:17

К сожалению, не помогло. Вот к примеру Три модуля должны идти в ряд.

это уже при выше-внесённых 200 пикселях на ширину левой колонки.

Не увидел у Вас там фильтра. Если вы про то, что левая колонка сдвигает контент, то просто уменьшите ее ширину в любом CSS-файле. Например, в /templates/it_property/css/layout.css
#left-column {
width: 210px;
}

0

Back to top

#4 Sliapy

JBZoo User (rus)
User rate: 50.6
posts: 6393
topics: 15

Posted 15 May 2013 - 22:45

Тогда сделайте так:

#left-column {
width: 210px !important;
}

Какой-то стиль перекрывает.

Рекомендую научиться работать с средствами веб-разработчика (есть "из коробки" в Opera и Chrome и в виде дополнения Firebug для Firefox) - очень облегчает жизнь.

0

[color=#aa0000]Не забывайте нажимать кнопку "Вопрос Решён" под сообщением, которое решило Вашу проблему.[/color]

Back to top

#5 ripcord

JBZoo User (rus)
User rate: 20.5
posts: 208
topics: 5

Posted 16 May 2013 - 01:40

Вам надо начать со смены шаблона. Возьмите любой из современных на основе Boilerplatе или того же Bootstrap например.

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

0

Абгемахт, славяне!

Back to top

#6 khpvolga

JBZoo User (rus)
User rate: 0.1
posts: 285
topics: 35

Posted 16 May 2013 - 08:32 Best Answer