CSS - how background category start before them

[sikera]

Hi I do whit different img bacground every category in list. But I want img start 50px before category in left position. Imgs are whit the same width.

 

I want someting like this:

 

        ...............category1...

.......................category2...

   ....................categpry3...

      .................category4...

 

 

 

[sikera]

I do it! 

 

But text stay in left side and name of next block in left column doing black background :/ 

 

You can see the result on http://blazesquad.com/havaianas

[vekia]

add:

#categories_block_left ul {text-align:right}

somewhere in global.css

[sikera]

10x but I try this. With "right" you can see:

 

                     ..............cat

.......................category2

         ....................cat-ry3

           .................tegory4

 

Category name are with different lenght. I want to do something like: text padding left 50px or something like that. They will be align in left side but not where start category background. 

 

 

 

 

try to recompile your theme, it looks like your shop remember old settings (you said that you still have got class="category")

 

I remove this. Now it work fine. Only text, arrow and black background from title of the next category are the problems.

Edited February 18, 2014 by sikera (see edit history)

[Detelin Markov]

Грийтингс фром България

Опитвам се да разбера, какво всъщност се опитваш да постигнеш като краен резултат, но ми е трудно.
- Искаш да премахнеш черния бекграунд?
- Искаш да подравниш всички категории от дясно?

 

Правилно ли разбирам, какво целиш да постигнеш? Не мисля, че е добро решение толкова много различни картинки да се зареждат за едно меню, но ти си знаеш.

 

Поздрави

 

/Детелин Марков

[Detelin Markov]

Поиграх си малко с твоето меню. Явно не мислиш да има под категории 

 

Опитай това:

/*************** Block CATEGORIES ***************/
#categories_block_left .title_block{display:none} /*Премахваш titlе без да пипаш .tpl файла*/

#categories_block_left  li {
	width:620px;
	;
	padding-right: 18px;
}
	#categories_block_left  li.last {	border:none;}
		#categories_block_left  li a {
			display:block;
			text-align:right;
			padding:7px 11px 5px 522px;
			color: #fff;
			background:none
		}
		#categories_block_left  li a:hover {		 /*За корекции на hover efect-a*/
			text-decoration:none;					 /*Премахване на подчертаването*/
			color: #FFCE00							 /*Промяна цвета на шрифта */
		}
		
	#categories_block_left  li ul {margin-left:40px}
		#categories_block_left  li ul li {border:none}
			#categories_block_left  li ul li a {
				padding-left:0;
				background:none
			}
.blockcategoryitem_3 { background:url('http://blazesquad.com/havaianas/themes/default/img/menu/menu-bg4.png')}
.blockcategoryitem_3:hover{background:url('http://blazesquad.com/havaianas/themes/default/img/menu/menu-bg5.png')} /*Добавям hover efect*/
.blockcategoryitem_4 { background: url('http://blazesquad.com/havaianas/themes/default/img/menu/menu-bg2.png')}
.blockcategoryitem_4:hover{ background:url('http://blazesquad.com/havaianas/themes/default/img/menu/menu-bg5.png')} /*Добавям hover efect*/
.blockcategoryitem_5 { background: url('http://blazesquad.com/havaianas/themes/default/img/menu/menu-bg3.png')}
.blockcategoryitem_5:hover{ background:url('http://blazesquad.com/havaianas/themes/default/img/menu/menu-bg5.png')} /*Добавям hover efect*/
.blockcategoryitem_6 { background: url('http://blazesquad.com/havaianas/themes/default/img/menu/menu-bg4.png')}
.blockcategoryitem_6:hover{ background:url('http://blazesquad.com/havaianas/themes/default/img/menu/menu-bg5.png')} /*Добавям hover efect*/
.blockcategoryitem_7 { background: url('http://blazesquad.com/havaianas/themes/default/img/menu/menu-bg5.png')}
.blockcategoryitem_7:hover{ background:url('http://blazesquad.com/havaianas/themes/default/img/menu/menu-bg5.png')} /*Добавям hover efect*/
.blockcategoryitem_8 { background: url('http://blazesquad.com/havaianas/themes/default/img/menu/menu-bg7.png')}
.blockcategoryitem_8:hover{ background:url('http://blazesquad.com/havaianas/themes/default/img/menu/menu-bg5.png')} /*Добавям hover efect*/
.blockcategoryitem_10{ background: url('http://blazesquad.com/havaianas/themes/default/img/menu/menu-bg4.png')}
.blockcategoryitem_10:hover{ background:url('http://blazesquad.com/havaianas/themes/default/img/menu/menu-bg5.png')} /*Добавям hover efect*/
.blockcategoryitem_13{ background: url('http://blazesquad.com/havaianas/themes/default/img/menu/menu-bg8.png')}
.blockcategoryitem_13:hover{ background:url('http://blazesquad.com/havaianas/themes/default/img/menu/menu-bg5.png')} /*Добавям hover efect*/
.blockcategoryitem_14{ background: url('http://blazesquad.com/havaianas/themes/default/img/menu/menu-bg4.png')}
.blockcategoryitem_14:hover{ background:url('http://blazesquad.com/havaianas/themes/default/img/menu/menu-bg5.png')} /*Добавям hover efect*/

#categories_block_left li .OPEN,
#categories_block_left li .CLOSE { 
	display:none; /* Тук забраняваш показването на +/- запод категориите */
float:right;
margin:10px 10px 0;
height:9px;
width:9px;
background:url(../../../modules/blockcategories/img/icon/open-close.png) no-repeat 0 -9px;
cursor:pointer
} #categories_block_left li .CLOSE {background-position:0 0} /* footer */ .blockcategories_footer { padding:15px 10px; } .blockcategories_footer .category_footer {float:left;clear:none;} .blockcategories_footer ul ul {display:none !important}

Резултата, който би трябвало да ти се визуализира е:

 

 

Поздрави

/Детелин Марков

Edited February 19, 2014 by Detelin Markov (see edit history)

[sikera]

Привет

 

Разгледах какво си ми писал, но единствено 

1. #categories_block_left .title_block{display:none} /*Премахваш titlе без да пипаш .tpl файла*/

ми върши работа и hover ефекта

 

Искам да имам под категории. Това, което искам да постигна съм прикачила като jpg към първия си пост. Не искам имената на катгориите да са изравнени от дясно, а от ляво, но да са там където са по принцип на deffaut темата,а не да бягат заедно с фона в ляво. 

А черния фон на tittle tag не е от категориите, а ми се измества от следващия блок след категориите. Влез на http://blazesquad.com/havaianas и ще видиш за какво ти говоря

 

Другия вариант беше да премахна блока категории и да си напиша кода в header файла, като тогава ползвам една мапната картинка и ползвам различни части от нея за фон на блока. НО си мислех, че 5-6 картинка няма да окажат чак такова значение за бързината.

Edited February 20, 2014 by sikera (see edit history)

[Detelin Markov]

Пробвaй добaвиш z-index към бекгрaундa или целия блок.

 

До сегa не съм срещaл тaкъв тип нaвигaция и ми е стрaнно, много шaрено и рaзсейвaщо, но товa си е моето мнение.

 

A и не е прaктично тaкa дa зaдaвaш бекгрaундите, зaщото при всякa новa кaтегория трябвa дa вкaрвaш код и още код.

 

Успех!