Выравнять меню по странице

[s7ranger]

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

#branding, #header_bar, #primary_nav { min-width: 980px; }

на

#header_bar { min-width: 980px; } 
#branding, #primary_nav { min-width: 980px; width: 88%; margin: 0 auto; }

но появилась небольшая проблема, а именно меню немного уже страницы форума.

 

 
И, если можно, сюда же второй вопрос - как сдвинуть Публикации и иконку вправо?

 

Заранее всем спасибо за ответы.

[Viktar83]

В #primary_nav есть вложенный .main_width и ему надо задать ширину 100% от родительского слоя - вот так:

#primary_nav .main_width { width: 100% !important; }

---
Кстати, а почему 88% ? У Вас так ширина меню не будет совпадать с шириной слоя контента:
посмотрите на #content

margin: 0 auto;
width: 87% !important;
min-width: 960px;

padding: 10px 10px;

[s7ranger]

У меня там сейчас такой код

#header_bar { min-width: 980px; } 
#branding, #primary_nav { min-width: 980px; width: 88%; margin: 0 auto; }
/*#header_bar .main_width, #branding .main_width, #primary_nav .main_width { padding: 0 10px; }*/

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

 

88% потому что так было указано в одном из топиков на ээтом форуме. Если поставить 87%, то ширина меню навигации будет ещё меньше.

Не знаю правильно или нет, но сейчас добавил под этими строками

#primary_nav .main_width { width: 100% !important; }

второй вопрос решился.

 

С первым вопросом по-прежнему проблема. И кстати в топиках такая же ситуация.

 

[Viktar83]

Повторяю - ширина задана в % и она неодинаковая - поэтому никогда не совпадет.
 
Сделайте так, как в #content ( min-width, width и padding )

#primary_nav {
background: #3d454e;
font-size: 14px;
padding: 0px 10px;
}
#branding, #primary_nav {
min-width: 960px;
width: 87%;
margin: 0 auto;
}

 а чтобы пункты мены были с самого краю, как на этом сайте:

#community_app_menu {
margin: 0 -11px 0 -10px
}

---- 
В топиках уже другое, там задан паддинг 9px, а Вам надо:

.ipsBox, .ipsPad {
padding: 0;
}

[s7ranger]

После внесения этих изменений стало ещё хуже (полоса меню стала ещё короче, а пункты в меню опять сдвинулись ближе к середине)

 

 

поэтому пока вернул как было.

 

Правки вносил в /* LAYOUT */, сейчас у меня там такой код

/* LAYOUT */
#content, .main_width {
	margin: 0 auto;
	/* Uncomment for fixed */
	/*width: 980px;*/
	/* Fluid */
	width: 87% !important;
   	min-width: 960px;
}

#header_bar { min-width: 980px; } 
#branding, #primary_nav { min-width: 980px; width: 88%; margin: 0 auto; }
/*#header_bar .main_width, #branding .main_width, #primary_nav .main_width { padding: 0 10px; }*/
#primary_nav .main_width { width: 100% !important; }

#content {
	background: #fff;
	padding: 10px 10px;
	line-height: 120%;
	-webkit-box-shadow: 0 5px 9px rgba(0,0,0,0.1);
	-moz-box-shadow: 0 5px 9px rgba(0,0,0,0.1);
	box-shadow: 0 5px 9px rgba(0,0,0,0.1);
}

А вот топики выравнять получилось, спасибо.

[Viktar83]

И все же попробуйте вот так:

/* LAYOUT */
#content, .main_width {
	margin: 0 auto;
	width: 87% !important;
   	min-width: 960px;
}
#header_bar { min-width: 980px; } 
#branding, #primary_nav {
	min-width: 960px;
	width: 87%;
	margin: 0 auto;
}
#primary_nav { padding: 0 10px !important; }
#primary_nav .main_width { width: 100% !important; }
#community_app_menu { margin: 0 -11px 0 -10px !important; }

#content {
	background: #fff;
	padding: 10px 10px;
	line-height: 120%;
	-webkit-box-shadow: 0 5px 9px rgba(0,0,0,0.1);
	-moz-box-shadow: 0 5px 9px rgba(0,0,0,0.1);
	box-shadow: 0 5px 9px rgba(0,0,0,0.1);
} 

Вот так должно получиться:

[s7ranger]

Теперь порядок, премного благодарен. Если будут ещё вопросы, создам отдельную тему, а эту можно закрывать.