Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Закругление краев DIV'ов (https://javascript.ru/forum/dom-window/3436-zakruglenie-kraev-div%27ov.html)

Device 18.04.2009 20:50

Закругление краев DIV'ов
 
в общем САБЖ, как закруглить края дивов, только без картинок, и желательно средствами jQuery, знаю что есть плагин для этой либы называется Corner но он криво работает, обрезает нижнюю строку текста который в диве лежит и к тому же я не смог его научить закруглять все края он закруглял только нижние, так что хелп

Riim 18.04.2009 21:00

Под MooTools
http://fantactuka.net/canvasul/

А с тем, что под Jquery у меня проблем не было. А если и будут, то код там простейший, можно и самому подправить. Может у меня другой, просто называется также. Их много сейчас под Jquery.

Device 18.04.2009 22:10

единственный достойный вариант который я нашел это: http://www.atblabs.com/jquery.corners.html

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

Riim 18.04.2009 22:29

Цитата:

Сообщение от Device
но у меня почему то углы отображаются только в опере а остальных нет, хотя в доках написано что работает на всех браузерах

Странно тогда, что вы считаете этот вариант достойным.

Device 18.04.2009 22:35

он дойстойный просто я его не могу достояно успользовать потому что примеры из доков нормально отображаются на всех браузерах, а то что я юзаю не работает :(

Kolyaj 18.04.2009 22:41

Доктайпы разные.

Riim 18.04.2009 22:47

Посмотрел код немного. Про canvas ни слова. Дивами рисуется. Не люблю такое.

Device 18.04.2009 22:54

посоветуй что-нибудь дельное

Riim 18.04.2009 23:02

Во, откопал:
http://labs.parkerfox.co.uk/cornerz/

Device 18.04.2009 23:26

таже хрень работает в опере и сафари а в мозилле и файрфоксе не работает(((

Riim 18.04.2009 23:28

Цитата:

Сообщение от Device
таже хрень работает в опере и сафари а в мозилле и файрфоксе не работает(((

У меня все работает. Может стоит обновить браузеры?

Device 18.04.2009 23:34

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

Device 18.04.2009 23:37

<div id="menu">
     <div align="right" class="header">
      Меню
     </div>
     <div class="menuheader">Аренда</div>
     <div class="menuitem"><a href="#">Квартиры</a></div>
     <div class="menuitem"><a href="#">Коттеджи</a></div>
     <div class="menuheader">Продажа</div>
     <div class="menuitem"><a href="#">Квартиры</a></div>
     <div class="menuitem"><a href="#">Коттеджи</a></div>
     <div class="menuheader">Контакты</div>
     <div class="menuitem"><a href="#">Контакты</a></div>
     <div class="menuitem"><a href="#">Карта</a></div>
     <div class="menuheader">Партнеры</div>
     <div class="menuitem"><a href="#">Наши партнеры</a></div>
     <div class="menuheader">Предварительный заказ</div>
     <div class="menuitem"><a href="#">Заказать</a></div>
    </div>


вот так:
$("#menu").cornerz({radius:10});


не закругляет(((((

причем если все изнутри дива #menu удалить все ок...

Device 18.04.2009 23:45

В общем можете официально назвать меня критином...

было:
<script type="text/javascript" src="corners.js" />


сделал:
<script type="text/javascript" src="corners.js"></script>


и все ок

x-yuri 18.04.2009 23:47

у меня даже предыдущий вариант работает :blink: хотя может тут уже дело в DOCTYPE

Device 18.04.2009 23:49

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

AzriMan 20.04.2009 18:15

пользуюсь этим:
либа: http://www.dhtmlgoodies.com/index.ht...ounded-corners
пример: http://www.dhtmlgoodies.com/scripts/...d-corners.html

создает div с множеством вложенных div-ов разной ширины. выглядит красиво но код становится немного объемнее.

Serg_pnz 09.06.2009 17:33

Цитата:

Сообщение от Riim (Сообщение 17043)

Выложите, пожалуйста, скрипт, а то http://fantactuka.net/canvasul/ не работает((

Riim 09.06.2009 22:22

Вложений: 1
>>> Выложите, пожалуйста, скрипт, а то http://fantactuka.net/canvasul/ не работает((

Serg_pnz 10.06.2009 10:43

Riim, спасибо

B~Vladi 10.06.2009 10:49

Я тоже когда-то наткнулся на такой трюк, потом расковырял всё это дело и понял, в чём тут фикус. Подробно не буду описывать, т.к. лень, но если кто-то захочет в этом разобратся сам - опишу.
Взамен хотел бы скинуть вам простую функцию, которая просто поможет всё это понять.
function createEle(ele,tag,className){
	var e=document.createElement(tag);
	e.className=className;
	ele.appendChild(e);
}
function createRainbow(e,top){
	var r=createEle(e,'div',(top)?'rtop':'rbottom');
	if(top) for(i=14;i>=0;i--) createEle(r,'div','r'+i);
	else for(i=0;i<=14;i++)	createEle(r,'div','r'+i);
}

Функция createEle просто в помощь, так что не придерацца.
Использовать так:
1. У нас есть див (div).
2. В этот див генерим верхние углы: createRainbow(div,true).
3. Вставляем туда див для контента: createEle(div,'div',className).
4. Генерим нижние углы: createRainbow(div).

Вот стили:
.r1, .rbottom .r0{
	height:1px;
}
.r10 {
	margin:0 8px;
	height:1px;
}
.r11 {
	margin:0 9px;
	height:1px;
}
.r12 {
	margin:0 11px;
	height:1px;
}
.r13 {
	margin:0 13px;
	height:1px;
}
.r14 {
	margin:0 16px;
	height:1px;
}
.r2 {
	margin:0 1px;
	height:3px;
}
.r3{
	margin:0 2px;
	height:2px;
}
.r4, .r5 {
	margin:0 3px;
	height:1px;
}
.r6 {
	margin:0 4px;
	height:1px;
}
.r7 {
	margin:0 5px;
	height:1px;
}
.r8 {
	margin:0 6px;
	height:1px;
}
.r9 {
	margin:0 7px;
	height:1px;
}
.rbottom {
	width:100%;
	overflow:hidden;
}
.rtop {
	width:100%;
	overflow:hidden;
}
.rtop div, .rbottom div{
	background:#000;
	overflow:hidden;
}

Этот пример не претендует на широкое использование. Запостилось для того, чтобы вы сами могли во всём разобраться и не мучиться с левыми библиотеками. После осознования сего, вы сами сможете написать полноценную либу скругления углов у дива.

ludmilal 27.07.2009 22:47

Помогите, пожалуйста, разобраться, как работает скрипт с сайта http://fantactuka.net/canvasul/.

Скрипт выдал мне код в виде архива. Я подключила скрипты и файл стилей, прописала div .underlayer - как предлагается.

Но ничего не работает - даже на странице ничего не отображается.

Как этот скрипт работает?
Что я не учла?

Кто имел с ним дело, помогите разобраться, плиз...

Riim 27.07.2009 23:06

Того скрипта там уже нет, там одна реклама. В 19 посте он выложен.

ludmilal 28.07.2009 02:06

Riim, вы точно Рассеянный профессор

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

Riim 28.07.2009 08:40

Цитата:

Сообщение от ludmilal
не могу разобраться, как этот скрипт встроить в страницу сайта

Так там же есть примеры, где все подключено.

ludmilal 28.07.2009 23:22

Там только сам скрипт, а никаких примеров нет.

Если не трудно, выложите где-нибудь пример.
Может на какой либо файлообменник или в присоединенном архиве.

Очень хочется разобраться, как это все работает.

Riim 28.07.2009 23:34

Цитата:

Сообщение от ludmilal
а никаких примеров нет

На самом видном месте лежит.

ludmilal 29.07.2009 02:22

Riim, Вместо того, чтобы помочь страждущему вы играетесь словами.

Ну поигрались... А толку?

Riim 29.07.2009 09:25

ludmilal, я предлагаю вам еще раз скачать архив из 19-го поста и посмотреть его содержимое с широко открытыми глазами.

ludmilal 29.07.2009 17:34

Скачала еще раз.
Распаковала архив canvasul.zip.
Подключила стили и скрипты, который находились в архиве.

Так нужен еще и html-код, который вставляется в страницу и который, собственно и образует сам блок - иначе для чего делать эти круглые углы и тени.

Какой html-код?

Riim 29.07.2009 17:52

Архив называется rouned.zip а не canvasul.zip, вы что-то не то качаете.

ludmilal 29.07.2009 23:57

В архиве, который называется rouned.zip вложен архив canvasul.zip.

Что вы придираетесь? Объяснили бы как этот скрипт настроить.

Riim 30.07.2009 00:05

Цитата:

Сообщение от ludmilal
В архиве, который называется rouned.zip вложен архив canvasul.zip.

А рядом с архивом canvasul.zip лежит index.html в котором все настроено.

ludmilal 30.07.2009 02:36

index.html - это сам крипт. А как это перенести на мой сайт?

Как сделать, чтобы на моем сайте у блока были круглые уголки и тени?
Может я бестолковая, но у меня никак не получается сделать, чтобы этот скрипт работал на моем сайте.

Пожалуйста, расскажите, как сделать, чтобы на моем сайте у блока были круглые уголки и тени?

Если можно - подробно. Что куда вставлять?

B~Vladi 30.07.2009 09:49

Цитата:

Сообщение от ludmilal
Пожалуйста, расскажите, как сделать, чтобы на моем сайте у блока были круглые уголки и тени?

Сделать самой - проверенный вариант, работает везде;)

Riim 30.07.2009 12:02

Вспоминается работа в одной конторе, где приходилось 50-летних старушек учить пользоваться мышкой.

Цитата:

Сообщение от Riim
и посмотреть его содержимое с широко открытыми глазами.

Однако с поиском мышки проблем обычно не было.

ludmilal 30.07.2009 23:09

Вы, умники чертовы. Что, чувствуете себя выше, когда унизите кого-нибудь другого?

Нормальные люди возвышаются над другими благодаря своим достижениям, а не благодаря тому, что унижают других.

Riim 30.07.2009 23:26

Ну вот, опять мы плохие :(.

B~Vladi 31.07.2009 09:29

Цитата:

Сообщение от ludmilal
Вы, умники чертовы. Что, чувствуете себя выше, когда унизите кого-нибудь другого?

Нормальные люди возвышаются над другими благодаря своим достижениям, а не благодаря тому, что унижают других.

А как называют людей, которые ничего не хотят делать, а требуют от других готовых решений?


Часовой пояс GMT +3, время: 06:35.