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

[maxxb]

Посмотрела вчера свой сайт www.maxxbon.ru в метрике яндекса и у 90% посетителей сайта  разрешение экрана выше, чем 1024, и сайт с экранов посетителей сайта выглядит некрасиво.
Пыталась вставить в HTML-код ширину 100% в #content, но сдвинулись другие блоки, например многоуровневый левый каталог, подскажите, где еще изменить код?
И еще.
При увеличение масштаба сайта все блоки наезжают друг на друга, тоже дефект верстки получается.

[support 2.0]

maxxbon (09 Декабрь 2012 - 23:58) писал:

Посмотрела вчера свой сайт www.maxxbon.ru в метрике яндекса и у 90% посетителей сайта  разрешение экрана выше, чем 1024, и сайт с экранов посетителей сайта выглядит некрасиво.
Пыталась вставить в HTML-код ширину 100% в #content, но сдвинулись другие блоки, например многоуровневый левый каталог, подскажите, где еще изменить код?
И еще.
При увеличение масштаба сайта все блоки наезжают друг на друга, тоже дефект верстки получается.

Я довела Ваш сайт до такого вида при разрешении 1024х768 (прикрепленный файл).
Для того,чтобы у Вас получилось также, сделайте следующие изменения.
Зайдите в файл main.css -> найдите следующие блоки
1.

#leftMenuBlockWrap {
width: 200px;
padding:1.25em 0em 3.3333em 0em;
vertical-align:top;
}

замените на

#leftMenuBlockWrap {
width: 200px;
padding: 2.25em 1em 3.3333em 1em;
vertical-align: top;
}

2.

#leftMenuBlock {
width: 200px;
margin: 0em 2.0833em 0em -2.5em;
}

замените на

#leftMenuBlock {
width: 200px;
margin: 0em 2.0833em 0em -0.5em;
}

3.  

#primaryContent {width: 800px;padding:0 0px 40px 0;vertical-align:top;}

заменить на

#primaryContent {
width: 600px;
padding: 1em 0px 40px 0;
vertical-align: top;
}

4.  

#content {width: 1024px;margin:0em auto;min-height: 400px;}

заменить на

#content {
width: 987px;
margin: 0em auto;
min-height: 400px;
}

5.

#contentMainTb {margin:0em;border-collapse: collapse;border-spacing: 0;}

заменить на

#contentMainTb {
margin: -1em;
border-collapse: collapse;
border-spacing: 0;
}

6.

th, td {
font-size: 1em;
font-style: italic;
margin: 0.8333em 0 0.8333em 0;
text-align: left;
padding: 3px 10px 3px 0;
}

заменить на

th, td {
font-size: 1em;
font-style: italic;
margin: 0.8333em 0 0.8333em 0;
text-align: left;
padding: 3px 9px 3px 0;
}

7. зайдите в шаблон HTML и найдите следующий блок

<div style="position: absolute; right: 2px; top:-4.5833em;">

заменить его на

<div style="position: absolute; right: 2px; top: -3.1833em;">

далее найдите

<img src="http://files.storeland.ru/web/upload/sitefiles/4/326/325891/home.gif" alt="Maxx Bon-интернет-магазин, дом и товары для дома">

и замените на

<img src="http://files.storeland.ru/web/upload/sitefiles/4/326/325891/home.gif" alt="Maxx Bon-интернет-магазин, дом и товары для дома" style=" position: relative; left: 4px; top: 8px;">

Только я немного не понимаю что Вы имеете ввиду под фразой: некрасиво. Также я прикрепила файл, где видно как Ваш сайт мотрится на наших экранах сейчас без каких-либо изменений

Прикрепленные изображения

• 
• 

[maxxb]

Спасибо. Изменения внесла.
Только почему ширина третьего столбца в каталоге на разных страницах разная (это столбец с модификациями) поэтому разные страницы выглядят по- разному, на некоторых кнопка" купить" у правого края, а на других чуть правее середины. Место нерационально используется. Где регулируется ширина  столбцов каталога и можно ли,  например, временно убрать столбец "наличие товара".

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

В шапке блоки при увеличении масштаба (ctrl+) наезжают друг на друга

[support 2.0]

maxxbon (10 Декабрь 2012 - 12:31) писал:

Спасибо. Изменения внесла.
Только почему ширина третьего столбца в каталоге на разных страницах разная (это столбец с модификациями) поэтому разные страницы выглядят по- разному, на некоторых кнопка" купить" у правого края, а на других чуть правее середины. Место нерационально используется. Где регулируется ширина  столбцов каталога и можно ли,  например, временно убрать столбец "наличие товара".

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

В шапке блоки при увеличении масштаба (ctrl+) наезжают друг на друга

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

[maxxb]

support 2.0 (10 Декабрь 2012 - 15:02) писал:

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

Отлично. Шаблон "Мокко". По порядку что-то делаем с существующим сайтом.
1. ширину столбиков в каталоге товаров  исправляем, чтобы места хватало для текста  он был разнесен равномерно по ширине.
2. Чтобы на экране с разрешением 1366 справа и слева не сотавались пустые места
3. в шапке блоки не наползали друг на друга при увеличинии масштаба

Спасибо. Извините, если что не так.

[Koderhan]

maxxbon (10 Декабрь 2012 - 17:03) писал:

Отлично. Шаблон "Мокко". По порядку что-то делаем с существующим сайтом.
1. ширину столбиков в каталоге товаров  исправляем, чтобы места хватало для текста  он был разнесен равномерно по ширине.
2. Чтобы на экране с разрешением 1366 справа и слева не сотавались пустые места
3. в шапке блоки не наползали друг на друга при увеличинии масштаба

Спасибо. Извините, если что не так.

Если я вас правильно понял. Вы хотите на максимально рационально использовать рабочее пространство на экране?
Это называется адаптивная верстка.
Такие шаблоны изначально делаются адаптивными под ширину экрана.
Например в галереи тем есть обновленный шаблон "Техника" с адаптивной верстной.
Но можно попробовать сделать и ваш шаблон "резиновым".
В Панели администратора.
Сайт-> Редактор тем.
Открыть файл main.csstemplate.
Найти код:

#content {
width: 987px;
margin: 0em auto;
min-height: 400px;
}

Заменить на:

#content {
width: 100%;
margin: 0em auto;
min-height: 400px;
}

Найти код:

#primaryContent {width: 800px;padding:0 0px 40px 0;vertical-align:top;}

Заменить на:

#primaryContent {width: 100%;padding:0 0px 40px 0;vertical-align:top;}

Найти код:

.content_catalog_nested_categories li {text-align:center;float:left;width:150px;overflow:hidden;padding:1em;margin:0em;list-style-type:none;}

Заменить на:

.content_catalog_nested_categories li {text-align:center;float:left;width:16em;/*ширина блока с описанием товара и картинкой*/overflow:hidden;padding:1em;margin:0em;list-style-type:none;}

Найти код:

.content_catalog_nested_categories li .withBorder {height:150px;}

Заменить на:

.content_catalog_nested_categories li .withBorder {height:15em;/*высота блока с товаром*/}

[ALEXp]

надо попробовать сделать и мне резину. Поможет наверное

[maxxb]

Koderhan (11 Декабрь 2012 - 05:54) писал:

Если я вас правильно понял. Вы хотите на максимально рационально использовать рабочее пространство на экране?
Это называется адаптивная верстка.
Такие шаблоны изначально делаются адаптивными под ширину экрана.
Например в галереи тем есть обновленный шаблон "Техника" с адаптивной верстной.
Но можно попробовать сделать и ваш шаблон "резиновым".
В Панели администратора.
Сайт-> Редактор тем.
Открыть файл main.csstemplate.
Найти код:

#content {
width: 987px;
margin: 0em auto;
min-height: 400px;
}

Заменить на:

#content {
width: 100%;
margin: 0em auto;
min-height: 400px;
}

Найти код:

#primaryContent {width: 800px;padding:0 0px 40px 0;vertical-align:top;}

Заменить на:

#primaryContent {width: 100%;padding:0 0px 40px 0;vertical-align:top;}

Найти код:

.content_catalog_nested_categories li {text-align:center;float:left;width:150px;overflow:hidden;padding:1em;margin:0em;list-style-type:none;}

Заменить на:

.content_catalog_nested_categories li {text-align:center;float:left;width:16em;/*ширина блока с описанием товара и картинкой*/overflow:hidden;padding:1em;margin:0em;list-style-type:none;}

Найти код:

.content_catalog_nested_categories li .withBorder {height:150px;}

Заменить на:

.content_catalog_nested_categories li .withBorder {height:15em;/*высота блока с товаром*/}

Отлично, все получилось. Но почему разная ширина контента на разных страницах, например, на этой странице, заканчивается на середине
http://maxxbon.ru/catalog/sip-paneli
на других - иногда до правого края растягивается?

[Koderhan]

maxxbon (11 Декабрь 2012 - 19:05) писал:

Отлично, все получилось. Но почему разная ширина контента на разных страницах, например, на этой странице, заканчивается на середине
http://maxxbon.ru/catalog/sip-paneli
на других - иногда до правого края растягивается?

Вы можете сделать вывод список с товарами в определенной шириной.
Значение ширины таблицы указываются в процентах, это значит что при изменение ширины окна браузера список будет менять свою ширину. Вы так же можете написать ширину списка в пикселях px.
В файле main.csstemplate.
Добавить код:

	/* Селекторы */
	#primaryContent table {
		width:100%;
	}

[maxxb]

Koderhan (11 Декабрь 2012 - 20:07) писал:

Вы можете сделать вывод список с товарами в определенной шириной.
Значение ширины таблицы указываются в процентах, это значит что при изменение ширины окна браузера список будет менять свою ширину. Вы так же можете написать ширину списка в пикселях px.
В файле main.csstemplate.
Добавить код:

/* Селекторы */
#primaryContent table {
	 width:100%;
}

Ну вот с этой темой успешно разобрались. Огромное Вам  человеческое спасибо. Раньше как-то стеснялась лишний раз помощи попросить и сидела сутками голову ломала как сделать. Koderhan, Вам персональная благодарность.
Если вы не против, еще обращусь за помощью, так как нет предела совершенству.
Сейчас мне, например понравилось выражение "ВАША КОРЗИНА УСПЕШНО ПУСТА"

[Koderhan]

maxxbon (11 Декабрь 2012 - 22:46) писал:

Ну вот с этой темой успешно разобрались. Огромное Вам  человеческое спасибо. Раньше как-то стеснялась лишний раз помощи попросить и сидела сутками голову ломала как сделать. Koderhan, Вам персональная благодарность.
Если вы не против, еще обращусь за помощью, так как нет предела совершенству.
Сейчас мне, например понравилось выражение "ВАША КОРЗИНА УСПЕШНО ПУСТА"

Спасибо.
Если я не ошибаюсь то вы хотите изменить надпись "Моя корзина" в зависимости от того есть пуста корзина или нет.
В файле HTML.
Найти подобный код:

<!-- Корзина -->
	  <div id="cartInfo">
		<a href="{CART_URL}">в корзине товаров на</a>:
		<span id="cartSum">
		  {% IF cart_count_empty %}
			<span class="red">0</span> {CURRENCY_NAME}
		  {% ELSE %}
			{% FOR cart_sum %}
			  <span>{cart_sum.NOW | money_format}</span><br />
			{% ENDFOR %}
		  {% ENDIF %}
		</span>
	  </div>
	  <!-- end Корзина -->

Заменить на:

<!-- Корзина -->
	  <div id="cartInfo">
	   
		  {% IF cart_count_empty %}
		  <a href="{CART_URL}">ВАША КОРЗИНА УСПЕШНО ПУСТА</a>:
		  <span id="cartSum">
			<span class="red">0</span> {CURRENCY_NAME}
		  {% ELSE %}
			{% FOR cart_sum %}
			  <a href="{CART_URL}">Текст в случае если в корзина не пуста</a>:
			  <span id="cartSum">
				<span>{cart_sum.NOW | money_format}</span><br />
			{% ENDFOR %}
		  {% ENDIF %}
		</span>
	  </div>
	  <!-- end Корзина -->

[Lion]

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

[Сake]

Данная информация для темы "Сияние" не подойдет. В теме "Сияние" будет сложнее сделать резиновую верстку, так как используется большое число статичных изображений. Используйте лучше приспособленные шаблоны - например тему "Лайт" или адаптивные темы "Техника" или "Вечность".

[Lion]

У нас все магазины на Сиянии (((.    Уточняю, что бы тема "Техника" или "Вечность" стали резиновые нужно колдовать с кодом?  Или они сейчас сделаны уже с "резиновой версткой" ?

[support 2.0]

Lion (26 Сентябрь 2013 - 09:39) писал:

У нас все магазины на Сиянии (((. Уточняю, что бы тема "Техника" или "Вечность" стали резиновые нужно колдовать с кодом?  Или они сейчас сделаны уже с "резиновой версткой" ?

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