ورود

View Full Version : گرد کردن Div فقط قسمت بالا


ehsan_starlight
چهارشنبه 05 بهمن 1390, 14:44 عصر
سلام دوستان عزیز

یه تگ div دارم به نام Header ،،،،
میخواستم فقط حاشیه بالایی اون گرد بشه !!!
ممنون میشم راهنمایی کنید...
hamid_shrk
چهارشنبه 05 بهمن 1390, 14:53 عصر
به این لینک سر بزنید :
http://jquery.malsup.com/corner/
ravand
چهارشنبه 05 بهمن 1390, 19:29 عصر
داداش من رفتم گردش كنم نشد ميشه يه مثال بذاري؟

<html>
<head>
<style>
#contents{
width:200px;
width:200px;
border:2px #F4CC12 solid;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>saye</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#contents").corner();
});
</script>
</head>
<body>
<div id="contents">
جي كوئري
</div>
</body>
</html>
arkia
چهارشنبه 05 بهمن 1390, 21:15 عصر
#Header {
border-top-right-radius:10px;
border-top-left-radius:10px;
}
cyrusthegreat
پنج شنبه 06 بهمن 1390, 01:13 صبح
دوست عزیز

شما سه تا راه داری. یکیش استفاده از CSS هست که arkia توضیح دادن. که البته مشکل ‍‍پشتیبانی نشدن توی مرورگر های قدیمی رو داره که البته اونم قابل حل هست ولی یکم حجم می ره بالا

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

سومین راه حل هم استفاده از Javascript هست که کلن این کار رو توصیه نمی کنم.
ravand
پنج شنبه 06 بهمن 1390, 15:23 عصر
من شنيدم با جي كوئري يه راه حل خاص خودش رو داره ميخوام بدونم چحوري ميشه اين كار رو كرد؟
اون راههايي كه شما گفتيد رو بلدم.
IMANAZADI
پنج شنبه 06 بهمن 1390, 15:30 عصر
#Header {
border-top-right-radius:10px;
border-top-left-radius:10px;
}


دوست عزیز اینو خودت امتحان کردی

این چیزی که شما گفتید من امتحان کردم و ریختم تو فایل CSS و آی دی اونو دادم به DIV ولی اصلا تو CSS نمیشناسه و زیر کد ها خط به منزله خطا میندازه
میشه راهنمایی کنی
ravand
پنج شنبه 06 بهمن 1390, 15:38 عصر
براي چي خطا ميده اين كدها كه اشكالي نداره؟
فكر ميكنم بايد توي يه مرورگر كه از css3 پشتيباني كنه امتحان كني مثل مرورگر كروم . نسخه ي 8 اكسپلورر هم براش كار نميكنه.

<html>
<head>
<style>
#contents{
width:200px;
width:200px;
border:2px #F4CC12 solid;
border-top-right-radius:10px;
border-top-left-radius:10px;
}
</style>
<title>saye</title>
</head>
<body>
<div id="contents">
متن
</div>
</body>
</html>
IMANAZADI
پنج شنبه 06 بهمن 1390, 16:12 عصر
توی IE8 که جواب نداد
بعد این کد شعاع حاشیه
border-top-right-radius:10px;
رو من دستی توی PROPERTIES CSS در قسمت BORDER چک کردم نبود
arkia
پنج شنبه 06 بهمن 1390, 19:15 عصر
دوست عزیز اینو خودت امتحان کردی

این چیزی که شما گفتید من امتحان کردم و ریختم تو فایل CSS و آی دی اونو دادم به DIV ولی اصلا تو CSS نمیشناسه و زیر کد ها خط به منزله خطا میندازه
میشه راهنمایی کنی

کد درسته من خودم تو کارام استفاده می کنم شما کدتون رو بزارید برسی کنیم، مرورگرتون چیه؟:متفکر:

اینجا نمونه ش رو ببینید و آنلاین تست کنید (http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_border-top-right-radius)
arkia
پنج شنبه 06 بهمن 1390, 19:43 عصر
توی IE8 که جواب نداد
بعد این کد شعاع حاشیه
border-top-right-radius:10px;
رو من دستی توی PROPERTIES CSS در قسمت BORDER چک کردم نبود

دلیلش پشتیبان نکردن IDE تون از CSS3 هستش، اگه از Adobe Dreamweaver CS5 استفاده می کنی باید به نسخه ی جدید ارتقاء بدید تا در قسمت Properties بیاد.

متاسفانه IE از این امکان پشتیبانی نمیکنه و شما باید این فایل (http://curved-corner.googlecode.com/files/border-radius.htc) رو دانلود کنید و کنار پروژتون بزارید و توی استایل این کد رو اضافه کنید:

behavior: url(http://yoursite.com/border-radius.htc);


این هم یک نمونه Cross Browser (http://curved-corner.googlecode.com/files/border-radius-demo.zip)
cyrusthegreat
جمعه 07 بهمن 1390, 15:45 عصر
داداش من رفتم گردش كنم نشد ميشه يه مثال بذاري؟

<html>
<head>
<style>
#contents{
width:200px;
width:200px;
border:2px #F4CC12 solid;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>saye</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#contents").corner();
});
</script>
</head>
<body>
<div id="contents">
جي كوئري
</div>
</body>
</html>


من شنيدم با جي كوئري يه راه حل خاص خودش رو داره ميخوام بدونم چحوري ميشه اين كار رو كرد؟
اون راههايي كه شما گفتيد رو بلدم.

دوست عزیز

طبق اون چیزی که من از کدتون دیدم، شما اومدید بدون اینکه plugin جی کوئری رو به صفحتون اضافه کنید می خوایید ازش استفاده کنید. خب معلومه که درست نمی شه. خود فریم ورک Jquery دارای تابع corner نیست، بلکه شما می بایست از plugin اون که تو این صفحه (http://malsup.github.com/jquery.corner.js) هست استفاده کنید.
golnouri
جمعه 07 بهمن 1390, 19:39 عصر
کد درسته تو ie 9 جواب میده
مشکل خط کشیدن هم به دلیل اینه که ویرایشگرت از css3 پشتیبانی نمیکنه