<div> - заоблни ъгли

spaidur · 2 Април 2009

исам да попитам защо само в мозила са заоглени аглите от този код как да гонаправя и в ИЕ да е с заоблени агли

Код:

.agal  {
        background-color: #E9EEFA;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border: 1px solid #999999;
        padding: 7px;
        color: #AEAEAE;
        }

Код:

<div class="agal">


<center><b>Потребителско Меню</b></center>

<br>
<br>
<br>
 <center>

wT
</center> 


</div>

emagi · 2 Април 2009

http://web-tourist.net/login/login/newsearch.php?wtsearch=n&newsearch=%E7%E0%EE%E1%EB%E5%ED%E8

spaidur · 2 Април 2009

emagi каза:
http://web-tourist.net/login/login/newsearch.php?wtsearch=n&newsearch=%E7%E0%EE%E1%EB%E5%ED%E8

те имат определена височина или широчина а аз не исма

shterev · 2 Април 2009

Код:

<!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">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
	<title>title</title>
	<style type="text/css">
		.box			{	width:50%; margin: 0 auto;}
		
		.left_top		{	padding:0 0 0 6px;	
							background: url(left_top.gif) no-repeat left top;}
						
		.right_top		{	height:41px;
							background: url(right_top.gif) no-repeat right top;}
						
		.left_center	{	padding:0px 0 0 6px;
							background: url(left_center.gif) repeat-y left top;}
							
		.right_center	{	background: url(right_center.gif) repeat-y right top;}
							
		.left_bottom	{	padding:0 0 0 6px;
							background: url(left_bottom.gif) no-repeat left top;}
							
		.right_bottom	{	height:6px;
							background: url(right_bottom.gif) no-repeat right top;}
	</style>
</head>
<body>
	
	<div class="box">
		
		<div class="left_top">
			<div class="right_top">Title of something</div>
		</div>
	
		<div class="left_center">
			<div class="right_center">
				Lorem ipsuim is simply dummy text.Lorem ipsuim is simply dummy text.
				Lorem ipsuim is simply dummy text.Lorem ipsuim is simply dummy text.
				Lorem ipsuim is simply dummy text.Lorem ipsuim is simply dummy text.
				Lorem ipsuim is simply dummy text.Lorem ipsuim is simply dummy text.
				Lorem ipsuim is simply dummy text.Lorem ipsuim is simply dummy text.
				Lorem ipsuim is simply dummy text.Lorem ipsuim is simply dummy text.
			</div>
		</div>
	
		<div class="left_bottom">
			<div class="right_bottom"></div>
		</div>
	</div>
	
</body>
</html>

Преди време бях написал това. Можеш да си го преработиш за твои нужди. Оразмерява се в процентри според прозореца или родителя в който се намира. Ако искаш да е много широко , само трябва да удължиш картинките.

spaidur · 2 Април 2009

shterev каза:

Код:

<!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">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
	<title>title</title>
	<style type="text/css">
		.box			{	width:50%; margin: 0 auto;}
		
		.left_top		{	padding:0 0 0 6px;	
							background: url(left_top.gif) no-repeat left top;}
						
		.right_top		{	height:41px;
							background: url(right_top.gif) no-repeat right top;}
						
		.left_center	{	padding:0px 0 0 6px;
							background: url(left_center.gif) repeat-y left top;}
							
		.right_center	{	background: url(right_center.gif) repeat-y right top;}
							
		.left_bottom	{	padding:0 0 0 6px;
							background: url(left_bottom.gif) no-repeat left top;}
							
		.right_bottom	{	height:6px;
							background: url(right_bottom.gif) no-repeat right top;}
	</style>
</head>
<body>
	
	<div class="box">
		
		<div class="left_top">
			<div class="right_top">Title of something</div>
		</div>
	
		<div class="left_center">
			<div class="right_center">
				Lorem ipsuim is simply dummy text.Lorem ipsuim is simply dummy text.
				Lorem ipsuim is simply dummy text.Lorem ipsuim is simply dummy text.
				Lorem ipsuim is simply dummy text.Lorem ipsuim is simply dummy text.
				Lorem ipsuim is simply dummy text.Lorem ipsuim is simply dummy text.
				Lorem ipsuim is simply dummy text.Lorem ipsuim is simply dummy text.
				Lorem ipsuim is simply dummy text.Lorem ipsuim is simply dummy text.
			</div>
		</div>
	
		<div class="left_bottom">
			<div class="right_bottom"></div>
		</div>
	</div>
	
</body>
</html>

Преди време бях написал това. Можеш да си го преработиш за твои нужди. Оразмерява се в процентри според прозореца или родителя в който се намира. Ако искаш да е много широко , само трябва да удължиш картинките.

хубаво е но не ми варши работа с тея картинки трябва ми нещо само с картинки на аглите и др да е .css

shterev · 2 Април 2009

Ти това разгледа ли го. Не можеш ли да си го преработиш?

Иначе направи си 4 дива , които нямат нито височина , нито ширина, нека да са в един родител, който за начало има някаква ширина. Постави текст за да разпъне дивовете. На всеки див задаи съответната картинка.

<div>
<div>
<div>
<div>
text
</div>
</div>
</div>
</div>

На червенив див задаваш падинги , за да не стои збит текста грозно в ъглите.

spaidur · 2 Април 2009

ето аз имам един код които използвам

Код:

.b12, .b22, .b32, .b42{font-size:1px; overflow:hidden; display:block;}
.b12 {height:1px; background:#E9EEFA; margin:0 5px;}
.b22 {height:1px; background:#E9EEFA; margin:0 3px;}
.b32 {height:1px; background:#E9EEFA; margin:0 2px;}
.b42 {height:2px; background:#E9EEFA; margin:0 1px;}
.content2 {height:50px;background: #E9EEFA;border:0px solid #E9EEFA;border-top:none;border-bottom:none;}
.content2 div {margin-left: 0px;}

Код:

<table width="100%"><td>
<div class="content">
<b class="b12"></b><b class="b22"></b><b class="b32"></b><b class="b42"></b>
<div class="content2"><div>





фафгсдхртумктл


</div></div>
<b class="b42"></b><b class="b32"></b><b class="b22"></b><b class="b12"></b>
</div>
</td></table>

искам да попитам как да пахна тва ограничение на височината и то само да си определя височина от самия текст
.content2 {height:50px;background: #E9EEFA;

shterev · 2 Април 2009

Код:

.content2 { min-height:50px;}
* html .content2 { height:50px;}

Добави това и твоите други кодчета по този начин.

spaidur · 2 Април 2009

shterev каза:
Код:

.content2 { min-height:50px;} * html .content2 { height:50px;}

Добави това и твоите други кодчета по този начин.

нестава

shterev · 2 Април 2009

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<style>
.b12, .b22, .b32, .b42{font-size:1px; overflow:hidden; display:block;}
.b12 {height:1px; background:#E9EEFA; margin:0 5px;}
.b22 {height:1px; background:#E9EEFA; margin:0 3px;}
.b32 {height:1px; background:#E9EEFA; margin:0 2px;}
.b42 {height:2px; background:#E9EEFA; margin:0 1px;}
.content2 {min-height:50px;background: #E9EEFA;border:0px solid #E9EEFA;border-top:none;border-bottom:none;}
* html .content2 {height:50px;}
.content2 div {margin-left: 0px;}
</style>

</head>
<body>
<div class="content">
<b class="b12"></b><b class="b22"></b><b class="b32"></b><b class="b42"></b>
<div class="content2">
<div>
фафгсдхртумктл
</div>
</div>
<b class="b42"></b><b class="b32"></b><b class="b22"></b><b class="b12"></b>
</div>
</body>
</html>

Това става!

spaidur · 2 Април 2009

shterev каза:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<style>
.b12, .b22, .b32, .b42{font-size:1px; overflow:hidden; display:block;}
.b12 {height:1px; background:#E9EEFA; margin:0 5px;}
.b22 {height:1px; background:#E9EEFA; margin:0 3px;}
.b32 {height:1px; background:#E9EEFA; margin:0 2px;}
.b42 {height:2px; background:#E9EEFA; margin:0 1px;}
.content2 {min-height:50px;background: #E9EEFA;border:0px solid #E9EEFA;border-top:none;border-bottom:none;}
* html .content2 {height:50px;}
.content2 div {margin-left: 0px;}
</style>

</head>
<body>
<div class="content">
<b class="b12"></b><b class="b22"></b><b class="b32"></b><b class="b42"></b>
<div class="content2">
<div>
фафгсдхртумктл
</div>
</div>
<b class="b42"></b><b class="b32"></b><b class="b22"></b><b class="b12"></b>
</div>
</body>
</html>

Увеличете...

Това става!

супер сии само кажи как да му сложа бордер 1 или 2 с черна леснта да е оградено

088777_ · 3 Април 2009

spaidur каза:
shterev каза:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<style>
.b12, .b22, .b32, .b42{font-size:1px; overflow:hidden; display:block;}
.b12 {height:1px; background:#E9EEFA; margin:0 5px;}
.b22 {height:1px; background:#E9EEFA; margin:0 3px;}
.b32 {height:1px; background:#E9EEFA; margin:0 2px;}
.b42 {height:2px; background:#E9EEFA; margin:0 1px;}
.content2 {min-height:50px;background: #E9EEFA;border:0;border-top:none;border-bottom:none;}
* html .content2 {height:50px;}
.content2 div {margin-left: 0px;}
</style>

</head>
<body>
<div class="content">
<b class="b12"></b><b class="b22"></b><b class="b32"></b><b class="b42"></b>
<div class="content2" style="border:1px dashed black;">
<div>
фафгсдхртумктл
</div>
</div>
<b class="b42"></b><b class="b32"></b><b class="b22"></b><b class="b12"></b>
</div>
</body>
</html>

Увеличете...

Това става!

Увеличете...

супер сии само кажи как да му сложа бордер 1 или 2 с черна леснта да е оградено

Заповядай.

shterev · 3 Април 2009

@088777_

Я погледни добре кода!

Ето ползвай рова скриптче , че ще е по лесно и нямада имаш толкова мн хтмл.

http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

spaidur · 3 Април 2009

shterev каза:
@088777_ Я погледни добре кода!

Ето ползвай рова скриптче , че ще е по лесно и нямада имаш толкова мн хтмл.

http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

е тва ми трябваше мерси +1

tonev2 · 8 Април 2009

shterev каза:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<style>
.b12, .b22, .b32, .b42{font-size:1px; overflow:hidden; display:block;}
.b12 {height:1px; background:#E9EEFA; margin:0 5px;}
.b22 {height:1px; background:#E9EEFA; margin:0 3px;}
.b32 {height:1px; background:#E9EEFA; margin:0 2px;}
.b42 {height:2px; background:#E9EEFA; margin:0 1px;}
.content2 {min-height:50px;background: #E9EEFA;border:0px solid #E9EEFA;border-top:none;border-bottom:none;}
* html .content2 {height:50px;}
.content2 div {margin-left: 0px;}
</style>

</head>
<body>
<div class="content">
<b class="b12"></b><b class="b22"></b><b class="b32"></b><b class="b42"></b>
<div class="content2">
<div>
фафгсдхртумктл
</div>
</div>
<b class="b42"></b><b class="b32"></b><b class="b22"></b><b class="b12"></b>
</div>
</body>
</html>

Увеличете...

Това става!

Не работи поф Firefox

<div> - заоблни ъгли

spaidur

Registered

emagi

Registered

spaidur

Registered

shterev

Registered

spaidur

Registered

shterev

Registered

spaidur

Registered

shterev

Registered

spaidur

Registered

shterev

Registered

spaidur

Registered

088777_

Registered

shterev

Registered

spaidur

Registered

tonev2

Registered