رفتن به مطلب

مشکل در طراحی پوسته


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

سلام دوستان

من دارم یه پوسته ایی طراحی میکنم من توی قسمت Content گیر کردم میخوام یه عکسی بزارم برای دکمه ادامه مطلب و وقتی بهش Float:Left میدم از Class خارج میشه ، دلیلش چیه ، کجاشو اشتباه رفتم ؟

شات از موقع ایی که بهش Float ندادم : http://up.vbiran.ir/...662931197_6.jpg

شات از وقتی که بهش Float دادم : http://up.vbiran.ir/...663027335_5.jpg

اینم کدای PHP :


<!------- contents --------->
<div class="contents">

<div class="title-contents">
<div class="txt-ctitle">
دانلود رمان
</div>
</div>

<div class="contents-box">
<div class="author-content">
نویسنده : فرشید درویشی تاریخ انتشار : 93 دیدگاها
</div>

<div class="text-contents">
<div class="img-contents">
<img src="images/p.jpg">
</div>
<div class="contents-txt">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
</div>
<div class="more">
<a href="#"><img src="images/more.png"></a>
</div>
</div>
</div>

</div>
<!------- End contents ------->

اینم کدای CSS :


/********** contents ***********/
.contents {
width:100%;
height:auto;
background:#e8e8e9;
margin-top:10px;
}
.title-contents {
width:100%;
height:28px;
background:url(images/content.png);
}
.txt-ctitle {
margin-right:40px;
color:#FFF;
text-decoration:none;
font-size:12px;
}
.contents-box {
width:100%;
height:auto;
background:#e8e8e9;
margin-bottom:10px;
}
.author-content {
font-size:10px;
color:#666;
margin-right:10px;
width:100%;
height:auto;
margin-bottom:10px;
}
.text-contents {
width:100%;
height:auto;
}
.img-contents {
width:400px;
height:224px;
background:#06C;
margin:auto;
}
.img-contents img {
width:400px;
height:224px;
}
.contents-txt {
margin:10px;
font-size:14px;
}
.more {
float:left;
}

ویرایش شده توسط F a r s h i d
لینک به ارسال

بعد از float باید clear:both بدی تا از کلاس خارج نشه

جایگزین کن

.contents {
width:100%;
height:auto;
background:#e8e8e9;
margin-top:10px;
}
.title-contents {
width:100%;
height:28px;
background:url(images/content.png);
}
.txt-ctitle {
margin-right:40px;
color:#FFF;
text-decoration:none;
font-size:12px;
}
.contents-box {
width:100%;
height:auto;
background:#e8e8e9;
margin-bottom:10px;
}
.author-content {
font-size:10px;
color:#666;
margin-right:10px;
width:100%;
height:auto;
margin-bottom:10px;
}
.text-contents {
width:100%;
height:auto;
}
.img-contents {
width:400px;
height:224px;
background:#06C;
margin:auto;
}
.img-contents img {
width:400px;
height:224px;
}
.contents-txt {
margin:10px;
font-size:14px;
}
.more {
float:left;
}
.clear { clear:both }

	 <div class="contents">

<div class="title-contents">
<div class="txt-ctitle">
دانلود رمان
</div>
</div>

<div class="contents-box">
<div class="author-content">
نویسنده : فرشید درویشی تاریخ انتشار : 93 دیدگاها
</div>

<div class="text-contents">
<div class="img-contents">
<img src="images/p.jpg">
</div>
<div class="contents-txt">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
</div>
<div class="more">
<a href="#"><img src="images/more.png"></a>
</div>
<div class="clear"> </div>
</div>
</div>

</div>

ویرایش شده توسط m!lad
لینک به ارسال

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

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

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

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

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

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

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

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

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