قالب سه ستونه

[mohsen.nsb44]

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

[khanlo.javid]

خوب دوست عزیز اگه مقدار اندازه رو با % مشخص کنی دیگه این اتفاق نمیفته.




موفق باشید.

[cyrusthegreat]

دوست عزیز

خیلی راحت تو گوگل سرچ کنید 3 column css template

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

[EMERTAT]

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

بعد خوب یه تگ DIV اصلی در نظر بگیر و با با قرار دادن کد CSS

margin-left:auto;
margin-right:auto;



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


position:relative;


شناورش کن

اینجوری با توجه به عنصر پدر موقعیت دهی می شن

اگه کدت بزاری و با پیغام بهم خبر بدی تا بیشتر کمک کنم خوشحال می شم

[cyrusthegreat]

دوست عزیز

انجام اینکار، با استفاده از float بهتر هستش. قابلیت تغییر آسان float نسبت به position : relative بزرگترین مزیت هستش.

[EMERTAT]

حق با شماست cyrusthegreat و بعد باید با در صد تگ دوم رو مقدار دهی کنه

هر دو راه حل درست ولی float آسانتر هست

دیگه بستگی به خودشون داره

[mohsen.nsb44]

کدی که من نوشتم به صورت زیره

<div style="position:absolute; right:5px; top:176px; height:auto; width:200px;">

</div>


<div style="position:absolute; left:5px; top:176px; height:auto; width:200px;">

</div>


<div style="position:absolute; left:228px; right:228px; top:176px; height:auto;">

</div>
اما زمانی که اندازه صفحه رو تغییر میدم محتویات دایو وسطی میره زیر دایو سمت چپی

[EMERTAT]

نگاه کن

تگی که تغییر اندازه می ده در حقیقت div سوم هست ( برای تشخیص می تونی رنگش عوص کنی )

خوب بیا ببینیم چه اتفاقی افتاده

شما با کد position:absolute; اون از جریان کلی صحفه خارج و به صورت شناور در آوردید

با کد left:228px; گفتید فاصله از چب 228px باشه

با کد right:228px; گفتید فاصله از راست 228px باشه

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

پس با تغییر اندازه مرورگر اونم تغییر می کنه

حالا ویژگی 3 ستونی که می خوای بگو تا بگم چی کار کنی

[mohsen.nsb44]

نگاه کن

تگی که تغییر اندازه می ده در حقیقت div سوم هست ( برای تشخیص می تونی رنگش عوص کنی )

خوب بیا ببینیم چه اتفاقی افتاده

شما با کد position:absolute; اون از جریان کلی صحفه خارج و به صورت شناور در آوردید

با کد left:228px; گفتید فاصله از چب 228px باشه

با کد right:228px; گفتید فاصله از راست 228px باشه

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

پس با تغییر اندازه مرورگر اونم تغییر می کنه

حالا ویژگی 3 ستونی که می خوای بگو تا بگم چی کار کنی
یه سه ستونی مثل یاهو میخوام
البته قالب نمیخوام قالب رو خودم طراحی میکنم
فقط اوم 3 تا دایو روی میخوام که سمت راست وسط و سمت چپ صفحه قرار دارند و کنترل ها رو توشون میزاریم
چیزی که واسه من اهمیت داره اینه که با تغییر سایز صفحه محتویات دایو ها جابجا نشن و ثابت بمونن و صفحه از روشون بگزره
برای مثال هم میتونید سایت یاهورو باز کنید و با تغییر اندازه صفحه میبینید که محتویات صفحه تغییر نمیکنه

[EMERTAT]

پس صبر کنید تا یکی بنویسم

سعی می کنم توضیحات رو هم بنویسم

[EMERTAT]

ببخشید دیر شد

با استفاده از float نوشتم

این کد HTML

<div id="middileContent">
<div id="slide1"></div>
<div id="slide2"></div>
<div id="slide3"></div>
</div>






#middileContent
{
width:960px;
height:350px;
border:1px solid #FF6666;
margin-left:auto;
margin-right:auto;
}
#slide1
{
float:left;
height:200px;
width:20%;
border:1px solid #000;
}
#slide2
{
float:left;
height:200px;
width:59%;
border:1px solid #000;
margin-left:auto;
margin-right:auto;
}
#slide3
{
float:right;
height:200px;
width:20%;
border:1px solid #FF0099;
}


خوب یه تگ div ایجاد کردم و اون 3 تای دیگه رو داخل اون گذاشتم و با استفاده از css اون در وسط قرار دادم

حالا اون 3 تا تگ div با استفاده از float راست چین یا چپ چین کردم

بازم معذرت می خوام دیر شد

بعد که ازش استفاده کردی بهم خبر بده

[mohsen.nsb44]

ببخشید دیر شد

با استفاده از float نوشتم

این کد HTML

<div id="middileContent">
<div id="slide1"></div>
<div id="slide2"></div>
<div id="slide3"></div>
</div>






#middileContent
{
width:960px;
height:350px;
border:1px solid #FF6666;
margin-left:auto;
margin-right:auto;
}
#slide1
{
float:left;
height:200px;
width:20%;
border:1px solid #000;
}
#slide2
{
float:left;
height:200px;
width:59%;
border:1px solid #000;
margin-left:auto;
margin-right:auto;
}
#slide3
{
float:right;
height:200px;
width:20%;
border:1px solid #FF0099;
}


خوب یه تگ div ایجاد کردم و اون 3 تای دیگه رو داخل اون گذاشتم و با استفاده از css اون در وسط قرار دادم

حالا اون 3 تا تگ div با استفاده از float راست چین یا چپ چین کردم

بازم معذرت می خوام دیر شد

بعد که ازش استفاده کردی بهم خبر بده







دوست عزیز ممنون از در مورد <blockquote کمی توضیح بدین که چیکار میکنه
در ضمن اگه من عرض رو تو midel برابر 100 درصد بکنم مشکلی پیش نمیاد؟

[EMERTAT]

یه تگ DIV اصلی در نظر گرفتم و با طول ثابت دادن به اون width:960px; باعث شدم که هنگام تغییر اندازه مرورگر همیشه طولش 960PX بمونه

با margin-left:auto; و margin-right:auto; باعث شدم که در وسط قرار بگیره

اون 3 تا تگ داخلی هم به استفاده از FLOAT اون رو از جریان کلی صحفه خارج و به راست و چپ متمایل کردم

************************

اگر طول MIDDLE رو به صورت درصدی بزاری با تغییر طول مرورگر طول اونم تغییر می کنه

نه نذارش

[mohsen.nsb44]

گزینه blockquote چیکار میکنه؟
کادر قرمزو چطوری میتونم حذف کنم؟
زمانی که 2 تا دایو بالای دایو های شما میزارم اندازه هاشون بهم میریزه

[EMERTAT]

یادم رفت BORDER ها رو پاک کن

HEIGHT همه رو هم برابر AUTO بزار

[EMERTAT]

blockquote ؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟

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

الان پاکش کردم

تو HTML همچین تگی داریم برای نقل قول

اون کارد هم برو هرچی BORDER می بینی پاک کن

HEIGHT رو برابر AUTO بزار

[mohsen.nsb44]

یادم رفت BORDER ها رو پاک کن

HEIGHT همه رو هم برابر AUTO بزار
اینکارو کردم ممنون فقط یه مشکل جزئی هست که اگه کمک کنین حل بشه عالی میشه
دایو وسطیچسبیده به دایو سمت چپی اما با دایو سمت راس چند پیکسلی فاصله داره

[EMERTAT]

اون مربوط به width که دادم

اون ها رو باید دست

:چشمک:

[mohsen.nsb44]

اون مربوط به width که دادم

اون ها رو باید دست

:چشمک:
عرض رو شما 59 درصد دادین تغییر دادم کردمش 60 درصد اما به خط پایین رفت دایو وسطی به هر حال ممنون اهمیت زیادی هم نداره
مرسی

[EMERTAT]

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

من هر روز چکش می کنم

خوشحال می شم بتونم کمکی کنم

:لبخندساده:

[mohsen.nsb44]

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

من هر روز چکش می کنم

خوشحال می شم بتونم کمکی کنم

:لبخندساده:
مرسی حتما
بازم تشکر میکنم