[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: возвращаясь к css3
Форум PHP программистов > Дизайн и верстка
cln2008
5.06.2010 - 13:17
Доброго времени суток всем !
Ну это не вопрос, а скорее интересует ваше мнение .... Столкнулся с задачей закругления углов рамки. Есть много решений (картинки, ЯваСкрипт, вложенные дивы и т.д.). Также есть решение и на CS3, где задача решается в "одну строку".
Поиск по гуглу дал, что CS3 поддерживают уже все основные браузеры, кроме ИЕ.
Обещают в ИЕ 9 реализовать поддержку.
Как вы думаете, есть смысл выполнять решения на CS3 или пытаться решить другими способами ?
Спасибо.




Спустя 7 минут, 12 секунд (5.06.2010 - 12:24) Basili4 написал(а):
Хочешь не хочешь а багогенератор используют очень много людей хотябы потому что чтобы испоьзовать другой браузер надо знать что такое браузер и почему IE фигня, а пользователю все равно, что IE "кривит" разметку это проблемы разработчиков. Мое начальство стало например на дыбы когда я предложил не подреживать IE. Мне генеральный сказал что у него стоит IE у всей администрации стоит IE. Даже у Мэра нашего города стоит IE. И ты хочешь не подреживать IE ????

Спустя 37 минут, 4 секунды (5.06.2010 - 13:01) cln2008 написал(а):
мдя ... у меня на работе тоже стоит ИЕ, причем 6 ... техподдержка не хочет с него уходить, т.к. они его используют еще и вместо проводника для работы с файлами ...

Спустя 6 минут, 18 секунд (5.06.2010 - 13:07) Gabriel написал(а):
cln2008
разве саваря поддерживает круглые бордюры? если для IE требуется сделать равнозакругленные бордюры то это делается в одну сточку css правда тем самым лишая его валидности.
http://www.smashingmagazine.com/2010/04/28...ernet-explorer/
только при использовании скрипта для закругления бордюров прийдется влезть в него и попровить ему z-index.
Basili4
правильно сделали. ибо сил уже нету бегать по нету и выслушивать байки мего программеров мол "ИЕ плохой а я самый умный и не дам смотреть вам сайт tongue.gif". хотя это тема очередной бессмысленной словесной войны.

Спустя 2 часа, 29 минут, 4 секунды (5.06.2010 - 15:36) cln2008 написал(а):
Gabriel
спасибо за статью, таки полезная ...
сафари вроде как поддерживает, если верить этому http://blog.petrusha.name/2010/03/24/html5...css3-checklist/

Спустя 14 минут, 7 секунд (5.06.2010 - 15:51) Gabriel написал(а):
cln2008
в ПН проверю раньше проверял не брала не чистым css, ни через хак для ИЕ
как по мне так эта статья есть клад. ибо достали меня тенями для текстов.

Спустя 7 минут, 31 секунда (5.06.2010 - 15:58) cln2008 написал(а):
только странно .... в статье демо-пример нормально работает ... там есть ссылка на
border-radius.htc с Google Code. Скачал, но он почему-то не работает sad.gif
углы прямые .... в ИЕ
статья очень полезная, спасибо Вам за нее wink.gif

Спустя 14 минут, 43 секунды (5.06.2010 - 16:13) Gabriel написал(а):
этот у меня работает в ИЕ7/8
только повторюсь z-index поправь ибо не корректоно прописан.

Спустя 3 часа, 35 минут, 5 секунд (5.06.2010 - 19:48) cln2008 написал(а):
аха, сенкс ...
а какой ему з-индекс надо поставить ?

Спустя 30 минут, 28 секунд (5.06.2010 - 20:18) ИНСИ написал(а):
cln2008 вот еще, одна не плохая статья, там и под IE http://designformasters.info/posts/round-corners-no-image/

Спустя 1 час, 11 минут, 35 секунд (5.06.2010 - 21:30) Gabriel написал(а):
cln2008
сказать честно непомню как сделал давно игрался етим делом. помоему ставил -3, или тернальным операторм делал.
if (isNaN(el_zindex)) { el_zindex = -3; }

Спустя 1 день, 13 часов, 9 минут, 42 секунды (7.06.2010 - 10:40) cln2008 написал(а):
Gabriel, хэлп sad.gif(
что-то никак не получается ... и уже el_zindex = -3; поставил, нифига ...
и если смотреть примеры, то все супер, как скачиваю скрипт локально - никакого эффекта sad.gif

Спустя 27 минут, 47 секунд (7.06.2010 - 11:07) Gabriel написал(а):
погодь пол часа на работу припрусь посмотрим чего там у тебя и как. а вот обрывок html/css где применяеш это непомешает.
ЗЫ. надеюсь округлялку для ишака вынес отдельно, а для других отдельно?

Спустя 30 минут, 58 секунд (7.06.2010 - 11:38) cln2008 написал(а):
Сейчас уже файлы стилей разнес для разных браузеров,
border-radius.htc присланный Вами.


HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Тест округлости div'ов</title>

  <link rel="stylesheet" type="text/css" href="css/st01.css">
  <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="css/st01.ie.css">
  <![endif]-->
</head>
<body> 
<div class="curved">
  <p>Блок со скруглёнными углами</p>
  <br>
  <p>Блок со скруглёнными углами</p>
</div>
</body>
</html>


CSS для IE
.curved {
	    border-radius: 5px; /* CSS3 */
            border: 4px solid #5F9EA0;      
	    behavior: url(border-radius.htc); /* IE */
	}


CSS для остальных
.curved {
	    -moz-border-radius: 5px; /* Firefox */
	    -webkit-border-radius: 5px; /* Safari, Google Chrome */
	    -khtml-border-radius: 5px; /* KHTML */
	    border-radius: 5px; /* CSS3 */
            border: 2px solid #000;      
	}

Спустя 24 минуты, 21 секунда (7.06.2010 - 12:03) Gabriel написал(а):
1. не вами, а тобой не нужно на мну выкать ибо маленький я еще smile.gif
2. border-radius.htc 
if (isNaN(el_zindex)) el_zindex = -1;
else el_zindex = -1;

3. так пробовал?
.curved
{
  border-radius: 5px; /* CSS3 */ 
  behavior: url(border-radius.htc); /* IE */
  border: 4px solid #5F9EA0;
 }

Спустя 53 минуты, 51 секунда (7.06.2010 - 12:57) cln2008 написал(а):

нифига user posted image
уже и буржуйских вариантов статьи нашел, но пока безрезульта sad.gif
а у тебя есть ссылки на работающий такой вариант ?

Спустя 16 минут, 36 секунд (7.06.2010 - 13:13) Gabriel написал(а):
держи этот работает точно.
файл грязный но думаю нужное вытянуть сможеш.

Спустя 33 минуты, 12 секунд (7.06.2010 - 13:46) cln2008 написал(а):
Gabriel, будеш ржать, но не работает ...
возможно какая-то грабель с денвером ... щас попробую в эту сторону еще порыть ... в статьях писали, что сервер должен уметь обрабатывать htc файлы, но для другого сайта я использую тоже htc, который делает png прозрачным, так там все ОК ...

Спустя 9 минут, 42 секунды (7.06.2010 - 13:56) Gabriel написал(а):
скопировал твой код (почти весь)
любуйся smile.gif
ЗЫ. а ржать то чего? тут плакать нада.

Спустя 37 минут, 21 секунда (7.06.2010 - 14:33) cln2008 написал(а):
итак, путем немерянных тыков, таки заработало ...
правда не уверен, что именно помогло, т.к. прочитал что надо еще и сервер научить понимать htc файл. На другом сайте, на котором работает, там в корне у меня лежит .htaccess с соотв записью ...
щас еще раз попробую с "чистого листа", хочу понять что же помогло ....

Спустя 11 минут, 36 секунд (7.06.2010 - 14:45) Gabriel написал(а):
во как узнаеш поделись smile.gif

Спустя 28 минут, 15 секунд (7.06.2010 - 15:13) cln2008 написал(а):
фух .... user posted image
заработало ....
причину нашел на блоге автора сего произведения

Update 10 June, 2009: Some servers need to set MIME type for HTC to work this in IE6.
To do this, follow the steps.

1. Go to your cpanel and click the MIME Types link
2. Under MIME Type, add text/x-component
3. Under Extensions, add htc
4. Restart Apache Web server

т.е. "Вашему серверу нужна возможность подгрузки HTC-файла для того, чтобы этот способ работал".
Плохо что не сразу обратил внимание на это, да и сбило с толку, что у меня работает htc для прозрачности png.
Пути решения 2
1. кладем в корень сайта (или рядом с самим htc ) файл .htaccess с записью
AddType text/x-component .htc
или
2. в файл апача mime.types добавить запись text/x-component htc

и все чудесно работает ... причем работает даже исходный скрипт, который брал с http://code.google.com/p/curved-corner/

Спустя 1 день, 21 час, 45 минут, 56 секунд (9.06.2010 - 12:59) cln2008 написал(а):
еще интересную штуку заметил ... если к div применяется скрипт border-radius.htc и при этом указано свойство background или background-color, то все красиво и замечательно ... если же оные свойства на указывать, то фон становится черным ...
Кто-то сталкивался с такой ситуацией ?

Спустя 36 минут, 44 секунды (9.06.2010 - 13:36) Gabriel написал(а):
cln2008
да есть такая бага но как ты сам заметил все решается указанием фона дива.

Спустя 19 минут, 47 секунд (9.06.2010 - 13:56) cln2008 написал(а):
Gabriel, ну как бы да ... легко решается ...
просто хотелось выяснить кого из нас плющит ... меня или ИЕ wink.gif

Спустя 1 час, 10 минут, 3 секунды (9.06.2010 - 15:06) Gabriel написал(а):
походу это есть бок самого .htc

Спустя 34 минуты, 17 секунд (9.06.2010 - 15:40) cln2008 написал(а):
Gabriel
похоже что не один sad.gif
он еще и одновремено с фильтром не может использоваться ....
если ставлю
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
и
behavior: url(../htc/border-radius.htc);
то вся прозрачность слетает sad.gif

Спустя 1 час, 4 минуты, 30 секунд (9.06.2010 - 16:45) Gabriel написал(а):
#round
{
	
	width: 300px;
	height: 100px;
	background: #ddd;
	border-radius: 20px;
	behavior: url(border-radius.htc);
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=10);
	border: solid 1px #bbb;
	color: #F00;
}

<div id="round"> <p>texto</p> </div>

фон прозрачным не становится, но текст аж бягом да и закругленность на месте.

Спустя 8 минут, 19 секунд (9.06.2010 - 16:53) cln2008 написал(а):
да, такой эффект я получал ... но выкрутился другим способом ...
сначала делал див с круглыми углами и заливал его таким же фоном, как и родительский ... а потом еще один див без рамки, но с прозрачным фоном ...
т.е. вместо 2х дивов приходится использовать 3

Спустя 6 минут (9.06.2010 - 16:59) Gabriel написал(а):
ну да smile.gif я вон пока не знал про такое решение юзал картинки особого гемороя небыло, но всеже как-то неудобно.

Спустя 3 часа, 12 минут, 58 секунд (9.06.2010 - 20:12) cln2008 написал(а):
склонен вернуться к картинкам ... или буду пробовать переделать свой шаблон с затачиванием его под ИЕ ...
еще вариант - пусть у пользователей ИЕ углы будут прямые ...

Спустя 56 минут, 9 секунд (9.06.2010 - 21:08) Gabriel написал(а):
ну тогда делать их прямыми везде smile.gif ждем ИЕ9 там говорят будет супер-пупер-мега совместимость с CSS3, HTML5, и тд. и тп.

Спустя 23 минуты, 30 секунд (9.06.2010 - 21:32) cln2008 написал(а):
аха, тока при этом еще и всех загнать на висту или вин7 wink.gif
я попробовал на ХР поставить .... показал он мне дулю и послал на висту smile.gif
Gabriel, попутно, ты не сталкивался с такой траблой, что когда в ИЕ
указываешь background-image и говоришь background-repeat: repeat-x, то фоновый рисунок растягивается несколько раз и по оси у, если высота дива начинает превышать высоту фонового рисунка ?

Спустя 7 минут, 49 секунд (9.06.2010 - 21:39) Gabriel написал(а):
неа. просто я не юзал ниразу repeat-x; мне всегда приходилось растягивать по оси y
Быстрый ответ:
Powered by dgreen

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.