رفتن به مطلب

ایجاد divهای پشت هم در ایندکس قالب


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

سلام

چطور می تونم در صفحه اول قالب دیوهارو پشت سر هم بدون اینکه تیبلی ایجاد کنم قرار بدم و داخلش دسته بندی قرار بدم

مثل این عکس :

post-2192-0-22240700-1378014176_thumb.jp

ممنون

لینک به ارسال

سلام من اول كار كه طراحي شرو ع كردم همين مشكل داشتم !‌

با flaot دادن و margin دادن ميشه اين كارو كرد !‌

شما يك كلاس درست كنيد نه چند تا ! و هي همون ديگه كپي و پيست كنيد !‌ واسه نمونه هم اين مينويسم !‌


.class{
flaot:left;
margin-left:10px;
width : ? px;
height: ? px;
border: 2px;
}

اين تعريفش توي css هست فقط كافيه توي html همين كلاس رو 3 بار تكرار كنيد تا 3 تا پشت هم داشته باشين

فقط اندازه هارو طوري تعيين كنيد كه در هر سطر 3 تا جعبه قرار بگيره . و وقتي 4 بار كپي كردي خودش ميره خط پايين !‌

ویرایش شده توسط RedPlus
لینک به ارسال

سلام من اول كار كه طراحي شرو ع كردم همين مشكل داشتم !‌

با flaot دادن و margin دادن ميشه اين كارو كرد !‌

شما يك كلاس درست كنيد نه چند تا ! و هي همون ديگه كپي و پيست كنيد !‌ واسه نمونه هم اين مينويسم !‌


.class{
flaot:left;
margin-left:10px;
width : ? px;
height: ? px;
border: 2px;
}

اين تعريفش توي css هست فقط كافيه توي html همين كلاس رو 3 بار تكرار كنيد تا 3 تا پشت هم داشته باشين

فقط اندازه هارو طوري تعيين كنيد كه در هر سطر 3 تا جعبه قرار بگيره . و وقتي 4 بار كپي كردي خودش ميره خط پايين !‌

خیلی جالب بود و ساده - خیلی ممنونم

لینک به ارسال

كد css & html قرار بده تا مشكلش رو بفهمم از روي عكس نميشه !‌

ویرایش شده توسط RedPlus
لینک به ارسال

فلوت لفت یا رایت می زنم ینی هر دو رو هم ک تست می کنم اینجوری میشه


<?php get_header(); ?>
<style type="text/css">
#contencatog {
background: #FFF;
border: solid 1px #999;
float: left;
height: auto;
width: 963px;
margin-bottom: 10px;
}
.allcontent {
float: right;
width: 460px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
}
.allcontenttit {
background-color: #FC9;
height: 30px;
width: 460px;
}
.allcontentcon {
width: 460px;
}
</style>
<div id="main">
<div id="contencatog">

<div class="allcontent">
<div class="allcontenttit">
Content for class "allcontenttit" Goes Here
</div>
<div class="allcontentcon">
Content for class "allcontentcon" Goes Here
</div>
</div>

<div class="allcontent">
<div class="allcontenttit">
Content for class "allcontenttit" Goes Here
</div>
<div class="allcontentcon">
Content for class "allcontentcon" Goes Here
</div>
</div>

<div class="allcontent">
<div class="allcontenttit">
Content for class "allcontenttit" Goes Here
</div>
<div class="allcontentcon">
Content for class "allcontenttit" Goes Here
</div>
</div>

<div class="allcontent">
<div class="allcontenttit">
Content for class "allcontenttit" Goes Here
</div>
<div class="allcontentcon">
Content for class "allcontentcon" Goes Here
Content for class "allcontentcon" Goes Here
Content for class "allcontentcon" Goes Here
Content for class "allcontentcon" Goes Here
Content for class "allcontentcon" Goes Here
</div>
</div>

<div class="allcontent">
<div class="allcontenttit">
Content for class "allcontenttit" Goes Here
</div>
<div class="allcontentcon">
Content for class "allcontentcon" Goes Here
</div>
</div>

<div class="allcontent">
<div class="allcontenttit">
Content for class "allcontenttit" Goes Here
</div>
<div class="allcontentcon">
Content for class "allcontentcon" Goes Here
</div>
</div>

<div class="allcontent">
<div class="allcontenttit">
Content for class "allcontenttit" Goes Here
</div>
<div class="allcontentcon">
Content for class "allcontentcon" Goes Here
</div>
</div>

<div class="allcontent">
<div class="allcontenttit">
Content for class "allcontenttit" Goes Here
</div>
<div class="allcontentcon">
Content for class "allcontentcon" Goes Here
</div>
</div>

<div class="allcontent">
<div class="allcontenttit">
Content for class "allcontenttit" Goes Here
</div>
<div class="allcontentcon">
Content for class "allcontentcon" Goes Here
Content for class "allcontentcon" Goes Here
Content for class "allcontentcon" Goes Here
Content for class "allcontentcon" Goes Here
Content for class "allcontentcon" Goes Here
</div>
</div>

<div class="allcontent">
<div class="allcontenttit">
Content for class "allcontenttit" Goes Here
</div>
<div class="allcontentcon">
Content for class "allcontentcon" Goes Here
</div>
</div>

</div>
</div>
<?php get_footer(); ?>

لینک به ارسال

سلام من الان اين گذاشتم كد خودتون هم هست درست نشون ميداد !‌

post-3159-0-20543200-1378140294_thumb.pn


<style type="text/css">
#contencatog {
background: #FFF;
border: solid 1px #999;
float: left;
height: auto;
width: 963px;
margin-bottom: 10px;
}
.allcontent {
float: right;
width: 460px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
}
.allcontenttit {
background-color: #FC9;
height: 30px;
width: 460px;
}
.allcontentcon {
width: 460px;
}
</style>
<div id="main">
<div id="contencatog">

<div class="allcontent">
<div class="allcontenttit">
</div>
<div class="allcontentcon">
</div>
</div>

<div class="allcontent">
<div class="allcontenttit">
</div>
<div class="allcontentcon">
</div>
</div>

<div class="allcontent">
<div class="allcontenttit">
</div>
<div class="allcontentcon">
</div>
</div>

<div class="allcontent">
<div class="allcontenttit">
</div>
<div class="allcontentcon">
</div>
</div>

<div class="allcontent">
<div class="allcontenttit">
</div>
<div class="allcontentcon">
</div>
</div>

<div class="allcontent">
<div class="allcontenttit">
</div>
<div class="allcontentcon">
</div>
</div>

<div class="allcontent">
<div class="allcontenttit">
</div>
<div class="allcontentcon">
</div>
</div>

<div class="allcontent">
<div class="allcontenttit">
</div>
<div class="allcontentcon">
</div>
</div>

<div class="allcontent">
<div class="allcontenttit">
</div>
<div class="allcontentcon">
</div>
</div>

<div class="allcontent">
<div class="allcontenttit">
</div>
<div class="allcontentcon">
</div>
</div>

</div>
</div>

احتمالا كد php باش اين كارو كرده !‌مگر نه از نظر استايل دهي مشكلي نيست !‌

ویرایش شده توسط RedPlus
لینک به ارسال

بله به صورت خالی و بدون مطلب مشکلی نداره ولی وقتی مطلب ی طرف زیاد میشه نا میزون میشه بی زحمت عکس رو ببینید تو عکس توضیح بهتره

post-2192-0-96387200-1378144222_thumb.jp

مرسی

لینک به ارسال

بله به صورت خالی و بدون مطلب مشکلی نداره ولی وقتی مطلب ی طرف زیاد میشه نا میزون میشه بی زحمت عکس رو ببینید تو عکس توضیح بهتره

post-2192-0-96387200-1378144222_thumb.jp

مرسی

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

لینک به ارسال

در مورد حرف اشکان جان یه نکته رو هم من بگم که به نظرم اگه اتوماتیک نکنه و یه height ثابت بهشون بده دیگه این مشکل پیش نمیاد

لینک به ارسال

با تشكر از دوستان به خطر پاسخگو بودنشون :wub:

اما اگر چپ راست هم كنه بازم همينطور ميشه !‌ اما اون دوست عزيزمون درست گفتن كه ي ارتفاع ثابت بدي بهشون يا اين كه از max-height يا min-height دادن استفاده كني !‌ولي همون ثابت بدي بهتر هست !‌

لینک به ارسال

ممنون و سپاس از توجه و کمک همه دوستان

خب من نمی خام ارتفاع ثابت باشه چون ممکنه گاهی وقتا پیش بیاد که مجبور بشیم محتوای ی باکس بیشتر یا کنتر باشه و این کارو خراب می کنه

با آرشیو توری هم نشد

از راهنمایی اشکان استفاده کردم و ی سری به سایت دانلود خارجی که این کارو کرده بود زدم و دیدم که برای س ردیف از سه تا باکس جدا استفاده کرد و حالا داخل اون باکس های دیگه رو درسته کرده

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

عکس رو ببینید ...

post-2192-0-06364900-1378197763_thumb.pn

لینک به ارسال

با تشكر از دوستان به خطر پاسخگو بودنشون :wub:

اما اگر چپ راست هم كنه بازم همينطور ميشه !‌ اما اون دوست عزيزمون درست گفتن كه ي ارتفاع ثابت بدي بهشون يا اين كه از max-height يا min-height دادن استفاده كني !‌ولي همون ثابت بدي بهتر هست !‌

آقا RedPlus با تشکر از شما، منظور دو باکس جدا از هم هستش نه اینکه float یا text-align بدیم.

ارتفاع ثابت هم به قول آقا جعفر که گفتن نمیشه استفاده کرد چون محتوا فرق داره همیشه.

ممنون و سپاس از توجه و کمک همه دوستان

خب من نمی خام ارتفاع ثابت باشه چون ممکنه گاهی وقتا پیش بیاد که مجبور بشیم محتوای ی باکس بیشتر یا کنتر باشه و این کارو خراب می کنه

با آرشیو توری هم نشد

از راهنمایی اشکان استفاده کردم و ی سری به سایت دانلود خارجی که این کارو کرده بود زدم و دیدم که برای س ردیف از سه تا باکس جدا استفاده کرد و حالا داخل اون باکس های دیگه رو درسته کرده

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

عکس رو ببینید ...

post-2192-0-06364900-1378197763_thumb.pn

الان دیگه مشکل حل شده و مشکلی نیست.

لینک به ارسال

آقا RedPlus با تشکر از شما، منظور دو باکس جدا از هم هستش نه اینکه float یا text-align بدیم.

ارتفاع ثابت هم به قول آقا جعفر که گفتن نمیشه استفاده کرد چون محتوا فرق داره همیشه.

الان دیگه مشکل حل شده و مشکلی نیست.

بله - ممنون - فعلا مشکلی نیست در حال طراحی css هستم اگه مشکلی بود مزاحم میشم

لینک به ارسال

اهووم پس من اشتباه متوجه شده بودم فك كردم به فرض اگه يك رديف ارتفاع يكي از باكس ها 200 بود اون يكي هم اگه مطلبش كمتره 200 بشه

و همين طور در رديف هاي ديگه !‌اين طور كه الان هست فقط توي ي ستون هستن توي يك رديف قرار نميگيرن !‌ به هر حال مشكل براي دوستمون حل شده !‌

لینک به ارسال

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

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

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

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

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

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

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

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

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