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

[GreenBrick]

В общем вот та картина, которая сейчас:

Это что примерно необходимо:

В общем банально необходимо сделать меню отдельным блоком и растянуть по ширине этого блока. Плюс при этом сохранить каким-то образом его адаптивность.
Надеюсь на вашу помощь. Стилевое оформление сделаю сам, необходимо лишь позиционирование. Заранее спасибо.
Сайт-клиент: http://microfive.storeland.ru/

[GreenBrick]

Извиняюсь, просто ленился, сам сделал) Если кого интересует, подскажу)

[Den1922]

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

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

[MikDark]

Den1922 (02 Апрель 2014 - 20:18) писал:

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

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

А что именно Вы со слайдером хотите? он тут идет стандартный.

[Иванов]

GreenBrick (16 Март 2014 - 13:43) писал:

Извиняюсь, просто ленился, сам сделал) Если кого интересует, подскажу)

Подскажите пож-та как сделать такое же горизонтальное меню как у Вас?

Спасибо!

[Иванов]

MikDark (02 Апрель 2014 - 20:22) писал:

А что именно Вы со слайдером хотите? он тут идет стандартный.

Подскажите пож-та как сделать такое же горизонтальное меню?

Спасибо!

[Ирина345]

Иванов (31 Май 2014 - 21:48) писал:

Подскажите пож-та как сделать такое же горизонтальное меню?

Спасибо!

Здравствуйте, Вы хотите такое же горизонтальное меню как и на этом сайте , то Вам нужно найти в style.css

#megamenu{position:absolute;height:54px;top:90px;left:238px;} 

#megamenu li .root_link:hover,
#megamenu li.active .root_link {color:#da3b44}

#megamenu li .root_link{color:#666666;text-transform:uppercase;font-size:11px; text-decoration: none;}

заменить на

#megamenu{position: absolute;
height: 48px;
top: 80px;
left: 238px;
margin-bottom: -4px;
background: #FAFAFA;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);} 

#megamenu li .root_link:hover,
#megamenu li.active .root_link {color: #fff;
background: #da3b44}

#megamenu li .root_link{padding: 5px 30px;
color: #666666;
font: 14px 'Oswald', sans-serif;
text-decoration: none;
background: #f3f3f3;border: 1px solid #e7e7e7;}

[Иванов]

Ирина345 (01 Июнь 2014 - 09:47) писал:

Здравствуйте, Вы хотите такое же горизонтальное меню как и на этом сайте , то Вам нужно найти в style.css

#megamenu{position:absolute;height:54px;top:90px;left:238px;} 

#megamenu li .root_link:hover,
#megamenu li.active .root_link {color:#da3b44}

#megamenu li .root_link{color:#666666;text-transform:uppercase;font-size:11px; text-decoration: none;}

заменить на

#megamenu{position: absolute;
height: 48px;
top: 80px;
left: 238px;
margin-bottom: -4px;
background: #FAFAFA;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);}

#megamenu li .root_link:hover,
#megamenu li.active .root_link {color: #fff;
background: #da3b44}

#megamenu li .root_link{padding: 5px 30px;
color: #666666;
font: 14px 'Oswald', sans-serif;
text-decoration: none;
background: #f3f3f3;border: 1px solid #e7e7e7;}

Всё сделали, как Вы описали, но что-то не совсем так получилось (не так как на том сайте)....   посмотрите пож-та.

Спасибо!

[Ирина345]

Иванов (01 Июнь 2014 - 14:58) писал:

Всё сделали, как Вы описали, но что-то не совсем так получилось (не так как на том сайте)....   посмотрите пож-та.

Спасибо!

в style.ccs найдите

#megamenu{position: absolute;
height: 48px;
top: 80px;
left: 238px;
margin-bottom: -4px;
background: #FAFAFA;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);} 

#megamenu li.root_menu{padding:25px 8px 5px 8px;float:left;position:relative;}

#megamenu li .root_link{padding: 5px 30px;
color: #666666;
font: 14px 'Oswald', sans-serif;
text-decoration: none;
background: #f3f3f3;border: 1px solid #e7e7e7;}

замените

#megamenu{position: absolute;
height: 43px;
top: 72px;
left: 169px;
margin-bottom: 13px;
background: #FFFFFF;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
widht:861px;} 

#megamenu li.root_menu{padding:15px 1px 5px 8px;float:left;position:relative;}

#megamenu li .root_link{padding: 4px 17px;
color: #666666;
font: 14px 'Oswald', sans-serif;
text-decoration: none;
background: #f3f3f3;border: 1px solid #e7e7e7;}

[Иванов]

Ирина345 (01 Июнь 2014 - 16:37) писал:

в style.ccs найдите

#megamenu{position: absolute;
height: 48px;
top: 80px;
left: 238px;
margin-bottom: -4px;
background: #FAFAFA;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);}

#megamenu li.root_menu{padding:25px 8px 5px 8px;float:left;position:relative;}

#megamenu li .root_link{padding: 5px 30px;
color: #666666;
font: 14px 'Oswald', sans-serif;
text-decoration: none;
background: #f3f3f3;border: 1px solid #e7e7e7;}

замените

#megamenu{position: absolute;
height: 43px;
top: 72px;
left: 169px;
margin-bottom: 13px;
background: #FFFFFF;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
widht:861px;}

#megamenu li.root_menu{padding:15px 1px 5px 8px;float:left;position:relative;}

#megamenu li .root_link{padding: 4px 17px;
color: #666666;
font: 14px 'Oswald', sans-serif;
text-decoration: none;
background: #f3f3f3;border: 1px solid #e7e7e7;}

А как теперь отодвинуть строчку меню от верхней шапки чуть вниз? чтобы строчка меню была между верхней шапкой и слайдом.

[Ирина345]

Иванов (01 Июнь 2014 - 16:43) писал:

А как теперь отодвинуть строчку меню от верхней шапки чуть вниз? чтобы строчка меню была между верхней шапкой и слайдом.

найдите

#megamenu{position: absolute;
height: 43px;
top: 72px;
left: 169px;
margin-bottom: 13px;
background: #FFFFFF;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
widht:861px;}

.flexslider {margin: 0 0 30px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;}

замените на

.flexslider {margin: 54px 0 30px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;}

#megamenu{position: absolute;
height: 43px;
top: 126px;
left: 169px;
margin-bottom: 13px;
background: #FFFFFF;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
width: 861px;}

[Иванов]

Ирина345 (01 Июнь 2014 - 16:53) писал:

найдите

#megamenu{position: absolute;
height: 43px;
top: 72px;
left: 169px;
margin-bottom: 13px;
background: #FFFFFF;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
widht:861px;}

.flexslider {margin: 0 0 30px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;}

замените на

.flexslider {margin: 54px 0 30px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;}

#megamenu{position: absolute;
height: 43px;
top: 126px;
left: 169px;
margin-bottom: 13px;
background: #FFFFFF;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
width: 861px;}

Теперь строка меню залазит на слайдер, а на других страницах залазит на правое меню и остальное...

[Ирина345]

Иванов (01 Июнь 2014 - 17:03) писал:

Теперь строка меню залазит на слайдер, а на других страницах залазит на правое меню и остальное...

Уточните на скриншоте куда Вам нужно поставить меню

[Иванов]

Ирина345 (01 Июнь 2014 - 17:10) писал:

Уточните на скриншоте куда Вам нужно поставить меню

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

• 
• 

[Ирина345]

Иванов (01 Июнь 2014 - 17:21) писал:

найдите

#megamenu{position: absolute;
height: 43px;
top: 126px;
...}

.content.container{margin-top:25px;margin-bottom:50px;min-height:500px}

замените

#megamenu{position: absolute;
height: 43px;
top: 107px;
...}

.content.container{margin-top:59px;margin-bottom:50px;min-height:500px}

[Иванов]

Ирина345 (01 Июнь 2014 - 17:36) писал:

найдите

#megamenu{position: absolute;
height: 43px;
top: 126px;
...}

.content.container{margin-top:25px;margin-bottom:50px;min-height:500px}

замените

#megamenu{position: absolute;
height: 43px;
top: 107px;
...}

.content.container{margin-top:59px;margin-bottom:50px;min-height:500px}

А черную полосу как убрать? (на скрине нарисовано)

[lew]

вопрос актуален?
если да, то какую полосу убрать?

[Иванов]

Лев (01 Июнь 2014 - 21:09) писал:

вопрос актуален?
если да, то какую полосу убрать?

да, актуален. На скрине вверху обозначено.  (красный шрифтом.)  скрин с сообщения №14

[lew]

В style.css
найдите код

#header-fluid{position:relative;background: #ffffff url('ПУТЬ_К_КАРТИНКЕ/header-top-bg.png') repeat-x 0 0;box-shadow:0 1px 1px 0 rgba(0,0,0,0.25);-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.25);-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.25);z-index:10}

и замените на этот

#header-fluid{position:relative;background: none repeat-x 0 0  #ffffff;box-shadow:0 1px 1px 0 rgba(0,0,0,0.25);-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.25);-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.25);z-index:10}