CSS: решение вопросов - Страница 37

Сообщение # 547 | 17:42:52 01 Сен 2012

здравствуйте ,нашел в интеренете выпадающее меню ,настроил его под сайт ,но появился вопрос как в это же меню добавить элементы (мой профиль , поиск, и ЛС но не в левом углу(рядом со всеми категориями) а в правом углу
вот CSS и код меню

Code

/* == 10. Horizontal menu Background == */

/*====================
  Color Scheme Begin
=====================================================================
====================================================================*/
/* Menu bar background color */
#navigation,
#nav li ul li,
#nav li ul li a{
background: #000;
}

/* Menu Item text color */
#nav li a,
#nav li a:hover,
#nav li ul li,
#nav li ul li a,
#nav li ul li a:hover {
color: #fff;
}

/* Menu Item background color on hover */
#nav li a:hover,
#nav li ul li a:hover {
background: #90caf3;
}

/* Text Shadow */
#nav li a,
#nav li a:hover,
#nav li ul li a:hover {
text-shadow: 0 1px 1px #333;
}

/* Search form colors */
.searchform input, .searchform input:not(:focus){
color:#B1B1B1; /*search form text color default*/
background: #fff; /*search form background color default*/
}
.searchfield:focus{
color: #6FA7A9; /* search form text color after click */
}

/*=====================================================================
=======================================================================
  Color Scheme End
====================*/

#menu_div{
clear: both;
position: relative;
top: 0;
left: 0;
} /* Free space to top specialy for menu */

#navigation {
position: fixed;
}

#navigation, #menu_div {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}

#menu_div, #navigation, #menu, #nav{
height: 35px; /* menu height */
}

#menu_div:hover,
#navigation:hover,
#nav li a:hover, #nav li ul a
{
opacity: 0.95;/* Menu transparency on mouse hover*/
}

#menu_div,
#navigation,
#nav li a,
#menu_div:not(:hover),
#navigation:not(:hover)
{
opacity: 0.8;/* Menu transparency on mouse out */
}

#menu {
width: 1700px;
margin:0 auto; /*center the menu*/
padding:0;
position: relative;
}

#nav{
width:1700px;
margin:0;
padding:0;
position: relative;
font-family: 'Arial', Helvetica, sans-serif;
}

#nav li a,#nav li {
float:left;
}

#nav li {
list-style:none;
position:relative;
}

#nav li a {
line-height: 35px;
padding:0 15px;
text-decoration:none;
margin:0;
font-size:12px;
font-weight:800;
text-transform:uppercase;
}

/*====================
  Submenu
=====================*/
#nav li ul {
display:none;
position:absolute;
left:0;
top:100%;
padding:0;
margin:0;
} /* hide submenu */

#nav li:hover > ul {
display:block;
} /* show submenu on hover */

#nav li ul li,#nav li ul li a {
float:none;
height: 30px; /* submenu item height */
min-width: 145px; /* submenu item minimal width */
line-height: 30px;
border-right: 0;
text-shadow: none;
display:block;
font-size:13px;
font-weight:700;
text-transform:inherit;
} /* Submenu item */

#nav li ul li {
_display:inline; /* for IE */
}

/* == 12. Sub-Sub Menu == */
#nav li ul li ul {
display:none;
}

#nav li ul li:hover ul {
left:100%;
top:0;
}

/*========================
  Transitions
========================*/

#nav li a:hover,
#nav li ul li a:hover {
-webkit-transition-property:color, background;
-webkit-transition-duration: 0.5s, 0.5s;
-webkit-transition-timing-function: linear, ease-out;
}

.searchfield:focus,
.searchfield:not(:focus){
-webkit-transition-property:width;
-webkit-transition-duration: 0.5s, 0.5s;
-webkit-transition-timing-function: linear, ease-out;
}

#menu_div:hover,
#navigation:hover,
#nav li ul a,
#menu_div,
#navigation,
#nav li a,
#menu_div:not(:hover),
#navigation:not(:hover)
{
-webkit-transition-property:opacity;
-webkit-transition-duration: 0.5s, 0.5s; /* duration in seconds */
-webkit-transition-timing-function: linear, ease-out;
} /* Menu transparency animation */

вот пример

Добавлено (01-Сен-2012, 17:42:43)
---------------------------------------------
снова здравствуйте ,в предыдущем сообщении я спрашивал

Quote

как в это же меню добавить элементы (мой профиль , поиск, и ЛС но не в левом углу(рядом со всеми категориями) а в правом углу

, частично я реши свой вопрос ,мне удалось поставить только форму поиска ,а вот профиль и ЛС нет , я делал форму поиска из меню,код и CSS которого будет ниже, (в нем так же есть ЛС и ПРОФИЛЬ )но при попытке поставить и их они съежали вниз и вправо ЛС (а профиль вообще "порвало на части" )помогите пожалуйста и их прикрепить
вот код и CSS меню из которого я вытаскивал элементы

Добавлено (01-Сен-2012, 17:42:52)
---------------------------------------------

Code

/* Верхняя панель для пользователей v.1.0
============================================================================*/
#top_bar {
   position:fixed;
   z-index:997;
   top:0;
   min-width:100%;
   height:35px;
   background: #353535;
   border-top: 1px solid #000;
   box-shadow: 0px 0px 5px #111;
}

#top_bar_os {
   padding:0px;
   width:1024px;
   height:35px;
   margin: 0px auto;
}

#top_bar_os a{
   text-decoration:none;
}

.td_l {
   float:left;
   padding:5px 10px 0px 10px;
   height:30px;
   background:url(http://www.center-dm.ru/ucoz/user_bar/v1/li_linia.gif) no-repeat right;
}

.td_p {
   float:right;
   height:35px;
   padding: 0px 0px 0px 0px;
   background:url(http://www.center-dm.ru/ucoz/user_bar/v1/li_linia.gif) no-repeat right;
}

/* Форма поиска синяя кнопка
------------------------------------------*/
.poick_os1 input {
   font:11px Verdana,Arial,Helvetica,sans-serif!important;
   margin:0px!important;
   vertical-align:middle!important;
}

.poick_pole1 {
   color:#a7a7a7!important; text-shadow: 1px 1px 1px #252525!important;
   padding:4px 4px!important;
   width:300px!important;
   height:15px!important;
   background:#484848!important;
   border: 1px solid #252525!important;
}

.poick_pole1:focus {
   background:#545454!important;
}

.poick_knopka1 {
   color:#bfbfbf!important; text-shadow: 1px 1px 1px #460953!important;
   padding: 0px 10px!important;
   height:25px!important;
   background: #1d367d!important;
   border: 1px solid #0c123b!important;
   cursor:pointer!important;
}

.poick_knopka1:hover {
   background:#3b3b97!important;
}

/* Выпадающее меню
------------------------------------------*/
.menu_p {
   display:block;
   position:relative;
}

.menu_p .drop {
   float:left;
   color:#66B427;
   text-shadow:1px 1px 1px #000;font-weight: 700;
   padding: 10px 17px 0px 10px;
   margin-right: 10px;
   background:url(http://www.center-dm.ru/ucoz/user_bar/v1/drop1.png) no-repeat right 15px;
}

.menu_p:hover .drop{
   background:url(http://www.center-dm.ru/ucoz/user_bar/v1/drop2.png) no-repeat right 15px;
   color:#2784b4;
}

.dd_ugol1,
.dd_menu {
   width:240px;
}

.dd_ugol2,
.dd_menu_p {
   width:300px;
}

.dd_menu,
.dd_menu_p {
   float:left;
   position:absolute;
   margin:0px auto;
   background:#4c4c4c;
   padding:5px;
   left:-999em;
   z-index:998;
   border:1px solid #111;
   -moz-border-radius:5px 5px 5px ;
   -webkit-border-radius:5px 5px 5px ;
   border-radius:5px 5px 5px ;
   box-shadow: 0px 0px 5px #111;
}

.menu_p:hover .dd_menu,
.menu_p:hover .dd_menu_p{
   top:40px;
   left:auto;
   right:0px;
}

.dd_ugol1,
.dd_ugol2 {
   height:25px;
   float:left;
   position:absolute;
   top: -25px;
   right: 25px;
   background:url(fon_ugol_1.png) no-repeat;
   background-position: right bottom;
}

.dd_ugol1 {right:2px!important;}
.dd_menu_os {width:218px;}
.mini_profil {width:278px;}

.dd_menu_os,
.mini_profil {
   overflow:hidden;
   background:#eee;
   border: 1px solid #353535;
   margin:0;
   padding:10px;
}

/* Вертикальное меню
------------------------------------------*/
.menu_top {
   margin:0;
   padding:0;
   list-style:none;
   overflow:hidden;
   width:238px;
   background:#eee;
   border: 1px solid #353535;
}

.menu_top li a:link,
.menu_top li a:visited {
   display:block;
   text-align:left;
   color:#555;
   width:100%;
   padding:4px 10px;
   border-bottom: 1px solid #d0d0d0;
   border-top: 1px solid #fff;
}

.menu_top li a:hover {
   background:#fff;
}

/* Мини профиль
------------------------------------------*/
.mini_avatar {
   width:35px;
   height:35px;
}

.mp_avatar {
   float:right;
   margin: 0px 0px 0px 0px;
   width:50px;
   height:50px;
   border: 3px solid #666;
}

.mp_info {
   float:left;
   margin:0;
   padding:5px;
   width:200px;
   list-style:none;
}

.mp_info a:link,
.mp_info a:visited{color:#2784b4; font-weight: bold;}
.mp_info a:hover {color:#66B427;}

.mp_info li {
   font: 10px Verdana,Arial,Helvetica, sans-serif;
   padding: 2px 0px;
   border-top: 1px solid #fff;
   border-bottom: 1px solid #B7B7B7;
}

.border_v {border-top:none!important;}
.border_n {border-bottom:none!important;}
.bold {font-weight: bold;}

/* Кнопки
------------------------------------------*/
.knopka_vxod:link,
.knopka_vxod:visited,
.knopka_reg:link,
.knopka_reg:visited {
   float:left;
   font-weight: bold;
   color:#66B427;
   text-shadow: 1px 1px 1px #000;
   padding: 10px 10px 0px 10px;
}

.knopka_vxod:hover,
.knopka_reg:hover {color:#2784b4;}

.knopka_pochta:link,
.knopka_pochta:visited{
   float:left;
   font-weight: bold;
   color:#2784b4;
   text-shadow: 1px 1px 1px #000;
   padding: 10px 10px 0px 10px;
}
.knopka_pochta:hover {color:#66B427;}

.knopka_vixod:link,
.knopka_vixod:visited{
   float:right;
   font: 9px Verdana,Arial,Helvetica, sans-serif;
   color:#F1EDED; text-shadow: 1px 1px 1px #000;
   background:#353535;
   padding: 2px 7px 3px 7px;
   margin: 5px 4px 0px 0px;
}
.knopka_vixod:hover {background:#444;}

Страница 37 из 111 « 1 2 … 35 36 37 38 39 … 110 111 »
Модератор форума: Yuri_G