PDA

View Full Version : گرد کردن لبه ها (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 مشابه هستن اما در دو مرورگر متفاوت نشون داده میشن !

http://i4.tinypic.com/7y6tvza.gif







<div>

<div id="Panel1" style="height:50px;width:203px;text-align: left">
<fieldset>
<legend>
Title
</legend>
<br />

</fieldset>
</div>
rezamizbani
دوشنبه 10 دی 1386, 14:07 عصر
مشکل اینجاست که من چندتا از این پنلها در صفحه اصلیم دارم و اگه بخوام از عکس استفاده کنم حجم فایلم بالا میره و باید دو ساعت بشینم تا برنامم لود بشه!!!!!!؟

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

فقط باید از چهار تا عکس 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 کیوبایت هم نمی رسه !!!!!! :چشمک:

دانلود پنل لبه گرد (http://barnamenevis.org/forum/attachment.php?attachmentid=13314&stc=1&d=1199100892)
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-background-20050216/#the-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 (http://barnamenevis.org/forum/member.php?u=37286)

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

ببین این الان تو پر میسازه میشه فقط border بهش داد؟
rezamizbani
چهارشنبه 12 دی 1386, 12:51 عصر
با سلام به همه دوستان
بیا اینم کد یه 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 عصر
با سلام به همه دوستان
فکر نمیکردم اینطوری استقبال بشه من در مورد گرد کردن کدهای زیادی دارم که یا خودم نوشتم یا سورسش رسیده چون 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 چک شده و کار میکنه
موفق باشید