Question

Всем привет!Проблема в следующем.Поставил на сайт 2 кнопки скачать на CSS.Одна постоянно в работе а другую добавляю когда нужна через html (при добавлении материала).Решил немношко поправить расположение элементов (перетащить рейтинг в другое место и все начинает смещатся).Что нужно (чтоб кнопки стали в расположении по горизонту "скачать" с лева а "скачать кэш" с права.В каталоге файлов,на даный момент скачать кэш с верху а скачать с низу.Вот скрипты кнопок в CSS:

/* downloads v demo androidexpo.at.ua */
#down-wrap,#demo-wrap {position:relative;text-align:left;padding:5px;float:left;margin:1px 340px 1px 1px;width:230px;height:50px;display:block;text-decoration:none;-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);}
span.btn-title{color:#fff;text-align:center;font:30px/58px Tahoma, Arial, sans-serif;height:50px;width:230px;display:block;position:relative;background: #0095cd;background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));background: -moz-linear-gradient(top, #00adee, #0078a5);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;z-index:5;line-height:50px;-webkit-transition:width .2s ease-out;-moz-transition:width .2s ease-out;-o-transition:width .2s ease-out;}
#down-wrap:hover span.btn-title,#demo-wrap:hover span.btn-title {font-size:19px;width:135px;background: #007ead;background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));background: -moz-linear-gradient(top, #0095cc, #00678e);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');-webkit-box-shadow: 1px 0px 0 #00678E, 0 1px 1px #0095CC;-moz-box-shadow: 1px 0px 0 #00678E, 0 1px 1px #0095CC;box-shadow:1px 0px 0 #00678E,0 1px 1px #0095CC;}
.btn-info {position:absolute;height:50px;width:230px;top:5px;right:4px;-webkit-box-shadow: 0 -1px 0 #00678E, 0 1px 1px #0095CC;-moz-box-shadow: 0 -1px 0 #00678E, 0 1px 1px #0095CC;box-shadow: 0 -1px 0 #00678E, 0 1px 1px #0095CC;background: #0095cd;background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));background: -moz-linear-gradient(top, #0078a5, #00adee);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;z-index:4;}
.btn-info span {width:70px;margin:12px 12px 0 0;position:absolute;right:0;color:#EAF5FF;font:11px/12px Tahoma, Arial, sans-serif;text-align:left;}
#back-top {position: fixed;z-index:100;bottom: 30px;right: 10px;}
/* downloads cache */
#down-cache,#demo-cache {position:relative;text-align:left;padding:5px;float:left;margin:1px 10px 1px 1px;width:230px;height:50px;display:block;text-decoration:none;-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);}
span.btn-title{color:#fff;text-align:center;font:30px/58px Tahoma, Arial, sans-serif;height:50px;width:230px;display:block;position:relative;background: #0095cd;background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));background: -moz-linear-gradient(top, #00adee, #0078a5);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;z-index:5;line-height:50px;-webkit-transition:width .2s ease-out;-moz-transition:width .2s ease-out;-o-transition:width .2s ease-out;}
#down-cache:hover span.btn-title,#demo-cache:hover span.btn-title {font-size:19px;width:135px;background: #007ead;background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));background: -moz-linear-gradient(top, #0095cc, #00678e);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');-webkit-box-shadow: 1px 0px 0 #00678E, 0 1px 1px #0095CC;-moz-box-shadow: 1px 0px 0 #00678E, 0 1px 1px #0095CC;box-shadow:1px 0px 0 #00678E,0 1px 1px #0095CC;}
.btn-info {position:absolute;height:50px;width:230px;top:5px;right:4px;-webkit-box-shadow: 0 -1px 0 #00678E, 0 1px 1px #0095CC;-moz-box-shadow: 0 -1px 0 #00678E, 0 1px 1px #0095CC;box-shadow: 0 -1px 0 #00678E, 0 1px 1px #0095CC;background: #0095cd;background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));background: -moz-linear-gradient(top, #0078a5, #00adee);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;z-index:4;}
.btn-info span {width:70px;margin:12px 12px 0 0;position:absolute;right:0;color:#EAF5FF;font:11px/12px Tahoma, Arial, sans-serif;text-align:left;}
#back-top {position: fixed;z-index:100;bottom: 30px;right: 10px;}  

Вот то что в сам сайт: <div style="text-align: center;"><a href="$RFILE_URL$" title="Скачать с Яндекс Диск: $TITLE$" id="down-wrap"><span class="btn-title">Скачать</span>
<span class="btn-info"><span>Размер: ($RFILE_SIZE$)</span></span></a></div>

другая аналогичная только id другой изменил.

Comments

Дайте конкретную ссылку...

---

Если уберу звезды с белого фона то все косяком стает http://androidexpo.ru/load/android_game/android_game_sports/fifa_15_ultimate_team/11-1-0-800

Answer 1

Пробробуйте заключить кнопки в div и прописать к ним следующие стили

<div style="float:left;">ЛЕВАЯ КНОПКА</div>

<div style="float:right;display:inline;">ПРАВАЯ КНОПКА</div>

 

Comments

Спасибо!Попробую.Но немношко не то,нужно будет кучку страниц перелепить=)Думал в CSS перелепить что б там не переделывать.В CSS поменял местами но блин вторая та что правая становится собака не в блоке котором указал и сделал а поза ним=(

---

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