Как выровнить выпадающее меню профиля?

голоса: 0

Поставил на сайт выпадающее меню профиля и оно криво встало как его выровнить чтобы было все ровно? За помощь буду благодарен!!

Делал все как было на установке, и все равно криво встало.

 

Адрес сайта killing-floor.ucoz.com
Закрыто с пометкой: Вопрос решен!
| Автор: | Категория: Дизайн сайта
Закрыт | | Автор: Yuri_Geruk

Ответов: 1

голоса: 0

Советовал бы ваши стили с строки 566 до 583 заменить на:

.profile-menu {position:relative!important} 
 .profile-button s {display:inline-block;z-index:9;background:#3297db;font-size:10px;margin-right:10px;margin-left:1px;line-height:14px;padding:2px 6px;text-decoration:none;-webkit-border-radius: 55px;-moz-border-radius: 55px;border-radius: 55px;} 
 .profile-button, .profile-button:hover {display:inline-block;position:relative;line-height:30px;padding-left: 60px;padding-right:18px;text-decoration:none;} 
 .profile-button i {position:absolute;right:0px;top:14px;width: 0;height: 0;border-left: 3px solid transparent;border-right: 3px solid transparent;border-top: 4px solid rgba(255,255,255,0.7);} 
 .profile-avatar, .profile-avatar img {-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;} 
 .profile-avatar {display:inline-block;width:54px;height:54px;position:absolute;top:-0px;left:0px;border-radius: 20px;} 
 .profile-avatar img {width:54px;height:54px;object-fit:cover;vertical-align:bottom;background:#fff;border:2px solid #fff} 
 .profile-menu:hover .profile-list {visibility:visible;} 
 .profile-list {position:absolute;width:190px!important;right: -30px!important;top: 75px;padding-top:18px;visibility:hidden;z-index:9;} 
 .profile-list-in {background:#fff;width:190px!important;max-width:190px!important;padding:3px 0px;box-shadow:0px 8px 35px rgba(0,0,0,0.1);-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;} 
 .profile-list-in a {display:block;padding:10px 20px;text-decoration:none;border-bottom:1px solid #f1f1f1;font-size:12px;color:#8a8a8a} 
 .profile-list-in a:hover {color:#000;} 
 .profile-list-in a.last {border-bottom:0px !important} 
 .profile-list-in a i {background:#3297db;color:#fff;font-style:normal;font-size:10px;padding:2px 6px;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;} 
 .profile {margin: 0 auto;display: table;margin-bottom: 15px;font-size:13px;} 
 .profile_avatar, .profile_avatar img {-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;} 
 .profile_avatar {width:24px;height:24px;overflow:hidden;float:left;margin-right:7px;margin-top:2px;border:2px solid #fff} 
 .profile_avatar img {width:24px;height:24px;object-fit:cover}

удалить мусор:

стати2

Профиль:

<?if($PAGE_ID$='sitePage1')?>
 <section class="slider">
 <div class="slider-wrapper">
 <div class="slide">
 <div class="photo">
 <img src="http://outlast.my1.ru/Logo1/test1.jpg" alt="photo">
 </div>
 <div class="text-block">
 <div>
 <h1>Lorem ipsum dolor</h1>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquam aspernatur
 consequatur corporis doloribus eligendi eos facilis, id impedit in molestias odio odit porro
 quae rem sequi sit, soluta vero.</p>
 <a href="#" class="info-btn">More</a>
 </div>
 </div>
 </div>
 <div class="slide">
 <div class="photo">
 <img src="(фото)" alt="photo">
 </div>
 <div class="text-block">
 <div>
 <h1>Lorem ipsum dolor</h1>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquam aspernatur
 consequatur corporis doloribus eligendi eos facilis, id impedit in molestias odio odit porro
 quae rem sequi sit, soluta vero.</p>
 <a href="#" class="info-btn">More</a>
 </div>
 </div>
 </div>
 <div class="slide">
 <div class="photo">
 <img src="(фото)" alt="photo">
 </div>
 <div class="text-block">
 <div>
 <h1></h1>
 <p></p>
 <a href="#" class="info-btn">More</a>
 </div>
 </div>
 </div>
 </div>
 <div class="bx-pager">
 <a data-slide-index="0" href=""><img src="http://outlast.my1.ru/Logo1/test1.jpg" /></a>
 <a data-slide-index="1" href=""><img src="фото" /></a>
 <a data-slide-index="2" href=""><img src="Фото" /></a>
 </div>
 </section>
 <script src="/.s/t/1807/jquery.bxslider.min.js"></script>
 <script>
 $(function () {
 $('.slider-wrapper').bxSlider({
 useCSS: false,
 auto: true,
 autoStart: true,
 nextText: 'keyboard_arrow_right',
 prevText: 'keyboard_arrow_left',
 pagerCustom: '.bx-pager',
 controls: false
 });
 });
 </script>
 <?endif?>

Стати

этого в стилях быть не должно так как это вам не html шаблон, а таблица стилей.

| Автор:
Я удалил все лишнее как и сказали! А что делать с меню?
Sheldon,

Повторно замените стили на:

.profile-menu {position:relative!important} 
 .profile-button s {display:inline-block;z-index:9;background:#3297db;font-size:10px;margin-right:10px;margin-left:1px;line-height:14px;padding:2px 6px;text-decoration:none;-webkit-border-radius: 55px;-moz-border-radius: 55px;border-radius: 55px;} 
 .profile-button, .profile-button:hover {display:inline-block;position:relative;line-height:30px;padding-left: 60px;padding-right:18px;text-decoration:none;} 
 .profile-button i {position:absolute;right:0px;top:14px;width: 0;height: 0;border-left: 3px solid transparent;border-right: 3px solid transparent;border-top: 4px solid rgba(255,255,255,0.7);} 
 .profile-avatar, .profile-avatar img {-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;} 
 .profile-avatar {display:inline-block;width:54px;height:54px;position:absolute;top:-0px;left:0px;border-radius: 20px;} 
 .profile-avatar img {width:54px;height:54px;object-fit:cover;vertical-align:bottom;background:#fff;border:2px solid #fff} 
 .profile-menu:hover .profile-list {visibility:visible;} 
 .profile-list {position:absolute;width:190px!important;right: -110px!important;top: 15px;padding-top:18px;visibility:hidden;z-index:9;} 
 .profile-list-in {background:#fff;width:190px!important;max-width:190px!important;padding:3px 0px;box-shadow:0px 8px 35px rgba(0,0,0,0.1);-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;} 
 .profile-list-in a {display:block;padding:10px 20px;text-decoration:none;border-bottom:1px solid #f1f1f1;font-size:12px;color:#8a8a8a} 
 .profile-list-in a:hover {color:#000;} 
 .profile-list-in a.last {border-bottom:0px !important} 
 .profile-list-in a i {background:#3297db;color:#fff;font-style:normal;font-size:10px;padding:2px 6px;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;} 
 .profile {margin: 0 auto;display: table;margin-bottom: 15px;font-size:13px;} 
 .profile_avatar, .profile_avatar img {-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;} 
 .profile_avatar {width:24px;height:24px;overflow:hidden;float:left;margin-right:7px;margin-top:2px;border:2px solid #fff} 
 .profile_avatar img {width:24px;height:24px;object-fit:cover}

Yuri_Geruk,
Меню профиля встало нормально! но проблема появилась другая!  когда на вожу на само меню то я не могу нажать что там написано и оно пропадает.
Sheldon,
Вы не все удалили, вот это так же удалить http://joxi.ru/Q2KznRyTLQOQNm после сохранить, очистить кеш в браузере и будет как нужно и будете успевать наводить.
Yuri_Geruk,
Понял! ну а где найти подобный профиль можно? Чтобы все работало!
Yuri_Geruk,

Я нашел рабочий Мини Профиль! Но там нет "Добавить новость" как это можно сделать? чтобы обычный пользователь мог добавлять новость на сайт!

Вот как тут:

Sheldon,
В списке где ссылки у вас в профиле, добавьте ссылку на добавление новости /news/0-0-0-0-1
Yuri_Geruk,

Мне надо сюда добавить чтобы видно было название "Добавить материал" и чтобы другие люди добавляли материал на сайт.

Sheldon,

Смотрите свой код профиля, ищите там ссылки пользователи, настройки и прочее и там добавьте ссылку 

<a href="/news/0-0-0-0-1">Добавить материал</a>

Yuri_Geruk,
Спасибо большое! Все работает
...