tazeh

فاصله نگرفتن متن از کنار

6 پست در این موضوع قرار دارد

مشکلی در css بوجود اومده

من وقتی به نوشته داخل بلوکم از راست یا چپ عدد می دم مثلا 5px بجای اینکه نوشته 5 تا فاصله بگیره بلوک بزرگتر می شه.

در .post و .title

کد css


.post{
height: 100px;
width:350px;

border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
background-color:#c5c5c5;

#content {
background-color:#FFF;
width:600px;
height:200px;
margin:auto;
margin-top:10px;
border:solid 1px #ccc;
-moz-border-radius: 15px;
}

.cant-ent {
text-align:right;
padding:5px 5px 5px 5px;
font-family:tahoma;
font-size:11px;
width:350px;
height:180px;
background-color:#FFF;
float:right;
border:solid 1px #ccc;
-moz-border-radius: 10px;
border-radius: 10px;
margin-top:4px;
margin-right:3px;




}
.title{
height: 25px;
width:350px;

border-top-right-radius: 10px;
border-top-left-radius: 10px;
-o-border-top-right-radius: 10px;
-o-border-top-left-radius: 10px;
-moz-border-top-right-radius: 10px;
-moz-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
background-color:#c5c5c5;
border-bottom:1px solid #000000;
}


.post{
height: 100px;
width:350px;

border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
background-color:#c5c5c5;


}

کد


html
<div id="content">
<div class="cant-ent">
<div class="title">
عنوان
</div>
<div class="post">

متن مطلب
</div>

</div>

0

به اشتراک گذاری این پست


لینک به پست

واسه فاصله دادن باید از کد زیر استفاده کنید :


margin-right: 5px;
padding-right: 5px;

margin-right یعنی 5 پیکسل از راست فاصله بده

3

به اشتراک گذاری این پست


لینک به پست

من این فاصله هارو توی وبلاگ جوونیام به زبان ساده گذاشتم یه دید بزن .

http://3x0.blogfa.com/cat-2.aspx

2

به اشتراک گذاری این پست


لینک به پست

آره خیلی خوب توضیح دادی تو وبلاگت ... باید منتظر باشیم ببینیم کاربر ( تازه ) چه می کنن با کدی که دادیدم

0

به اشتراک گذاری این پست


لینک به پست

سلام

کد سی‌اس‌اسی که قرار دادید ، مشکلاتی داره .

البته منظورم از نظر ساختاری هست. دو بار از کلاس post استفاده کردید که در کلاس اول }ی که باز کردید ، رو نبستید.

--

البته ، برای اینکه درک بهتری از padding و margin و تفاوت‌شون پیدا کنید ، پیشنهاد می‌کنم از آموزشی که لینکش رو در پایین قرار دادم ، استفاده کنید.


http://www.webtarget.ir/blog/margin-padding-border/

موفق باشید

4

به اشتراک گذاری این پست


لینک به پست

کدها رو اشتباه گذاشتم اون post اولی اضافه هست

ببخشید

#content-m{
width:175px;
height:25x;
background-color:#c5c5c5;
float:left;
border:solid 1px #ccc;
-moz-border-radius: 10px;
border-radius: 10px;
matgin:3px 3px 3px 3px;
overflow:hiden;
}
.title{
height: 25px;
width:350px;

border-top-right-radius: 10px;
border-top-left-radius: 10px;
-o-border-top-right-radius: 10px;
-o-border-top-left-radius: 10px;
-moz-border-top-right-radius: 10px;
-moz-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
background-color:#c5c5c5;
border-bottom:1px solid #000000;
}

.post{
height: 100px;
width:350px;

border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
background-color:#c5c5c5;


}

.cant-ent {
text-align:right;
padding:5px 5px 5px 5px;
font-family:tahoma;
font-size:11px;
width:350px;
height:180px;
background-color:#FFF;
float:right;
border:solid 1px #ccc;
-moz-border-radius: 10px;
border-radius: 10px;
margin-top:4px;
margin-right:3px;




}

1

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری