گرد کردن لبه ها (Panel(Div

**hesam_hma** · یک شنبه 09 دی 1386, 17:41 عصر

سلامدوستان چطوری میشه گوشه های یه پنل رو گرد کرد (از حالت شکسته به حالت کمانی تبدیل کرد)ممنون

**rezamizbani** · یک شنبه 09 دی 1386, 19:14 عصر

برای این کار فقط راهی که وجود داره اینه که از جدول یا div استفاده کنی و چهار تا لبه اون را از عکس لبه گرد به عنوان پس زمینه استفاده کنی !!!!!

**hesam_hma** · دوشنبه 10 دی 1386, 00:12 صبح

مشکل اینجاست که من چندتا از این پنلها در صفحه اصلیم دارم و اگه بخوام از عکس استفاده کنم حجم فایلم بالا میره و باید دو ساعت بشینم تا برنامم لود بشه!!!!!!؟

**shahab_ksh** · دوشنبه 10 دی 1386, 01:10 صبح

اگه از پنل asp.net استفاده میکنی خودش در IE نیمچه گرده اما در Firefox ببینی چهارگوشه
تنها راهش استفاده از عکسه

**oxygenws** · دوشنبه 10 دی 1386, 02:05 صبح

اگه از پنل asp.net استفاده میکنی خودش در IE نیمچه گرده اما در Firefox ببینی چهارگوشه

از چه کد HTML و CSS ای استفاده می کنه که این شکلی میشه؟!!

**shahab_ksh** · دوشنبه 10 دی 1386, 12:34 عصر

از چه کد HTML و CSS ای استفاده می کنه که این شکلی میشه؟!!

هر دو کد تولید شده html مشابه هستن اما در دو مرورگر متفاوت نشون داده میشن !



 

 

<div>

 

<div id="Panel1" style="height:50px;width:203px;text-align: left">

<fieldset>

<legend>

Title

</legend>

<br />

 

</fieldset>

</div>

**rezamizbani** · دوشنبه 10 دی 1386, 14:07 عصر

نوشته شده توسط hesam_hma

مشکل اینجاست که من چندتا از این پنلها در صفحه اصلیم دارم و اگه بخوام از عکس استفاده کنم حجم فایلم بالا میره و باید دو ساعت بشینم تا برنامم لود بشه!!!!!!؟

نه عزیز هیچ تاثیری روی حجم نداره !!

فقط باید از چهار تا عکس 1 کیلو بایتی استفاده کنی که وفتی یک بار لود بشه کافیه و می تونی توی 100 پنل استفاده کنی !!

باید فقط چهار تا گوشه عکس بزاری و بقیه رو از border و css کمک بگیری !!!!

**rezamizbani** · دوشنبه 10 دی 1386, 14:36 عصر



<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style type="text/css" >

.My_Form_Login

{

 

 background-color:#f9f9f9;

}

.My_FT_L

{

 height:4px;

 width:4px;

 background-image:url(Set.gif);

}

.My_FT_R

{

 height:4px;

 width:4px;

 background-image:url(Set.gif);

 background-position:right top;

}

.My_FB_L

{

 height:4px;

 width:4px;

 background-image:url(Set.gif);

 background-position:left bottom;

}

.My_FB_R

{

 height:4px;

 width:4px;

 background-image:url(Set.gif);

 background-position:right bottom;

}

.My_F_BR_R

{

 border-right:solid 1px #656565;

}

.My_F_BR_L

{

 border-left:solid 1px #656565;

}

.My_F_BR_T

{

 border-top:solid 1px #656565;

}

.My_F_BR_B

{

 border-bottom:solid 1px #656565;

}

table

{

 direction:rtl;

 font-size:8pt;

 font-family:tahoma;

}

</style>

</head>

<body>

<table class="My_Form_Login" cellpadding="0" cellspacing="0">

            <tr>

    <td class="My_FT_R"></td>

    <td class="My_F_BR_T">&nbsp;</td>

    <td class="My_FT_L"></td>

            </tr>

            <tr>

    <td class="My_F_BR_R">&nbsp;</td>

    <td>پنل لبه گرد <br>قابل استفاده برای هر محیط</td>

    <td class="My_F_BR_L">&nbsp;</td>

            </tr>

            <tr>

    <td class="My_FB_R"></td>

    <td class="My_F_BR_B">&nbsp;</td>

    <td class="My_FB_L"></td>

            </tr>

            </table>

</body>

</html>

فایل ضمیمه رو دانلود کنید بهتری چون پس زمینه آون هم هست که به 1 کیوبایت هم نمی رسه !!!!!!

دانلود پنل لبه گرد

**rezamizbani** · دوشنبه 10 دی 1386, 14:41 عصر

لازم به ذکر که توی 99999 هزار مرورگر موجود هم کار می کنه :D

**oxygenws** · دوشنبه 10 دی 1386, 17:27 عصر

هر دو کد تولید شده html مشابه هستن اما در دو مرورگر متفاوت نشون داده میشن !

نه، این ربطی نداره. فقط توی IE فلان المنت گوشه هاش گرد نمایش داده میشه!! ممکنه IE8 بیاد باز تیز بشه. یعنی فقط بحث رندرینگه.
مثل اینه که من بگم الان فایرفاکس ۳ گوشه های المنت های فرم (مثل تکست فیلد) رو گرد نشون میده!!! این فقط بحث رندرینگه و اهمیتی نداره.

در مورد گرد کردن هم تا جایی که من می دونم ۴ راه هست:

۱- همونی که رضا گفت :)

۲- استفاده از CSS های اضافی که مثلا فقط توی فایرفاکس درست کار می کنند (و البته مخصوص این شرکت هم هستند و من تو صفحهء اصلی سایتم ازش استفاده کرده بودم)
مثل:

-moz-border-radius: 10px;

۳- استفاده از فقط CSS (بدون تصویر) که توی همهء مرورگر ها درست کار می کنه اما برای «هر» border ی نمی شه ازش استفاده کرد (البته روش اول هم برای هر border ی کار نمی کنه)
مثال:
http://www.html.it/articoli/nifty/nifty1.html

۴- استفاده از CSS3:
http://www.w3.org/TR/2005/WD-css3-ba...-border-radius

شاید فعلا روش سوم رو توصیه کنم :)

موفق باشید.

**shahab_ksh** · دوشنبه 10 دی 1386, 19:56 عصر

نه، این ربطی نداره. فقط توی IE فلان المنت گوشه هاش گرد نمایش داده میشه!! ممکنه IE8 بیاد باز تیز بشه. یعنی فقط بحث رندرینگه.
مثل اینه که من بگم الان فایرفاکس ۳ گوشه های المنت های فرم (مثل تکست فیلد) رو گرد نشون میده!!! این فقط بحث رندرینگه و اهمیتی نداره.

منم دارم میگم تفاوت فقط در مرورگرهاست ! حالا شما میفرمایید ربطی نداره منم ربط حرف شما رو نفهمیدم !

**raravaice** · سه شنبه 11 دی 1386, 12:06 عصر

سلام

من کد جاوا اسکریپت این کارو دارم البته یه کم خاص و پیچیده طراحی شده اگر تمایل داشتین ایمیل بزارین SEND کنم چون یه بار یه کد رو که خیلی هم کمیاب بود توی همین سایت گذاشتم ولی متاسفانه به نام کسه دیگه ای تموم شد (البته هزینه و وقت منو گرفته بود)
برای همین خواهش میکنم اگر کد رو گرفتین برای استفاده شخصی خودتون استفاده کنید و جایی افشاش نکنید به قول معروف CopyRight

**scorpion_man** · سه شنبه 11 دی 1386, 14:01 عصر

با سلام به همه دوستان
بیا اینم کد یه panel با css که نیازی به عکس هم نداره



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>table001</title>

<style type="text/css">

body {font-family:Arial, Helvetica, sans-serif, Tahoma; font-size:12px;}

.curvy {position:relative; width:200px; height:70px; background:#eeb51a; color:#000; margin:1em auto;}

#ctl, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:#eeb51a; background:#fff;overflow:hidden;}

#ctl {top:0px; left:0px;}

#cbl {top:50px; left:0px;}

#ctr {top:0px; left:180px;}

#cbr {top:50px; left:180px;}

#quadtl, #quadtr, #quadbl, #quadbr {position:absolute; font-size:150px; font-family:arial; color:#eeb51a;line-height:40px;}

#quadtl {left:-8px;}

#quadtr {left:-25px;}

#quadbl {left:-8px; top:-18px;}

#quadbr {left:-25px; top:-18px;}

#text {position:absolute; top:5px; left:5px; width:180px; height:70px; color:#fff;}



</style>

</head>



<body>

<div class="curvy">

				<div id="ctl"><div id="quadtl">&bull;</div></div>

				<div id="cbl"><div id="quadbl">&bull;</div></div>

				<div id="ctr"><div id="quadtr">&bull;</div></div>

				<div id="cbr"><div id="quadbr">&bull;</div></div>

				<div id="text">

				  <p align="center">No Images.<br>

				    <br>

				    Text in a div.

				  </p>

  </div> 

</div>

</body>

</html>

موفق باشید

**raravaice** · سه شنبه 11 دی 1386, 15:17 عصر

You Are Perfect
سلام

کد جالبیه ولی مشکلی که داره اینه که درجه ARC رو نمیشه تنظیم کرد.ولی درکل روش جالبیه
ممنون

**musiox** · سه شنبه 11 دی 1386, 20:29 عصر

خیلی با روشش حال کردم ... کار خودشه نه ؟!!!!
اینم یه نگاه بندازین :



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">



<html>

<head>

	<title>Untitled</title>

</head>

<body>

<div style="background-color:silver;width:100px;height:100px;">

	<div id="angle" style="position:absolute;top:0px;">

		&nbsp;

	</div>

</div>



<script>

var d=document;

var angle=d.getElementById("angle");

var e=0.02



for(i=0;i<=.5;i+=.03){

	var div=d.createElement("div");

	div.style.width=e+"cm";

	div.style.height=Math.sqrt(.25-i*i)+"cm";

	div.style.backgroundColor="white";

	div.style.styleFloat="left";

	div.style.overflow="hidden";

	angle.appendChild(div);

}



</script>

</body>

</html>

**raravaice** · چهارشنبه 12 دی 1386, 11:09 صبح

musiox

سلام
روشت خیلی عالیه هیچ نقصی هم توش نیست.

ببین این الان تو پر میسازه میشه فقط border بهش داد؟

**rezamizbani** · چهارشنبه 12 دی 1386, 12:51 عصر

نوشته شده توسط scorpion_man

با سلام به همه دوستان
بیا اینم کد یه panel با css که نیازی به عکس هم نداره

خیلی کار جالبی کردی !!! فکرش رو نمی کردم که کارکتر بالت یک همچین کار جالبی بتونه بکنه !!!! ولی من خواستم کوچیکش کنم خیلی سخته !!! ولی در کل

ایول !

**scorpion_man** · پنج شنبه 13 دی 1386, 00:40 صبح

با سلام به همه دوستان
فکر نمیکردم اینطوری استقبال بشه من در مورد گرد کردن کدهای زیادی دارم که یا خودم نوشتم یا سورسش رسیده چون 3 ساله پیش منم عاشق گرد کردن بودم هر لایه ای دستم میرسید گردش میکردم
اینم یه نمونه کد دیگه که میشه بصورت فقط border هم استفاده کرد



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>border003</title>

<style type="text/css">

body {font-family:Arial, Helvetica, sans-serif, Tahoma; font-size:11px;}

#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;}

#xsnazzy h1 {font-size:2em; color:#000000;}

#xsnazzy h2 {font-size:1.5em;color:#a32118; border:0;}

#xsnazzy p {padding-bottom:0.5em;}

#xsnazzy h2 {padding-top:0.5em;}

#xsnazzy {background: transparent; margin:1em;}



.xtop, .xbottom {display:block; background:transparent; font-size:1px;}

.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}

.xb1, .xb2, .xb3 {height:1px;}

.xb2, .xb3, .xb4 {background:#e0e0e0; border-left:1px solid #a32118; border-right:1px solid #a32118;}

.xb1 {margin:0 5px; background:#a32118;}

.xb2 {margin:0 3px; border-width:0 2px;}

.xb3 {margin:0 2px;}

.xb4 {height:2px; margin:0 1px;}



.xboxcontent {display:block; background:#e0e0e0; border:0 solid #a32118; border-width:0 1px;}



</style>

</head>



<body>

<div id="xsnazzy">

<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>

<div class="xboxcontent">

<h1>Scorpion_man</h1>

<h2>Barnamenevis.org</h2>

</div>

<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>

</div></body>

</html>

بازم خواستین خبر بدین
موفق باشین

**mehrdad201** · چهارشنبه 19 دی 1386, 14:05 عصر

نوشته شده توسط scorpion_man

با سلام به همه دوستان
فکر نمیکردم اینطوری استقبال بشه من در مورد گرد کردن کدهای زیادی دارم که یا خودم نوشتم یا سورسش رسیده چون 3 ساله پیش منم عاشق گرد کردن بودم هر لایه ای دستم میرسید گردش میکردم
اینم یه نمونه کد دیگه که میشه بصورت فقط border هم استفاده کرد



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>border003</title>

<style type="text/css">

body {font-family:Arial, Helvetica, sans-serif, Tahoma; font-size:11px;}

#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;}

#xsnazzy h1 {font-size:2em; color:#000000;}

#xsnazzy h2 {font-size:1.5em;color:#a32118; border:0;}

#xsnazzy p {padding-bottom:0.5em;}

#xsnazzy h2 {padding-top:0.5em;}

#xsnazzy {background: transparent; margin:1em;}



.xtop, .xbottom {display:block; background:transparent; font-size:1px;}

.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}

.xb1, .xb2, .xb3 {height:1px;}

.xb2, .xb3, .xb4 {background:#e0e0e0; border-left:1px solid #a32118; border-right:1px solid #a32118;}

.xb1 {margin:0 5px; background:#a32118;}

.xb2 {margin:0 3px; border-width:0 2px;}

.xb3 {margin:0 2px;}

.xb4 {height:2px; margin:0 1px;}



.xboxcontent {display:block; background:#e0e0e0; border:0 solid #a32118; border-width:0 1px;}



</style>

</head>



<body>

<div id="xsnazzy">

<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>

<div class="xboxcontent">

<h1>Scorpion_man</h1>

<h2>Barnamenevis.org</h2>

</div>

<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>

</div></body>

</html>

بازم خواستین خبر بدین
موفق باشین

کارتون واقعا فوق العاده بود...........
یه سوال
تو IE و فایر فاکس کار میکنه. تو بروزرهای دیگه هم چکش کردید ؟؟؟؟؟؟؟

**scorpion_man** · چهارشنبه 19 دی 1386, 14:33 عصر

با سلام به دوستان عزیز
بله تو هر browseri چک شده و کار میکنه
موفق باشید

نام تاپیک: گرد کردن لبه ها (Panel(Div

ابزار های تاپیک

نمایش

گرد کردن لبه ها (Panel(Div

#1

هیچ تاثیری روی حجم نداره !

اینم Div لبه گرد !

عالی بود !

تاپیک های مشابه

مشکل Panel با IE 7

سوال در مورد Panel و پرینت آن

نمایش Panel

فوریسوالی در مورد قرار دادن یک شی مثل panel در جای خاصی از صفحه از طریق کد نویسی

قرار دادن چندین Panel در یک صفحه

قوانین ایجاد تاپیک در تالار