Программирование
6 • Посмотреть все темы

Где косяк?

1410

Антон @tonik

08.06.2013

Здравствуйте!

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

20090

Dimitry

@Dimitry

08.06.2013

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

1410

Антон @tonik

08.06.2013

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

08.06.2013

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

Отредактировано Trilby - 08.06.2013

1410

Антон @tonik

08.06.2013

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

08.06.2013

#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

Dim @Render

08.06.2013

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

8497

Степан @Trilby

08.06.2013

Render пишет:

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

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

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

1410

Антон @tonik

08.06.2013

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

В Опера:

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

7094

Dim @Render

08.06.2013

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

08.06.2013

Спасибо Дмитрий!
Помогло!

1410

Антон @tonik

08.06.2013

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

**********

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

Отредактировано tonik - 08.06.2013

1410

Антон @tonik

08.06.2013

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

20090

Dimitry

@Dimitry

08.06.2013

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

2615

Сергей @Pegass

08.06.2013

Dimitry пишет:

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

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

8497

Степан @Trilby

09.06.2013

кхм...

1410

Антон @tonik

09.06.2013

Dimitry пишет:

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

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