Сообщений в теме: 6

[cristalker]

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

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

Или это 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}	

[Sliapy]

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

 

#left-column {
width: 210px;
}

[cristalker]

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

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

 

 

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

 

#left-column {
width: 210px;
}

 

[Sliapy]

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

 

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

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

 

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

[ripcord]

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

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

[khpvolga]

ширина 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

 

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

Сообщение отредактировал khpvolga: 16 May 2013 - 08:33

[cristalker]

Спасибо за помощь!

 

Увеличил ширину враппера и всё решилось.

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