رفتن به مطلب

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


پست های پیشنهاد شده

مشکلی در 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>

لینک به ارسال

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


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

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

لینک به ارسال

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

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

لینک به ارسال

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

لینک به ارسال

سلام

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

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

--

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


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

موفق باشید

لینک به ارسال

کدها رو اشتباه گذاشتم اون 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;




}

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...