ОсновноеRadiotalkПользовательское
Программирование
6   •   Посмотреть все темы

Где косяк?

 

1410
Антон @tonik
Здравствуйте!

CSS:

display:block;
padding:5px;
-o-border-radius: 3px;
border-radius: 3px;
-moz-border-radius: 3px;
margin:5px;
font-size:13px;
color:#ffffff;

В GС, IE, FF отображается нормально:



В Опера:



Где собака порылась?

Отредактировано tonik - 08.06.2013
20089
Dimitry @Dimitry
а причём тут этот стиль, надо глубже копать)

1410
Антон @tonik
Dimitry пишет:

а причём тут этот стиль, надо глубже копать)

Вот весь код стиля:

body,html {
background: #000 url(images/bg1.png) no-repeat center top;
width:100%;
height:100%;
padding:0px;
margin:0px;
font-family: Cuprum;
display: table;
overflow:hidden;
}
@font-face {
font-family: Cuprum;
src: local("Cuprum"),
url(font/cuprum.ttf);
}
.panel {
position:fixed;
bottom:0%;
background-color: #F6F6F6;
background:rgba(0, 0, 0, 0.115);
background-image: -moz-linear-gradient(top, #F6F6F6, #E0E0E0);
background-image: -ms-linear-gradient(top, #F6F6F6, #E0E0E0);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#F6F6F6), to(#E0E0E0));
background-image: -webkit-linear-gradient(top, #F6F6F6, #E0E0E0);
background-image: -o-linear-gradient(top, #F6F6F6, #E0E0E0);
background-image: linear-gradient(top, #F6F6F6, #E0E0E0);
background-repeat: repeat-x;
border-top: 1px solid #cfcfcf;
width:100%;
height:40px;
}
.panel #logo {
background-color: ##CFCFCF;
background-image: -moz-linear-gradient(top, #CFCFCF, #8D8D8D);
background-image: -ms-linear-gradient(top, #CFCFCF, #8D8D8D);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#CFCFCF), to(#8D8D8D));
background-image: -webkit-linear-gradient(top, #CFCFCF, #8D8D8D);
background-image: -o-linear-gradient(top, #CFCFCF, #8D8D8D);
background-image: linear-gradient(top, #CFCFCF, #8D8D8D);
background-repeat: repeat-x;
border-left:1px solid #898989;
border-right:1px solid #898989;
padding:5px;
float: left;
margin-left:15px;
width:30px;
line-height:33px;
text-align:center;
color:#ffffff;
font-size: 25px;
text-shadow: 0 1px 0 #1A8AE3;
}
.panel #logo:hover, #logo:active, #logo:focus {
background-color: #727272;
background-image: -moz-linear-gradient(top, #727272, #424242);
background-image: -ms-linear-gradient(top, #727272, #424242);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#727272), to(#424242));
background-image: -webkit-linear-gradient(top, #727272, #424242);
background-image: -o-linear-gradient(top, #727272, #424242);
background-image: linear-gradient(top, #727272, #424242);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#727272', EndColorStr='#1a8ae3');
cursor: pointer;
}
.panel #log {
background-color: ##CFCFCF;
background-image: -moz-linear-gradient(top, #CFCFCF, #8D8D8D);
background-image: -ms-linear-gradient(top, #CFCFCF, #8D8D8D);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#CFCFCF), to(#8D8D8D));
background-image: -webkit-linear-gradient(top, #CFCFCF, #8D8D8D);
background-image: -o-linear-gradient(top, #CFCFCF, #8D8D8D);
background-image: linear-gradient(top, #CFCFCF, #8D8D8D);
background-repeat: repeat-x;
border-left:1px solid #898989;
border-right:1px solid #898989;
padding:5px;
float: right;
margin-right:15px;
width:75px;
line-height:33px;
text-align:center;
color:#ffffff;
font-size: 25px;
text-shadow: 0 1px 0 #1A8AE3;
}
.panel #log:hover, #log:active, #log:focus {
background-color: #727272;
background-image: -moz-linear-gradient(top, #727272, #424242);
background-image: -ms-linear-gradient(top, #727272, #424242);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#727272), to(#424242));
background-image: -webkit-linear-gradient(top, #727272, #424242);
background-image: -o-linear-gradient(top, #727272, #424242);
background-image: linear-gradient(top, #727272, #424242);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#727272', EndColorStr='#1a8ae3');
cursor: pointer;
}
.icon {
text-align: center;
padding:5px;
margin:10px;
float:left;
font-size:10px;
width:64px;
overflow:none;
}
.icon:hover {
background:#fff;
background:rgba(150, 150, 150, 0.38);
box-shadow: 0 1px 1px 1px rgba(0, 0, 0, .25);
border-radius:5px;
cursor:pointer;
}
.icon img {
display: block;
width:64px;
height:64px;
}
.icon #name {
text-shadow: 0 1px 0 #000;
font-family: Cuprum;
font-size:13px;
color:#fff;
}
#open {
display: table;
position:fixed;
background:rgba(150, 150, 150, 0.38);
width:400px;
height:400px;
padding:5px;
z-index:100;
bottom:41px;
-o-border-radius: 0px 8px 0px 0px;
border-radius: 0px 8px 0px 0px;
-moz-border-radius: 0px 8px 0px 0px;
border-top:1px solid #7A7A7A;
border-right:1px solid #7A7A7A;
}
#open .content01 {
display: table-cell;
vertical-align: top;
position:fixed;
padding:3px;
width:240px;
height:393px;
-o-border-radius: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
background:#ffffff;
box-shadow: 0 1px 1px 1px rgba(0, 0, 0, .25);
clear: both;
}
#open .content01 .search {
display: table;
position:fixed;
bottom:50px;
-o-border-radius: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
width:220px;
height:1px;
text-align:center;
padding:10px;
background:#cfcfcf;
}
#open .content01 .search input {
-o-border-radius: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
width:200px;
border:1px solid #bbb;
padding:5px;
}
#open .content01 .ic {
padding:5px;
margin:10px;
}
#open .content01 .ic:hover {
background:#fff;
background:rgba(150, 150, 150, 0.38);
box-shadow: 0 1px 1px 1px rgba(0, 0, 0, .25);
border-radius:5px;
cursor:pointer;
}
#open .content .ic #name {
text-shadow: 0 1px 0 #000;
font-family: Cuprum;
font-size:13px;
color:#fff;
}
#open .content02 {
display: table-cell;
vertical-align: top;
width: 147px;
padding:3px;
clear: both;
}
#open .content02 span {
display:block;
padding:5px;
-o-border-radius: 3px;
border-radius: 3px;
-moz-border-radius: 3px;
margin:5px;
font-size:13px;
color:#ffffff;
}
#open .content02 span:hover {
background:rgba(150, 150, 150, 0.38);
box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, .25);
-moz-box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, .25);
-webkit-box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, .25);
-khtml-box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, .25);
cursor:pointer;
width: auto;
}
#open .clear {
margin:5px;
border-bottom:1px solid #E8EBEE;
}
#open .clear2 {
margin:5px;
border-bottom:1px solid #cfcfcf;
}

Это html:

<div class="content02">
<span>Администратор</span>
<span>Игры</span>
<span>Компьютер</span>
<div class="clear"></div>
<span>Панель управления</span>
<span>Устройства и принтеры</span>
<span>Справка и поддержка</span>
</div>

Отредактировано tonik - 08.06.2013
8497
Степан @Trilby
Надо бы и html полностью кидать... А то там явно выдран кусок от большого кода. В css еще полно неиспользованных тегов, как минимум надо в <div id='open'>...</div> код выше запихнуть

Отредактировано Trilby - 08.06.2013
1410
Антон @tonik
Trilby пишет:

Надо бы и html полностью кидать... А то там явно выдран кусок от большого кода. В css еще полно неиспользованных тегов, как минимум надо в <div id='open'>...</div> код выше запихнуть

Полный html:

<!DOCTYPE html>
<html lang="ru">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script language="JavaScript">
function expandit(id){
obj = document.getElementById(id);
if (obj.style.display=="none") obj.style.display="";
else obj.style.display="none";
}
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

</head>
<body>

<div class="icon">
<img src="images/activate.png" />

<div id="name">Проверка скорости</div>
</div>

<div class="icon">
<img src="images/setting.png" />

<div id="name">Каталог дополнения</div>
</div>

<div class="icon">
<img src="images/plugin.png" />

<div id="name">Техническая поддержка</div>
</div>

<div class="icon">
<img src="images/update.png" />

<div id="name">Проверка обновления</div>
</div>

<div class="icon">
<img src="images/opera.png" />

<div id="name">Opera Software</div>
</div>

<div id="open" style="display:none;">
<div class="content01">
<div class="ic">
<div id="name">Opera Software</div>
</div>
<div class="clear2"></div>
<div class="ic">
<div id="name">Каталог дополнения</div>
</div>
<div class="ic">
<div id="name">Техническая поддержка</div>
</div>
<div class="ic">
<div id="name">Проверка обновления</div>
</div>
<div class="search">
<input type="text" placeholder="Найти программы и файлы..." />
</div>
</div>
<div class="content02">
<span>Администратор</span>
<span>Игры</span>
<span>Компьютер</span>
<div class="clear"></div>
<span>Панель управления</span>
<span>Устройства и принтеры</span>
<span>Справка и поддержка</span>
</div>
</div>

<div class="panel">
<div id="logo" onClick="expandit('open')"><img src="images/pusk.png" width="33px"/></div>

<div id="log">

<div id="idspclock1" style="text-align:center;"></div>
<script type="text/javascript">
$spclock1={
tmr: 0,
dubnums: function(i){
if(i.length==1) return '0'+i; else return i;
},

gettime: function(){
tm=new Date();
var h=new String(tm.getHours());
var m=new String(tm.getMinutes());
var s=new String(tm.getSeconds());
var st=this.dubnums(h);
st+=':'+this.dubnums(m);
st+=':'+this.dubnums(s);
return st;
},

timeit: function(){
window.clearTimeout(this.tmr);
document.getElementById('idspclock1').innerHTML=this.gettime();
this.tmr=window.setTimeout('$spclock1.timeit();',1000);
},

ready: function(){
this.timeit();
}
}

$spclock1.ready();
// -->
</script>
</div>
</div>

</body>
</html>

8497
Степан @Trilby
#open .content02 span {
display:block;
padding:5px;
-o-border-radius: 3px;
border-radius: 3px;
-moz-border-radius: 3px;
margin:5px;
font-size:13px;
color:#ffffff;
margin-left: 255px;
width: 120px;
}

#open .content02 span:hover {
background:rgba(150, 150, 150, 0.38);
box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, .25);
-moz-box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, .25);
-webkit-box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, .25);
-khtml-box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, .25);
cursor:pointer;
margin-left: 255px;
width: 120px;
}

Нужно было просто задать ширину и сдвинуть оба блока вправо (margin-left: 255px; width: 120px;)...
Все прекрасно отслеживается в "Инспекторе" Оперы

7094
--- @Render
Ещё, как вариант для #open .content02 span добавить:
text-align:right;

8497
Степан @Trilby
Render пишет:

Ещё, как вариант для #open .content02 span добавить:
text-align:right;

Зачем?! text-align меняет положение текста в блоке, а не самого блока. Надо именно так, как выше я сказал.

И если уже говорить про грамотное расположение content02 (без извращений с margin), то нужно было его изначально верстать как block, а не как ячейку (table-cell)...
А тут сделали из блоков ТАБЛИЦУ и верстают в ней.. Бред же.

1410
Антон @tonik
Извините, ещё спрошу (:
Во всех браузерах:



В Опера:



Я так понимаю, у меня там всё косо...

7094
--- @Render
tonik,
#open {
display: table;
position:fixed;
background:rgba(150, 150, 150, 0.38);
width:400px;
height:400px;
padding:1px;
margin:0 0 10px;
z-index:100;
bottom:41px;
-o-border-radius: 0px 8px 0px 0px;
border-radius: 0px 8px 0px 0px;
-moz-border-radius: 0px 8px 0px 0px;
border-top:1px solid #7A7A7A;
border-right:1px solid #7A7A7A;
}

1410
Антон @tonik
Спасибо Дмитрий!
Помогло!

1410
Антон @tonik
Спасибо! (:
Может кому пригодится шаблон слеланный всем миром ((:



**********

Ещё бы кто из знающих JS добавил бы функцию перетаскивания ярлыков с запоминанием в куках... было бы отлично (:

Отредактировано tonik - 08.06.2013
1410
Антон @tonik
Хочется максимально приблизить его к винде...
Если у кого есть информация по окнам, допустим, и т.п. поделитесь, если не лень (:

20089
Dimitry @Dimitry
А для чего это нужно?

2615
Сергей @Pegass
Dimitry пишет:

А для чего это нужно?

зарегистрируйся как вебмастер в юкоз и узнаешь)

8497
Степан @Trilby
кхм...

1410
Антон @tonik
Dimitry пишет:

А для чего это нужно?

Да пофиг зачем, просто самому интересно (: