طراحی قالب چند ستونه با div مانند عکس نمونه

[neda555]

سلام
بنده میخوام قالبی شبیه قالب زیر را با div طراحی کنم ولی نمیدونم چه طور کسی میتونه روی همین نمونه بهم بگه چه کار کنم؟
ممنون
90768

http://barnamenevis.org/images/misc/pencil.png

[neegar]

سلام
قالب بالا رو به شکل زیر بنویس



<div></div>
<div>
<div></div>
<div></div>
<div>
<div style="float: left;"></div>
<div style="float: left;">
<div></div>
<div></div>
</div>
<div style="float: left;"></div>
</div>
<div></div>
<div>
<div style="float: left;"></div>
<div style="float: left;"></div>
<div style="float: left;"></div>
<div style="float: left;"></div>
</div>
</div>


برای اندازه هاشون هم تو استایلش بهشون height و width بده.

[neda555]

ممنون دوست عزیز میشه لطفا برای div ها id بزارین که من متوجه بشم منظورتون را
تعداد div هایی که با توجه به شکل گذاشتم باید خیلی بیشتر باشه مثلا در پایین من 7 قسمت دارم
یه سوال هم دارم اینکه چرا float را برای همه left دادین؟

[tamafi6]

سلام
بنده میخوام قالبی شبیه قالب زیر را با div طراحی کنم ولی نمیدونم چه طور کسی میتونه روی همین نمونه بهم بگه چه کار کنم؟
ممنون
90768

http://barnamenevis.org/images/misc/pencil.png
برای هریک ازقاب هایه نام انتخاب کن مثال:
<div id="name"></div>
سعی کن برای cssصفحه جداگانه درست کن که هم حجم صفحه بیادپایین هم صفحه ات شلوغ نشه خودت هم باهاش راحت کارکنی
برای تنظیم وترازکردن هرقاب ازکدزیراستفاده کن مثال:


#name {
display:block;
width:30px;
height:358px;
position:absolute;
left:511px;
top:0px;
z-index:100;
margin:0;
padding:0;
background:url(img.png) repeat-y top left;
}

[neda555]

برای هریک ازقاب هایه نام انتخاب کن مثال:
<div id="name"></div>
سعی کن برای cssصفحه جداگانه درست کن که هم حجم صفحه بیادپایین هم صفحه ات شلوغ نشه خودت هم باهاش راحت کارکنی
برای تنظیم وترازکردن هرقاب ازکدزیراستفاده کن مثال:


#name {
display:block;
width:30px;
height:358px;
position:absolute;
left:511px;
top:0px;
z-index:100;
margin:0;
padding:0;
background:url(img.png) repeat-y top left;
}

ممنون از پاسختون ولی این جواب سوال من نیست من در مورد div پرسیدم و چیدمانشون!
لطفا اگر در این مورد میدونید راهنمایی کنید

[saadatieathar]

سلام.
خدمت شما :



<center>

<div style="width:800px;height:70px;border-radius:10px;border:1px solid;">
Top
</div>

<div style="width:800px;border:1px solid;margin-top:10px;">

<div style="height:200px;width:800px;border-bottom:1px solid;;">
Header
</div>


<div style="height:30px;width:800px;border-bottom:1px solid;;">
Menu

</div>

<div style="width:800px;">
<div style="width:195px;height:400px;border-right:1px solid;float:left">
Left Box
</div>


<div style="width:400px;height:400px;border-right:1px solid;float:left">

<div style="width:400px;height:200px;border-bottom:1px solid;">
Center box 1
</div>

<div style="width:400px;height:200px;">
Center box 2
</div>
</div>


<div style="width:195px;height:400px;float:left">

right box
</div>

</div>

<div style="clear:both;"> </div>
</div>



<div style="width:800px;border:1px solid;height:200px;margin-top:10px;">

<div style="width:195px;float:left;border-right:1px solid;height:200px;">
1
</div>


<div style="width:195px;float:left;border-right:1px solid;height:200px;">
2
</div>


<div style="width:195px;float:left;border-right:1px solid;height:200px;">
3
</div>


<div style="width:195px;float:left;border-right:0px solid;height:200px;">
4
</div>

<div style="clear:both;"> </div>

</div>

</center>

[neda555]

ممنون جناب saadatieathar (http://barnamenevis.org/member.php?249899-saadatieathar)

چرا میگن قالبی که div زده میشه معمولا به هم میریزه ؟شما برای جلوگیری از این اتفاق چه راهکاری داری؟

[saadatieathar]

خواهش می کنم.
div برای تقسیم بندی وب سایت استاندارد خوبیه که الان اکثریت استفاده می کنند.
به هم ریختگی معمولا زمانی پیش میاد که می خواییم دو تا div رو کنار هم بذاریم (حالا یا بیشتر).
خیلی راحت با خاصیت float میشه div ها رو کنار هم چید.
اگر به هم ریختگی بود کافیه یه div خالی با استایل clear:both بعد از div هامون استفاده کینم.مشکل رفع میشه.
خوب شما بیا یه صفحه با div طراحی کن اگر دیدید به هم ریختگی ایجاد شد گد رو بذاردی تا ببینیم چرا به هم ریختگی ایجاد شده
.

[neda555]

ببخشید یه سوال دیگه قسمت وسط و محتوای سایت نباید ارتفاع ثابت داشته باشه چون ممکنه مثلا در ستون سمت چپ(left box) که قراره مدیر لینک بزاره تعدادشون زیاد بشه اون وقط میزنه بیرون محتوا
این طور نیست؟ باید چه کرد؟

[EMERTAT]

چون ممکنه ارتفاع تغییر کنه از min-height استفاده کنید

اینجوری هنگام load یه اندازه ثابت ابتدایی می گیره و اگه نیاز به ارتفاع داشته باشه تغییر می کنه

ولی اگر تنها از height استفاده کنی همیشه یه اندازه ثابت داری

[saadatieathar]

خوب ارتفاع ثابتش رو بردارید ! تا هر وقت نوشته ها زیاد شد متناسب با اون زیاد شه.
حالا اگر هم می خوایید یه سایز به صورت پیش فرض باشه و بعد که مطالب گذاشته شد متناسب با اون بزرگ شه می تونید از min-height استفاده کنید.

[neda555]

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

[neegar]

چرا میگن قالبی که div زده میشه معمولا به هم میریزه ؟شما برای جلوگیری از این اتفاق چه راهکاری داری؟



از همه راحت تر اینکه از Table استفاده کنی نه بهم میریزه نه لازمه انقدر براش استایل تعرف کنی.

[2undercover]

بابا تاپیک قدیمی رو بالا نیارید!‌دوما الان دوره Tableless هست!