Обучение/Помощь новичкам | #помощь по css
AI_Helper
http://art.morozovpimnev.ru/tag/css/
Вот сайт откуда брал код. Помогите установить чтоб полоска опыта также была? Пожалуйста
Вот код с сайта
@-webkit-keyframes progress-bar-stripes {
from {background-position: 40px 0;}
to {background-position: 0 0;}
}
@-o-keyframes progress-bar-stripes {
from {background-position: 40px 0;}
to {background-position: 0 0;}
}
@keyframes progress-bar-stripes {
from {background-position: 40px 0;}
to {background-position: 0 0;}
}
.progress {
height: 20px;
margin: 20px 0;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}
.progress-bar.active, .progress.active .progress-bar {
-webkit-animation: progress-bar-stripes 2s linear infinite;
-o-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
.progress-bar-striped, .progress-striped .progress-bar {
background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
-webkit-background-size: 40px 40px;
background-size: 40px 40px;
}
.progress-bar {
float: left;
width: 0;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background-color: #337ab7;
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
}
.progress-bar-success {background-color: #5cb85c;}
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">50%</div>
</div>
Вот мой код: это полоса опыта
.exp_in{
height: 7px;
margin: 7px 0;
overflow: hidden;
background: #f5f5f5;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}
}
.exp {
float: left;
width: 0;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background: #337ab7;
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
Вот сайт откуда брал код. Помогите установить чтоб полоска опыта также была? Пожалуйста
Вот код с сайта
@-webkit-keyframes progress-bar-stripes {
from {background-position: 40px 0;}
to {background-position: 0 0;}
}
@-o-keyframes progress-bar-stripes {
from {background-position: 40px 0;}
to {background-position: 0 0;}
}
@keyframes progress-bar-stripes {
from {background-position: 40px 0;}
to {background-position: 0 0;}
}
.progress {
height: 20px;
margin: 20px 0;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}
.progress-bar.active, .progress.active .progress-bar {
-webkit-animation: progress-bar-stripes 2s linear infinite;
-o-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
.progress-bar-striped, .progress-striped .progress-bar {
background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
-webkit-background-size: 40px 40px;
background-size: 40px 40px;
}
.progress-bar {
float: left;
width: 0;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background-color: #337ab7;
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
}
.progress-bar-success {background-color: #5cb85c;}
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">50%</div>
</div>
Вот мой код: это полоса опыта
.exp_in{
height: 7px;
margin: 7px 0;
overflow: hidden;
background: #f5f5f5;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}
}
.exp {
float: left;
width: 0;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background: #337ab7;
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
Так есть вроде html тег для этого
hellooo 
подключи bootstrap и спокойно юзай класс .progress
http://bootstrap-ru.com/components.php#progress
так в чем причина то?
Основной вот код
element.style {
width: 50%;
}
его отели и в шей в дрон и будет тебе счастье
Resident Evil Основной вот код
element.style {
width: 50%;
}
его отели и в шей в дрон и будет тебе счастье
короче ставишь ксс стиль в свой и там где нужно этот код
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: '.твой код числа процентов.'%;">50%</div>
</div>
тут заменишь на свой код из вывода подсчета ну к примеру у тебя стоит числавая альта
style="width: '.твой код числа процентов.'%;">
типа
style="width: '.$opyt.'%;">
$opyt = 'число выводимая либо с базы либо из функции';
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: '.твой код числа процентов.'%;">50%</div>
</div>
тут заменишь на свой код из вывода подсчета ну к примеру у тебя стоит числавая альта
style="width: '.твой код числа процентов.'%;">
типа
style="width: '.$opyt.'%;">
$opyt = 'число выводимая либо с базы либо из функции';
ах да чуть не забыл, чтобы процент выводился правильно
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: '.твой код числа процентов.'%;">'.твой код числа процентов.'%</div>
</div>
________
посл. ред. 13.01.2017 в 06:28; всего 1 раз(а); by Resident Evil
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: '.твой код числа процентов.'%;">'.твой код числа процентов.'%</div>
</div>
________
посл. ред. 13.01.2017 в 06:28; всего 1 раз(а); by Resident Evil
Resident Evil , я в этом не шарю. Помоги ты
TheAnd (13.01.2017 в 06:29)
Resident Evil , я в этом не шарю. Помоги ты
Resident Evil , я в этом не шарю. Помоги ты
а что тут сложного, тот css что ты написал копируешь от туда и в свой ксс ставишь, далее тот код что я написал ставишь где надо, далее просто '.твой код числа процентов.' заменяешь на свой, к примеру у тебя я так понел игра, так вот гдетоже есть у тебя вывод сколько опыта и он меняется так вот запрос к базе и сам код пропиши, базу выше вывода шкалы и вместо '.твой код числа процентов.' пропиши свой вывод процентов, к примеру типа так
'.твой код числа процентов.'
$opyt = mysql_result(mysql_query("SELECT SUM(`opyt`) FROM `id`;"), 0);
echo '<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: '.$opyt.'%;">'.$opyt.'%</div>
</div>';
Resident Evil , я чкт в этом коде не найду такого.
body {
color: #316c6c;
font-size: 14px;
max-width : 450px;
margin : auto;
font-family: "Comic Sans MS", Myriad Pro, Arial, Helvetica, Tahoma, sans-serif;
background: #092625;
}
div img,h1 img,h2 img,a img,span img,img {
vertical-align:middle;
}
div,h1,h2,h3,h4{
padding:0;
}
a:link,
a:active,
a:visited {
color: #9edcdb;
text-decoration: none;
}
a:hover,
a:focus {
color: #9edcdb;
}
ul,li {
list-style:none;
margin:0;
padding:0;
}
h1{
font-size:120%;
font-weight:bold;
color:#FFFFFF;
padding:2px 0;
}
h2{
font-size: 110%;
font-weight:bold;
color:#FFFFFF;
padding:2px 0;
}
em{
font-style:normal;
}
table {
font-size: 14px;
}
div.main {
background:rgb(36, 36, 40);
border: 1px solid #27383b;
padding: 0px;
border-radius:0px;
}
h1{
font-size:120%;
font-weight:normal;
color:#FFFFFF;
padding:0;
}
h2{
font-size: 105%;
font-weight:normal;
color:#FFFFFF;
}
table {
border-collapse:collapse;
}
table.bordered td {
border: 1px solid burlywood;
}
.maps {
font-size: 5pt;
border: 1px outset gray;
border-collapse: separate;
background-color: gray;
}
.collect img {
width:320px;
padding: 5px;
color: #316c6c;
margin: 0px;
}
ul.help {
list-style:circle;
}
#but{
width:98%;
background:#330000;
font-weight:bold;
cursor:pointer;
color:#ffffff
}
ul.help li {
list-style:circle;
margin-left:16px;
}
.small{
font-size:80%;
}
.white {
color:white;
}
.lime {
color:lime;
}
.health {
color:#FF9999;
}
.notify {
color:#FFF559;
}
.fonred {
color:#3d1e1e;
}
.energy {
color:#9999FF;
}
.money {
color:#CC9900;
}
.minor {
color:gray;
}
.minor a{
color:#8a8a8a;
}
.major {
color:#DD6666;
}
.info {
color:#6FCD72;
}
img {
vertical-align: middle;
max-width : 340px;
}
h1, h2 {
margin: 0px;
font-size: 16px;
font-weight: normal;
color: #BFC196;
text-align: center;
}
h2 {
font-size: 14px;
}
hr {
border: none;
border-bottom: 1px solid #296494;
width: 80%;
}
a {
text-decoration: none;
color: #FFDF8C;
}
h1 {
margin: 0;
padding: 3px;
font-weight: normal;
color: #BFC196;
text-align: center;
font-size: 14px;
}
.title {
text-align: center;
background:
url(images/left.png) left top no-repeat,
url(images/right.png) right top no-repeat,
url(images/topdiv.png) left top repeat-x;
color: #9edcb5;
padding: 12px;
}
.footer {
background: url(images/left.png) left top no-repeat,
url(images/right.png) right top no-repeat,
url(images/topdiv.png) left top repeat-x;
color: #9edcb5;
padding: 12px;}
.block {
text-shadow: 0 1px 0px #000;
background-color: #041514;
padding: 9px;
color: #316c6c;
border-radius: 2px;
margin: 5px;
border-top: 1px solid #183433;
border-bottom: 1px solid #2b6462;}
.center {
text-align: center;
}
.small {
font-size: 10px;
}
.stone {
background: url(images/razdel.png) no-repeat top center;
height: 24px;
text-align: center;
}
a.btn-blue{
display:block;
padding:10px 15px 10px 15px;
text-decoration:none;
background-color:#0a2928;
border-top: 1px solid #307b77;
border-bottom: 1px solid #041715;
border-radius: 2px;
padding: 5px;
margin: 1px;
color: #9edcdb;
}
a:hover.btn-blue{
text-decoration: none;
background-color:#0a2928;
border-top: 1px solid #307b77;
border-bottom: 1px solid #041715;
border-radius: 2px;
color:#ffffff
}
a.link {
background:url(images/imageleft.png) no-repeat top left,
url(images/imageright.png) no-repeat top right,
url(images/imager.png) bottom repeat-x;
background-color:#0a2928;
border-top: 1px solid #307b77;
border-bottom: 1px solid #041715;
border-radius: 2px;
font-size:12px;
padding: 0px 0px 0px 9px;
margin-left:3px;
display: block;
color: #9edcdb;
text-decoration:none !important;
height:33px;
line-height:33px !important;
}
a:hover.link {
background:url(images/imageleft.png) no-repeat top left,
url(images/imageright.png) no-repeat top right,
url(images/imager.png) bottom repeat-x;
background-color:#0a2928;
border-top: 1px solid #307b77;
border-bottom: 1px solid #041715;
border-radius: 2px;
font-size:12px;
margin-left:3px;
padding: 0px 0px 0px 9px;
display: block;
color: #d0e3f7;
text-decoration:none !important;
height:33px;
line-height:33px !important;
}
a.link_no {
background:url(images/imageleft.png) no-repeat top left,
url(images/imageright.png) no-repeat top right,
url(images/imager.png) bottom repeat-x;
background-color:#0a2928;
border-top: 1px solid #307b77;
border-bottom: 1px solid #041715;
border-radius: 2px;
font-size:12px;
margin-left:3px;
padding: 0px 0px 0px 9px;
display: block;
color: #666;
text-decoration:none !important;
height:33px;
line-height:33px !important;
}
a:hover.link_no {
background:url(images/imageleft.png) no-repeat top left,
url(images/imageright.png) no-repeat top right,
url(images/imager.png) bottom repeat-x;
background-color:#0a2928;
border-top: 1px solid #307b77;
border-bottom: 1px solid #041715;
border-radius: 2px;
font-size:12px;
margin-left:3px;
padding: 0px 0px 0px 9px;
display: block;
color: #333;
text-decoration:none !important;
height:33px;
line-height:33px !important;
}
a.gold {
text-decoration: none;
display: block;
padding: 7px 5px 5px 5px;
border-radius:10px;
min-height: 16px;
border: none;
border-bottom: 2px solid #06101F;
border-style: none none solid;
border-color: -moz-use-text-color -moz-use-text-color #162522;
background: #0a2928;
}
.btn {
position: relative;
border: 1px solid #307b77;
color: rgb(198, 222, 221);
background-color: #051817;
margin: 2px;
margin-top: 4
body {
color: #316c6c;
font-size: 14px;
max-width : 450px;
margin : auto;
font-family: "Comic Sans MS", Myriad Pro, Arial, Helvetica, Tahoma, sans-serif;
background: #092625;
}
div img,h1 img,h2 img,a img,span img,img {
vertical-align:middle;
}
div,h1,h2,h3,h4{
padding:0;
}
a:link,
a:active,
a:visited {
color: #9edcdb;
text-decoration: none;
}
a:hover,
a:focus {
color: #9edcdb;
}
ul,li {
list-style:none;
margin:0;
padding:0;
}
h1{
font-size:120%;
font-weight:bold;
color:#FFFFFF;
padding:2px 0;
}
h2{
font-size: 110%;
font-weight:bold;
color:#FFFFFF;
padding:2px 0;
}
em{
font-style:normal;
}
table {
font-size: 14px;
}
div.main {
background:rgb(36, 36, 40);
border: 1px solid #27383b;
padding: 0px;
border-radius:0px;
}
h1{
font-size:120%;
font-weight:normal;
color:#FFFFFF;
padding:0;
}
h2{
font-size: 105%;
font-weight:normal;
color:#FFFFFF;
}
table {
border-collapse:collapse;
}
table.bordered td {
border: 1px solid burlywood;
}
.maps {
font-size: 5pt;
border: 1px outset gray;
border-collapse: separate;
background-color: gray;
}
.collect img {
width:320px;
padding: 5px;
color: #316c6c;
margin: 0px;
}
ul.help {
list-style:circle;
}
#but{
width:98%;
background:#330000;
font-weight:bold;
cursor:pointer;
color:#ffffff
}
ul.help li {
list-style:circle;
margin-left:16px;
}
.small{
font-size:80%;
}
.white {
color:white;
}
.lime {
color:lime;
}
.health {
color:#FF9999;
}
.notify {
color:#FFF559;
}
.fonred {
color:#3d1e1e;
}
.energy {
color:#9999FF;
}
.money {
color:#CC9900;
}
.minor {
color:gray;
}
.minor a{
color:#8a8a8a;
}
.major {
color:#DD6666;
}
.info {
color:#6FCD72;
}
img {
vertical-align: middle;
max-width : 340px;
}
h1, h2 {
margin: 0px;
font-size: 16px;
font-weight: normal;
color: #BFC196;
text-align: center;
}
h2 {
font-size: 14px;
}
hr {
border: none;
border-bottom: 1px solid #296494;
width: 80%;
}
a {
text-decoration: none;
color: #FFDF8C;
}
h1 {
margin: 0;
padding: 3px;
font-weight: normal;
color: #BFC196;
text-align: center;
font-size: 14px;
}
.title {
text-align: center;
background:
url(images/left.png) left top no-repeat,
url(images/right.png) right top no-repeat,
url(images/topdiv.png) left top repeat-x;
color: #9edcb5;
padding: 12px;
}
.footer {
background: url(images/left.png) left top no-repeat,
url(images/right.png) right top no-repeat,
url(images/topdiv.png) left top repeat-x;
color: #9edcb5;
padding: 12px;}
.block {
text-shadow: 0 1px 0px #000;
background-color: #041514;
padding: 9px;
color: #316c6c;
border-radius: 2px;
margin: 5px;
border-top: 1px solid #183433;
border-bottom: 1px solid #2b6462;}
.center {
text-align: center;
}
.small {
font-size: 10px;
}
.stone {
background: url(images/razdel.png) no-repeat top center;
height: 24px;
text-align: center;
}
a.btn-blue{
display:block;
padding:10px 15px 10px 15px;
text-decoration:none;
background-color:#0a2928;
border-top: 1px solid #307b77;
border-bottom: 1px solid #041715;
border-radius: 2px;
padding: 5px;
margin: 1px;
color: #9edcdb;
}
a:hover.btn-blue{
text-decoration: none;
background-color:#0a2928;
border-top: 1px solid #307b77;
border-bottom: 1px solid #041715;
border-radius: 2px;
color:#ffffff
}
a.link {
background:url(images/imageleft.png) no-repeat top left,
url(images/imageright.png) no-repeat top right,
url(images/imager.png) bottom repeat-x;
background-color:#0a2928;
border-top: 1px solid #307b77;
border-bottom: 1px solid #041715;
border-radius: 2px;
font-size:12px;
padding: 0px 0px 0px 9px;
margin-left:3px;
display: block;
color: #9edcdb;
text-decoration:none !important;
height:33px;
line-height:33px !important;
}
a:hover.link {
background:url(images/imageleft.png) no-repeat top left,
url(images/imageright.png) no-repeat top right,
url(images/imager.png) bottom repeat-x;
background-color:#0a2928;
border-top: 1px solid #307b77;
border-bottom: 1px solid #041715;
border-radius: 2px;
font-size:12px;
margin-left:3px;
padding: 0px 0px 0px 9px;
display: block;
color: #d0e3f7;
text-decoration:none !important;
height:33px;
line-height:33px !important;
}
a.link_no {
background:url(images/imageleft.png) no-repeat top left,
url(images/imageright.png) no-repeat top right,
url(images/imager.png) bottom repeat-x;
background-color:#0a2928;
border-top: 1px solid #307b77;
border-bottom: 1px solid #041715;
border-radius: 2px;
font-size:12px;
margin-left:3px;
padding: 0px 0px 0px 9px;
display: block;
color: #666;
text-decoration:none !important;
height:33px;
line-height:33px !important;
}
a:hover.link_no {
background:url(images/imageleft.png) no-repeat top left,
url(images/imageright.png) no-repeat top right,
url(images/imager.png) bottom repeat-x;
background-color:#0a2928;
border-top: 1px solid #307b77;
border-bottom: 1px solid #041715;
border-radius: 2px;
font-size:12px;
margin-left:3px;
padding: 0px 0px 0px 9px;
display: block;
color: #333;
text-decoration:none !important;
height:33px;
line-height:33px !important;
}
a.gold {
text-decoration: none;
display: block;
padding: 7px 5px 5px 5px;
border-radius:10px;
min-height: 16px;
border: none;
border-bottom: 2px solid #06101F;
border-style: none none solid;
border-color: -moz-use-text-color -moz-use-text-color #162522;
background: #0a2928;
}
.btn {
position: relative;
border: 1px solid #307b77;
color: rgb(198, 222, 221);
background-color: #051817;
margin: 2px;
margin-top: 4
$isset = mysql_query("SELECT * FROM `от куда берем инфу` WHERE `id` = '".$id."'");
switch($act)
{
case 'opyt':
for($opyt = 0; $opyt< 100; $opyt++)
{
$start_time = mktime($opyt, 0, 0, date("m"), date("d"), date("Y"));
$finish_time = mktime($hour+1, 0, 0, date("m"), date("d"), date("Y"));
$opyt = mysql_num_rows(mysql_query("SELECT * FROM `от куда берем инфу` WHERE `time` BETWEEN '".$start_time."' AND '".$finish_time."' AND `id` = '".$id."'"));
if($opyt > 0){
echo '<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: '.$opyt.'%;">'.$opyt.'%</div>
</div>';
}
}
break;
switch($act)
{
case 'opyt':
for($opyt = 0; $opyt< 100; $opyt++)
{
$start_time = mktime($opyt, 0, 0, date("m"), date("d"), date("Y"));
$finish_time = mktime($hour+1, 0, 0, date("m"), date("d"), date("Y"));
$opyt = mysql_num_rows(mysql_query("SELECT * FROM `от куда берем инфу` WHERE `time` BETWEEN '".$start_time."' AND '".$finish_time."' AND `id` = '".$id."'"));
if($opyt > 0){
echo '<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: '.$opyt.'%;">'.$opyt.'%</div>
</div>';
}
}
break;
Стр.: 1, 2