کادر (Box) برای متن

mehran63 · Jul 9, 2013

سلام

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

در وسط وب سایت زیر سه کادر وجود دارد
کسی نمونه ای مثل این سراغ داره که بتونم سورسش رو بردارم
http://www.za.gg/
عکس اون باکسها هم تو لینک زیر هست
http://www.za.gg/images/home_3erbox.png
یه نمونه دیگه هم اینجاست
http://psdblast.com/paper-style-feature-box-graphics

jeyson · Jul 9, 2013

یعنی می خواین اون عکس کادر رو بذارین زیر کادرتون و توش چیز بنویسید؟؟؟
از کد backgorund-image استفاده می کنید و با width و height بهش انداره مشخص می دید.
با استفاده از padding هم فاصله ی متن از کادر رو مشخص می کنید.
به این حالت :

[PHPS]
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="JEYSON" />

<title>Untitled 1</title>
<style type="text/css">
#reza{
background-image: url("http://www.za.gg/images/home_3erbox.png");
font-family: Tahoma;
width: 290px;
height: 225px;
position: relative;
left: 50px;
padding-left: 35px;
padding-top: 20px;
}

</style>
</head>

<body>
<p id="reza"> Hello</p>

</body>
</html>
[/PHPS]

mehran63 · Jul 9, 2013

خیلی عالی است
فقط مسئله ای که هست اینه که متنی که داخل این بکگراند میزارم بیرون میزنه چطور این رو کنترل کنم؟
اگه از این box ها جایی سراغ دارید برام بزارید ممنون میشم

bestdata · Jul 9, 2013

کافیه overflow رو توی css مقدار hidden بذاری تا اگه بزنه بیرون نشون داده نشه فایل پیوست رو باز کنید متوجه میشید

mehran63 · Jul 10, 2013

خیلی عالی بود. جواب داد
1- اگه در مورد ترفندی که به کار بردی و این که چطور کار میکنه توضیحی بدی ممنون میشم
2- اندازه عکس روکه شما گذاشتید به اندازه زیر تغییر دادم تا فقط یک عکس باشه و وقتی این کار رو کردم باز مثل قبل شد
[CSSS]<style type="text/css"> .pic {
width: 290px;
height: 225px;
background-image: url(home_3erbox.png);
}
.box3 {
float: left;
direction: rtl;
text-align: right;
width: 260px;
height: 185px;
padding: 15px;
margin: 10px 0px 0px 30px;
overflow: hidden;
}

</style>[/CSSS]