Закруглённые края ПОМОГИТЕ

Phoenix88 · January 25, 2011

Помогите, который день мучаюсь с углами в İE..

Сегодня наконец добилась хоть какого-то прогрeсса. Подключила DD_roundies_0.0.2a.js

Код:

<script src="DD_roundies_0.0.2a.js" type="text/javascript"></script> 
<script type="text/javascript"> DD_roundies.addRule('.roundify', '10px'); </script>

В CSS:

.roundify
{
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

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

Выносит края scroll на бордер и не округляет их..

Уже не знаю что делать..

+ в Опере на почему-то на закруглённом бордере оставляет белые углы. Как с этим бороться?

Scrum · January 25, 2011

Попробуйте PIE

Phoenix88 · January 25, 2011

урв))))

он работает)) огромное сбасибо

А что с Оперой?

swetlana · January 26, 2011

а что с Оперой?

Покажите страничку с проблемой.

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

Так что не до конца понятна проблема с белыми углами.

Phoenix88 · January 26, 2011

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

Сайт пока на локалхост.. Подскажите, подалуйста, как добавлять скриншоты в форум.. Не нашла

swetlana · January 26, 2011

любой хостинг картинок.

Например radikal.ru или itmages.ru.

туда загружаете, получаете ссылку, лучше bb-код с предпросмотром, и сюда эту ссылку выкладываете.

Phoenix88 · January 26, 2011

любой хостинг картинок.
Например radikal.ru или itmages.ru.
туда загружаете, получаете ссылку, лучше bb-код с предпросмотром, и сюда эту ссылку выкладываете.

Прилагаю коды. Заранее благодаю

index.php:

<?php

defined('_JEXEC') or die('Restricted access');
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/oz1/css/style.css" type="text/css" />

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 

<script type="text/javascript" src="highslide/highslide/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide/highslide.css" />

<script type="text/javascript">
	hs.graphicsDir = 'highslide/highslide/graphics/';
	hs.wrapperClassName = 'wide-border';
</script>

</head>
<body>

<div id="main">
	   <div id="menu1">
	   <jdoc:include type="modules" name="menu1" />	   
	   </div>
	   <div id="logo"></div>
	   <div id="pixx">
		<jdoc:include type="modules" name="slide" />
		</div>
	   <div id="content" class="roundify">
	   <jdoc:include type="modules" name="content"   style="xhtml"/>
	   <jdoc:include type="component" /> 
	   </div>
	   </div>
</div>
</body>
</html>

css:

body
{
	background-color: #2f3034;
	margin: 0px;
	padding: 0;
	background-image: url("../images/bg1.png");
}

#main
{
	width: 700px;
	height: 665px;
	margin-left: auto;
	margin-right: auto;
	margin-top: -10px;
	*margin-top: 0px;
	background: url("../images/bg.jpg") no-repeat;
	border-right: 1px black dotted;
	border-left: 1px black dotted;
	-position: absolute;
	-left: 15%;
	-width: 700px;
	-border: none;
}
#menu1
{
	width: 740px;
	height: 100px;
	position: relative;
	right: 45px;
}

#menu1 ul li
{
	list-style: none;
	display: inline;
}

#menu1 ul li a
{
	display: block;
	text-decoration: none;
	color: #7B7B7C;
	font-family: Myriad Pro;
	font-size: 13pt;
	width: 138px;
	float: right;
	text-align: center;
	height: 55px;
	padding-top: 15px;
}

#menu1 ul li a:hover
{
	background-color: #F58120;
}

#current a:link, #current a:visited {
	text-decoration: none;
	background-color: #F58120;
}

#current a:hover {
	text-decoration: none;
	background-color: #F58120;
} 

#logo
{
	position: relative;
	width: 950px;
	height: 70px;
	background-image: url("../images/logo.png");
	background-repeat: no-repeat;
	margin-left: 25px;
	margin-top: 10px;
	margin-bottom: 10px;
}

#pixx
{
	width: 365px;
	height: 278px;
	position: relative;
	background-color: #fbefe5;
	float: left;
	top: 5px;
	border: 15px black solid;
	overflow: hidden;
}

#pixx p, #pixx a, #pixx span
{
	padding: 5px;
	text-decoration: none;
}

#pixx h3
{
	padding-left: 15px;
}

#pixx h4
{
	font-size: 12pt;
	text-align: center;
}

 #pixx a
 {
	color: black;
 }

.productPrice
{
	padding-left: 5px;
	color: red;
}

#pixx a:hover
{
	color:  #8F27B1;
}

#content
{
	width: 265px;
	height: 280px;
	*height: 275px;
	position: relative;
	float: right;
	top: -7px;
	border-left: 20px #F58120 solid;
	border-top: 20px #F58120 solid;
	border-bottom: 20px #F58120 solid;
	background-color: #fbefe5;
	text-align: justify;
	padding: 10px 10px 0px 10px;
	*padding: 15px 10px 0px 10px;
	overflow: scroll;
	font-family: Myriad Pro;
	font-size: 10pt;
}

#content a
{
	color: black;
	text-decoration: none;
}

#content a:hover
{
	color:  #8F27B1;
}



.roundify
{
	behavior: url(pie/PIE.htc);
	-webkit-border-radius: 10px 0px 0px 10px;
	-moz-border-radius: 10px 0px 0px 10px;
	border-radius: 10px 0px 0px 10px;
}

.search input.inputbox{
background: silver;
font-weight: bold;
}

.search input.button{
	font-family: Myriad Pro;
	margin-left: 96px;
	margin-top: 3px;
}

#search_searchword{
	width: 100px;
}

.contentheading
{
	color: red;
	font-weight: bold;
	*padding-bottom: 8px;
}

#content h3
{
	color: black;
	font-size: 10pt;
	text-decoration: underline;
}

#menu1 li.parent.active a
{
	text-decoration: none;
	background-color: #F58120;
}

Phoenix88 · January 31, 2011

Никто не поможет?

htmlonline · February 4, 2011

Можешь отдельно показать код скругления углов?

Как это у тебя получилось скруглить только два угла из четырех?

пОкажи код пожалуйста...

Phoenix88 · February 4, 2011

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

.roundify

{

behavior: url(pie/PIE.htc);

-webkit-border-radius: 10px 0px 0px 10px;

-moz-border-radius: 10px 0px 0px 10px;

border-radius: 10px 0px 0px 10px;

}

10 0 0 10

- это параметры углов по порядку. верхний левый - верхний правый - нижний левый - нижний правый.

Качаешь Pie, распаковываешь в свой сайт. присваиваешь нужным блокам класс roundify.

И подклюсаешь в css behavior: url(pie/PIE.htc);.

Пользуйся на здоровье.

Edited February 4, 2011 by Phoenix88

htmlonline · February 5, 2011

Огромное спасибо...

А насчет Оперы, вроде когда скругляешь уголки, то ты не задала цвет скруглению, а по умолчанию он белый, надо в JavaScript "покрасить" уголки.

Sign In

Закруглённые края ПОМОГИТЕ

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information