upper_section/ main_menu

[Serifa]

Продолжение банкета...
Перекрашенная дефолтная тема. Закрасила в означенных фрагментах файла цсс фон и добавила прозрачности.
Но вот как убрать эти загадочные отступы по краям справа и слева?

[GeorG]

Отступ слева -  padding-left: 20px;

Код Выделить Развернуть

#header {
  background: url("http://forroll.org/admin_files/deep__warp_portal__by_vampiredghost-d8gspyr1.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  border-radius: 8px 8px 0 0;
  box-shadow: 0 15px 15px 5px #888;
  height: auto;
  max-width: 100%;
  padding-left: 20px;
}

Ширина  width: 98%;, надо сделать 100%, а padding: 0 0.5em; поставить в ноль.

Код Выделить Развернуть

#main_menu {
  background-color: white;
  float: left;
  margin: 0;
  opacity: 0.7;
  padding: 0 0.5em;
  width: 98%;
}

[Serifa]

не там посмотрела! upper_section, а не top...
padding надо убрать совсем? пошла пробовать...

[GeorG]

Исправил пост выше.

[Serifa]

Конгениально!  Я только что додумалась, пришла, а ты уже исправил пост)

Код Выделить Развернуть

#main_menu{
   float: left;
   margin: 0;
   width: 100%;
background-color: white;
opacity: .7;
}
ну и в хидере как ты написал...
осталось цвета подправить и углы убрать в маин_блоке, а то как-то они уже не выглядят.

[GeorG]

Верхнее меню понравилось, интересно сделано (возможно что-то похожее сделаю)

[Serifa]

у меня есть ссылка на код этого меню на сайте http://codepen.io, только надо в закладках поискать. Или мой вариант, чуть видоизменённый:

Код (html) Выделить Развернуть

<div class="menu"> <ul> <li><a href="http://forroll.org/index.php?board=25.0">каталог форумов</a> <ul> <li> <span><a href="http://forroll.org/index.php?board=184.0">форумные игры</a> <span><a href="http://forroll.org/index.php?topic=3726.0">правила каталога</a> <span><a class="last" href="http://forroll.org/index.php?board=72.0">все прочее</a> </span> </span> </span> </li> </ul> </li> <li><a href="http://forroll.org/index.php?board=38.0">игра</a> <ul> <li> <span><a href="http://forroll.org/index.php?action=form;n=1">регистрация на игре</a> <span><a href="http://forroll.org/index.php?board=38.0">главная страница</a> <span><a href="http://forroll.org/index.php?board=158.0">новости игры</a> <span><a href="http://forroll.org/index.php?board=102.0">мастерская</a> <span><a class="last" href="http://forroll.org/index.php?action=shop">магазин</a> </span> </span> </span> </span> </span> </li> </ul> </li> <li><a href="http://forroll.org/index.php?action=calendar">командный форум</a></li> <li><a href="http://forroll.org/index.php?board=13.0">закрытый клуб</a> <ul> <li> <span><a href="http://forroll.org/index.php?topic=3192.180">флуд</a> <span><a href="http://forroll.org/index.php?topic=2377.60">суперфлудовые цитаты</a> <span><a class="last" href="http://forroll.org/index.php?board=13.0">все прочее</a> </span> </span> </span> </li> </ul> </li> <li><a href="http://forroll.org/index.php?board=72.0">литературный клуб</a> <ul> <li> <span><a href="http://forroll.org/index.php?board=175.0">блондинки и собаки</a> <span><a href="http://forroll.org/index.php?board=183.0">наши стихи</a> <span><a class="last" href="http://forroll.org/index.php?board=72.0">все прочее</a> </span> </span> </span> </li> </ul> </li> <>

а это в цсс:

Код (css) Выделить Развернуть

.menu {position:relative; z-index:100;}
.menu ul {padding:0; margin:0;list-style:none; font-family: 'arial', sans-serif; font-size:14px;}
.menu > ul {height:35px; background:#020089; border-radius:5px 5px 0 0; box-shadow:0 15px 10px -15px rgba(0,0,0,0.6);}
.menu > ul > li {float:left; position:relative; white-space:nowrap;}
.menu > ul > li > a {line-height:35px; height:35px; display:block; margin-top:0; padding:0 10px; color:#fff; text-decoration:none; background:#020089; border-radius:5px 5px 0 0; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; }
.menu ul ul {position:absolute; left:-9999px; top:36px; margin-top:40px; -webkit-transition: 0s 0.75s; -moz-transition: 0s 0.75s; -ms-transition: 0s 0.75s; -o-transition: 0s 0.75s; transition: 0s 0.75s; }
.menu ul ul li span a {display:block; float:left; height:30px; width:160px; line-height:30px; background:#69c; padding:0 10px; color:#fff; text-decoration:none; margin-top:50px; box-shadow:0 10px 10px -10px rgba(0,0,0,0.7); -webkit-transition: 0s 0.75s; -moz-transition: 0s 0.75s; -ms-transition: 0s 0.75s; -o-transition: 0s 0.75s; transition: 0s 0.75s; }
.menu ul ul li span a.last {border-radius:0 0 5px 5px;} .menu ul li:hover {z-index:100;} .menu > ul > li:hover > a {background:#69c; margin-top:-4px; height:40px;  box-shadow:0 10px 10px -10px rgba(0,0,0,0.7);  }
.menu ul li:hover ul {left:0; width:180px; margin-top:0; -webkit-transition: margin 0.25s; -moz-transition: margin 0.25s; -ms-transition: margin 0.25s; -o-transition: margin 0.25s; transition: margin 0.25s; }
.menu ul ul li span {display:block; opacity:0; -webkit-transition: 0.5s 0.25s; -moz-transition: 0.5s 0.25s; -ms-transition: 0.5s 0.25s; -o-transition: 0.5s 0.25s; transition: 0.5s 0.25s; }
.menu ul li:hover ul li span {opacity:1; -webkit-transition:0.75s; -moz-transition:0.75s; -ms-transition:0.75s; -o-transition:0.75s; transition:0.75s; }
.menu ul li:hover ul li span a {margin-top:0; -webkit-transition:0.75s; -moz-transition:0.75s; -ms-transition:0.75s; -o-transition:0.75s; transition:0.75s; }
.menu ul li:hover ul li span a:hover {background:#8799AD;}
.menu ul + img {position:fixed; left:0; top:0; width:0; height:0; z-index:-1;}
.menu ul:hover + img {width:100%; height:100%;}

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

[ALINA]

Serifa  я что то пропустила наверное . А как ты сделала скругление в майнблоке наверху  ? У себя в клубе http://alsiti.net/index.php?board=47.0  глянула  -углы прямые . Хочу своим «клубникам»   дизайн обновить .
ps
хм .. сейчас глянула .Оригинальный блок скругленный . Я что ли когда то закрасила ?Буду переделывать 

[Serifa]

У дефолтного маин_блока неудобные уголки, они подразумевают наличие дефолтного же фона. Поэтому от спрайта в шапке лучше вообще избавиться, как рекомендовал наш дорогой камрад Zoltan:

Код Выделить Развернуть

UPD. Чтобы избавиться от кучи спрайтов в шапке можно сделать вот так
Берём в index.css вот это

#header
{
background: url(../images/theme/main_block.png) #fefefe no-repeat 0 -480px;
padding-left: 20px;
}
#header div.frame
{
background: url(../images/theme/main_block.png) no-repeat 100% -480px;
display: block;
padding: 5px 20px 1em 0;
}


И вот так переделываем

#header{
background: url(../images/imgs/-1.jpg); /* указываем фон */
/*отступ, который вообще не нужен padding-left: 20px; */
-moz-border-radius: 8px 8px 0px 0px;
-webkit-border-radius: 8px 8px 0px 0px;
border-radius: 8px 8px 0px 0px;
}
#header div.frame{
display: block;
padding: 5px 20px 1em 0;
}


Фон ставим любой, я брал жпг с квадратными углами.

* отступ-таки нужен! если не делать потом шапку как у меня...

[Serifa]

Удивительно, как по-разному отрабатывается идентичный код на разных вариантах дефолтной темы! Вот есть перекрашенный дефолт, темный и светлый. И что за ересь на темном? 

Специально сравнивала цсс в обоих случаях, сделала их совершенно идентичными, за исключением цветов!

так, одну проблему решила, сразу после #header кусок, убрать 20px до нуля
тогда почему для светлого варианта ничего убирать не потребовалось???

Код Выделить Развернуть

#header div.frame
{
   display: block;
   padding: 5px 0px 1em 0;
}

[GeorG]

так, одну проблему решила, сразу после #header кусок, убрать 20px до нуля
тогда почему для светлого варианта ничего убирать не потребовалось???

На светлом же убрано.

Если идея такая - сделать 2 одинаковые темы по формам, но разные по оттенкам. То проще сначала сделать одну, после дублировать и перекрасить в другой цвет.

[Serifa]

Вот сейчас глянула - на светлом варианте 20 рх стоит на месте. И ничего, не мешается. Видимо, в первом хидере убрано, и этого хватило.
А на темном где-то другая собака зарыта...

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

[GeorG]

Вот сейчас глянула - на светлом варианте 20 рх стоит на месте. И ничего, не мешается.

Где же там на месте, если через фаербаг не видно (см. скрин)

[Serifa]

Что еще раз доказывает, что этим браузерным инспекторам доверять нельзя, что-то они мутят. Смотри скрин. Я ведь тебя не обманываю. Это я скринила страничку цсс из админки, светлая тема.

[GeorG]

Что еще раз доказывает, что этим браузерным инспекторам доверять нельзя, что-то они мутят. Смотри скрин. Я ведь тебя не обманываю. Это я скринила страничку цсс из админки, светлая тема.

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

UPD:
http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fforroll.org%2Findex.php

   #header    Ошибка значения : width Слишком много значений или нераспознанное значение : auto\000009
   #header div.frame    Ошибка значения : padding попытка найти точку с запятой до имени свойства. добавьте ее

[Serifa]

Вот сейчас глянула на скрин - сразу видно, что в строчке padding нет точки с запятой...    Всё, у меня уже глаза отказываются на это смотреть))

[Yarik]

Верхнее меню понравилось, интересно сделано (возможно что-то похожее сделаю)

Да,очень хорошо вышло,уже кручу код.Подумываю разгрузить меню сайта,у меня стоит мод который создаёт кнопочки в меню с выпадающим списком,вот их и перенести туда,кнопочки эти,и мод снести.И покрасивее станет,и меню сайта разгрузится.

[ALINA]

Да,очень хорошо вышло,уже кручу код.

Кручу это код весь вечер . И никак не могу понять почему у меня блок с авкой дергается при наведении на пункты меню . Всю голову сломала . Если под гостем смотреть то дергается  поле авторизации .
GeorG  может ты что как спец подскажешь .У меня уже тихо шифером шурша  . Вот здесь http://alsiti.besaba.com/index.php

[Yworld_garry]

Всю голову сломала

А если так

.menu ul {
  padding: 0;
  margin: 5px;
  list-style: none;
  font-family: 'arial', sans-serif;
  font-size: 12px;
}

[ALINA]

А если так

.menu ul {
  padding: 0;
  margin: 5px;

Дергается . Хорошо очень видно когда авторизуешься .

[Yworld_garry]

Я писал выше про панель для гостей, она не дергается при 5px

[ALINA]

про панель для гостей, она не дергается при 5px

Дергается .Только что проверила .Поводи по плиткам меню .

[Yworld_garry]

Сейчас зашел, посмотрю...

[Yworld_garry]

Не дергается у меня, а вот если ставлю 0 дергается и под гостем и под пользователем

[ALINA]

Не дергается у меня,

Странно .Сейчас и у меня не дергается . Может из кеша грузанулось до этого .Я собственно почему заморочалась с этим меню .У меня в основном меню много выпадающих пунктов .Глянула сегодня панель Гугла .Ругается на флеш .Там у меня фотошоп онлайн и сайфайндер .Фиг с ним с фотошопом .Можно пожертвовать ,а вот сатфайндер нужен .Вот и решила спрятать его от гугла из основного меню . И заткнулась на этом . Хейдер то в этой теме из трех частей .Три раза шаблон ломала . Спасибо .Осталось только немного  под диз заточить .Ну это уж не сегодня . Еще раз спасибо - выручил .Если утром задергается ,то я прямиком в дурдом .

[Yarik]

Всё нормально с утра,я уже сбегал и проверил.Гарри + .А я переписал код себе на правую сторону,отлично вышло,и меню разгрузил.Вынес в меню как раз то что не должно быть на теме реселлер.Я с этой темой скоро чокнусь.

[ALINA]

Вынес в меню как раз то что не должно быть на теме реселлер.

Аналогично .Я тоже убрала туда что не должно быть в моб .теме .Теперь буду думать над дизайном и позиционированием .

[ALINA]

Вот как я себе верхнее меню сделала 

[CedarMill]

ALINA, как удалось оптимизировать форум для мобильных устройств?

Отлично! Страница оптимизирована для мобильных устройств.
https://www.google.com/webmasters/tools/mobile-friendly/?url=alsiti.net

[ALINA]

как удалось оптимизировать форум для мобильных устройств?

Поставила моб тему реселлер , потом мод  перенаправления  с моб устройств на эту тему  http://custom.simplemachines.org/mods/index.php?mod=3349
Отредактировала css портала

Код Выделить Развернуть

body
{
   min-width: 750px;
}
Заменить
body
{
   min-width: device-width;
}
отредактировала robots.txt и убрала из основного меню все пункты что содержат флеш в верхнее, да и все лишнее туда убрала . Оставила только стандартные пункты основного меню .

[Yarik]

ALINA, как удалось оптимизировать форум для мобильных устройств?

Отлично! Страница оптимизирована для мобильных устройств.
https://www.google.com/webmasters/tools/mobile-friendly/?url=alsiti.net

Тут тема есть - http://www.simplemachines.ru/index.php?topic=17952.0
Почитайте,поможет оптимизировать.

[CedarMill]

ALINA, Yarik, большое спасибо!