Joomla 1.5 Закруглённые края class="roundify"

Тема в разделе "Внешний вид, шаблоны, графика", создана пользователем Phoenix88, 24.01.2011.

  1. Phoenix88
    Offline

    Phoenix88 Недавно здесь

    Регистрация:
    23.01.2011
    Сообщения:
    49
    Симпатии:
    1
    Пол:
    Женский
    Помогите пожалуйста перепробовала ВСЁ не могу закруглить края div-a в İnternet Explorer..
    Самое интересное, что раньше делала сайт с DD_roundify работает во всех браузерах. Сейчас пробую точно также, ноль внимания на IE
    В этот раз не стала подключать js, воспольвзовалась стандартной библиотекой.

    <div id="content" class="roundify">

    и в CSS:
    .roundify
    {
    border-radius: 10px 0px 0px 10px;
    -khtml-border-radius:10px 0px 0px 10px;
    -webkit-border-radius: 10px 0px 0px 10px;
    -moz-border-radius: 10px 0px 0px 10px;
    }

    Работает везде, кроме всех İE

    И второй вопрос: в Опере почему-то на закруглённых краях оставляет белые углы. Как с этим бороться?
     
    Последнее редактирование: 25.01.2011
    Phoenix88, 24.01.2011
    #1

  2. Наши спонсоры

     
  3. woojin
    Offline

    woojin Местный Команда форума => Cпециалист <=

    Регистрация:
    31.05.2009
    Сообщения:
    3 206
    Симпатии:
    334
    Пол:
    Мужской
    естественно "ИШАЧИНА" вообще этих инструкций не понимает и как вариант может даже ошибку выдать
    либо используй JS либо по старинке при помощи 4-х <DIV>
     
    woojin, 24.01.2011
    #2
  4. Phoenix88
    Offline

    Phoenix88 Недавно здесь

    Регистрация:
    23.01.2011
    Сообщения:
    49
    Симпатии:
    1
    Пол:
    Женский
    А скриптик Js можно попросить у Вас?)) :[ и инструкции к нему
     
    Последнее редактирование: 25.01.2011
    Phoenix88, 24.01.2011
    #3
  5. Phoenix88
    Offline

    Phoenix88 Недавно здесь

    Регистрация:
    23.01.2011
    Сообщения:
    49
    Симпатии:
    1
    Пол:
    Женский
    у меня что то с İE.. http://www.aimweb.ru/border/ Зашла на сайт - на нем тоже не показывает закругл. углы.. Что это может быть? İE tester работает в том же режиме что и İE
     
    Последнее редактирование: 25.01.2011
    Phoenix88, 24.01.2011
    #4
  6. woojin
    Offline

    woojin Местный Команда форума => Cпециалист <=

    Регистрация:
    31.05.2009
    Сообщения:
    3 206
    Симпатии:
    334
    Пол:
    Мужской
    я где это возьсу, если ты сама раньше с ним делала, он должен быть у тебя

    я углы при помощи DIV'ов закругляю
     
    woojin, 24.01.2011
    #5
  7. Phoenix88
    Offline

    Phoenix88 Недавно здесь

    Регистрация:
    23.01.2011
    Сообщения:
    49
    Симпатии:
    1
    Пол:
    Женский
    да есть.. скинула во вложения..
    режешь картинками с 3 частей?
    мороки ещё больше + проблема с прозрачностью в Ие6
     

    Вложения:

    Phoenix88, 24.01.2011
    #6
  8. woojin
    Offline

    woojin Местный Команда форума => Cпециалист <=

    Регистрация:
    31.05.2009
    Сообщения:
    3 206
    Симпатии:
    334
    Пол:
    Мужской
    в нём всегда была проблема с прозрачностью
    ну дык вот если есть этот скрипт почему бы им сейчас не воспользоваться?
    ну а вот ссылка на исправление косяка прозрачности Medicine for your IE6/PNG headache! (между прочим тот же производитель DD_belated);)

    пользуйся!!!
     
    woojin, 25.01.2011
    #7
  9. Phoenix88
    Offline

    Phoenix88 Недавно здесь

    Регистрация:
    23.01.2011
    Сообщения:
    49
    Симпатии:
    1
    Пол:
    Женский
    Я бы с удовольствием воспользовалась им и сейчас но не могу почему-то в ИЕ не видит и его тоже. не могу найти где делаю ошибку. Надо ли кроме Белайвос как то подключаться в индексе?
     
    Последнее редактирование: 25.01.2011
    Phoenix88, 25.01.2011
    #8
  10. Phoenix88
    Offline

    Phoenix88 Недавно здесь

    Регистрация:
    23.01.2011
    Сообщения:
    49
    Симпатии:
    1
    Пол:
    Женский
    Подключила DD_roundies_0.0.2a.js

    Код (CODE):
    1. <script src="DD_roundies_0.0.2a.js" type="text/javascript"></script>
    2.  
    3. <script type="text/javascript">
    4.   DD_roundies.addRule('.roundify', '10px');
    5. </script>


    Удачно закруглил один угол... Начались проблемы из-за scroll.
    Выносит края scroll на бордер и не округляет их
     

    Вложения:

    • aaa.png
      aaa.png
      Размер файла:
      116.7 КБ
      Просмотров:
      9
    • tak doljno bit.png
      tak doljno bit.png
      Размер файла:
      108.6 КБ
      Просмотров:
      6
    Последнее редактирование: 25.01.2011
    Phoenix88, 25.01.2011
    #9
  11. Phoenix88
    Offline

    Phoenix88 Недавно здесь

    Регистрация:
    23.01.2011
    Сообщения:
    49
    Симпатии:
    1
    Пол:
    Женский
    Проблему с İE решила. Использовала PİE

    Остаётся проблема с белыми углами в Опере. Спасибо
     
    Phoenix88, 25.01.2011
    #10
  12. woojin
    Offline

    woojin Местный Команда форума => Cпециалист <=

    Регистрация:
    31.05.2009
    Сообщения:
    3 206
    Симпатии:
    334
    Пол:
    Мужской
    да по твоему вопросу с углами сказать ничего определённо нельзя, надо видеть твой сайт
    к тому же ты уверена что у тебя там только один DIV, а не два, просто судя по системе подключения твоего скрипта он закругляет только один класс, а если их два, то второй у тебя не указан
     
    woojin, 26.01.2011
    #11
  13. Phoenix88
    Offline

    Phoenix88 Недавно здесь

    Регистрация:
    23.01.2011
    Сообщения:
    49
    Симпатии:
    1
    Пол:
    Женский
    Div который закругляется один. уверена.
    З закруглением разобралась. Осталась только проблема в Опере.
    Сайт на локалхосте, к сожалению.
    Напишу код и приложу скриншот:
    index.php

    Код (CODE):
    1. <?php
    2. defined('_JEXEC') or die('Restricted access');
    3. ?>
    4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
    6. <head>
    7. <jdoc:include type="head" />
    8. <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
    9. <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
    10. <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/oz1/css/style.css" type="text/css" />
    11. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    12. <script type="text/javascript" src="highslide/highslide/highslide.js"></script>
    13. <link rel="stylesheet" type="text/css" href="highslide/highslide/highslide.css" />
    14. <script type="text/javascript">
    15.     hs.graphicsDir = 'highslide/highslide/graphics/';
    16.     hs.wrapperClassName = 'wide-border';
    17. </script>
    18. </head>
    19.  
    20. <body>
    21. <div id="main">
    22.        <div id="menu1">
    23.        <jdoc:include type="modules" name="menu1" />      
    24.        </div>
    25.        <div id="logo"></div>
    26.        <div id="pixx">
    27.         <jdoc:include type="modules" name="slide" />
    28.         </div>
    29.        <div id="content" class="roundify">
    30.        <jdoc:include type="modules" name="content"   style="xhtml"/>
    31.        <jdoc:include type="component" />
    32.        </div>
    33.        </div>
    34. </div>
    35. </body>
    36. </html>


    style.css
    Код (CODE):
    1. body
    2. {
    3.     background-color: #2f3034;
    4.     margin: 0px;
    5.     padding: 0;
    6.     background-image: url("../images/bg1.png");
    7. }
    8.  
    9. #main
    10. {
    11.     width: 700px;
    12.     height: 665px;
    13.     margin-left: auto;
    14.     margin-right: auto;
    15.     margin-top: -10px;
    16.     *margin-top: 0px;
    17.     background: url("../images/bg.jpg") no-repeat;
    18.     border-right: 1px black dotted;
    19.     border-left: 1px black dotted;
    20.     -position: absolute;
    21.     -left: 15%;
    22.     -width: 700px;
    23.     -border: none;
    24. }
    25. #menu1
    26. {
    27.     width: 740px;
    28.     height: 100px;
    29.     position: relative;
    30.     right: 45px;
    31. }
    32.  
    33. #menu1 ul li
    34. {
    35.     list-style: none;
    36.     display: inline;
    37. }
    38.  
    39. #menu1 ul li a
    40. {
    41.     display: block;
    42.     text-decoration: none;
    43.     color: #7B7B7C;
    44.     font-family: Myriad Pro;
    45.     font-size: 13pt;
    46.     width: 138px;
    47.     float: right;
    48.     text-align: center;
    49.     height: 55px;
    50.     padding-top: 15px;
    51. }
    52.  
    53. #menu1 ul li a:hover
    54. {
    55.     background-color: #F58120;
    56. }
    57.  
    58. #current a:link, #current a:visited {
    59.     text-decoration: none;
    60.     background-color: #F58120;
    61. }
    62.  
    63. #current a:hover {
    64.     text-decoration: none;
    65.     background-color: #F58120;
    66. }
    67.  
    68. #logo
    69. {
    70.     position: relative;
    71.     width: 950px;
    72.     height: 70px;
    73.     background-image: url("../images/logo.png");
    74.     background-repeat: no-repeat;
    75.     margin-left: 25px;
    76.     margin-top: 10px;
    77.     margin-bottom: 10px;
    78. }
    79.  
    80. #pixx
    81. {
    82.     width: 365px;
    83.     height: 278px;
    84.     position: relative;
    85.     background-color: #fbefe5;
    86.     float: left;
    87.     top: 5px;
    88.     border: 15px black solid;
    89.     overflow: hidden;
    90. }
    91.  
    92. #pixx p, #pixx a, #pixx span
    93. {
    94.     padding: 5px;
    95.     text-decoration: none;
    96. }
    97.  
    98. #pixx h3
    99. {
    100.     padding-left: 15px;
    101. }
    102.  
    103. #pixx h4
    104. {
    105.     font-size: 12pt;
    106.     text-align: center;
    107. }
    108.  
    109.  #pixx a
    110.  {
    111.     color: black;
    112.  }
    113.  
    114. .productPrice
    115. {
    116.     padding-left: 5px;
    117.     color: red;
    118. }
    119.  
    120. #pixx a:hover
    121. {
    122.     color:  #8F27B1;
    123. }
    124.  
    125. #content
    126. {
    127.     width: 265px;
    128.     height: 280px;
    129.     *height: 275px;
    130.     position: relative;
    131.     float: right;
    132.     top: -7px;
    133.     border-left: 20px #F58120 solid;
    134.     border-top: 20px #F58120 solid;
    135.     border-bottom: 20px #F58120 solid;
    136.     background-color: #fbefe5;
    137.     text-align: justify;
    138.     padding: 10px 10px 0px 10px;
    139.     *padding: 15px 10px 0px 10px;
    140.     overflow: scroll;
    141.     font-family: Myriad Pro;
    142.     font-size: 10pt;
    143. }
    144.  
    145. #content a
    146. {
    147.     color: black;
    148.     text-decoration: none;
    149. }
    150.  
    151. #content a:hover
    152. {
    153.     color:  #8F27B1;
    154. }
    155.  
    156.  
    157.  
    158. .roundify
    159. {
    160.     behavior: url(pie/PIE.htc);
    161.     -webkit-border-radius: 10px 0px 0px 10px;
    162.     -moz-border-radius: 10px 0px 0px 10px;
    163.     border-radius: 10px 0px 0px 10px;
    164. }
    165.  
    166. .search input.inputbox{
    167. background: silver;
    168. font-weight: bold;
    169. }
    170.  
    171. .search input.button{
    172.     font-family: Myriad Pro;
    173.     margin-left: 96px;
    174.     margin-top: 3px;
    175. }
    176.  
    177. #search_searchword{
    178.     width: 100px;
    179. }
    180.  
    181. .contentheading
    182. {
    183.     color: red;
    184.     font-weight: bold;
    185.     *padding-bottom: 8px;
    186. }
    187.  
    188. #content h3
    189. {
    190.     color: black;
    191.     font-size: 10pt;
    192.     text-decoration: underline;
    193. }
    194.  
    195. #menu1 li.parent.active a
    196. {
    197.     text-decoration: none;
    198.     background-color: #F58120;
    199. }
     

    Вложения:

    • opera.jpg
      opera.jpg
      Размер файла:
      42.7 КБ
      Просмотров:
      1
    Phoenix88, 26.01.2011
    #12
  14. woojin
    Offline

    woojin Местный Команда форума => Cпециалист <=

    Регистрация:
    31.05.2009
    Сообщения:
    3 206
    Симпатии:
    334
    Пол:
    Мужской
    если установить правильный сервер на локальную машину то можно и с локалки сервер в и-нет выпускать, к меня так сделано
    по другому ни чего сказать тоже не могу, извини!!!
     
    woojin, 26.01.2011
    #13
  15. Phoenix88
    Offline

    Phoenix88 Недавно здесь

    Регистрация:
    23.01.2011
    Сообщения:
    49
    Симпатии:
    1
    Пол:
    Женский
    USB Webserver у меня. А чем лучше пользоваться?
     
    Phoenix88, 26.01.2011
    #14
  16. woojin
    Offline

    woojin Местный Команда форума => Cпециалист <=

    Регистрация:
    31.05.2009
    Сообщения:
    3 206
    Симпатии:
    334
    Пол:
    Мужской
    XAMPP скачать отсюда Apache Friends
    кстати вышла новая версия apache 2.2.17 и под неё появилась новая сборка XAMPP 1.7.4
    качай устанавливай, между прочим этот сервак тоже можно таскать на флешке!!!

    сейчас глянул, там этой сборке вообще всё самое последнее стоит и apache и mysql и php
    т.е. последние версии все программных продуктов, КРУТОТА!!!!!!!!!!
     
    woojin, 26.01.2011
    #15
    Phoenix88 нравится это.
  17. Phoenix88
    Offline

    Phoenix88 Недавно здесь

    Регистрация:
    23.01.2011
    Сообщения:
    49
    Симпатии:
    1
    Пол:
    Женский
    Спасибки попробую
     
    Phoenix88, 26.01.2011
    #16
< Как поменять дизайн графического элемента и где его найти если его нет в папке image | Редактирование Морды сайта >

Поделиться этой страницей

Загрузка...