دنیال یک کدی چیزی هستم که بشه اندازه تصویر رو میزان کرد!

Printable View

08-03-2009, 21:58
Mohammadali.

دنیال یک کدی چیزی هستم که بشه اندازه تصویر رو میزان کرد!

سلام دوستان!

صفحاتی که من طراحی میکنم معمولا یک مشکلی دارند و اون اینه که از table حال نمیکن استفاده کنم و از div استفاده میکنم و عشقم هم dreamweaver هست یک جای کار گیرم به نتیجه دلخواه نرسیدم مثلا تو شکل پایین:

[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]

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

[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]

چه کدی رو پیشنهاد میکنید حالا از html و css و javascript گرفته تا بقیه که اینکار رو انجام بده؟
08-03-2009, 22:27
neopersia

سلام
باید برای div اصلی صفحه که بعد از تگ body قرار میگیره یک عرض ثابت در نظر بگیرید بعد بقیه محتویات صفحه رو بزارید توی اون dvi. برای وسط قرار دادنشم میتونید از margin استفاده کنید. مثلاً اگر کلاس div رو wrapper بزارید این کد css کاری رو که میخواید انجام میده:
[html]
.wrapper {
width: 780px;
margin: 0 auto;
}
[/html]
08-03-2009, 23:13
Mohammadali.

خیلی ممنون.:10:
کدی که دادین رو استفاده کردم جالب کار میکنه ولی مشکلات دیگر رو هم پس از اون میبینم مثلا تو این پیج:

کد:

http://faster.persiangig.ir/test.html

میبینیم که بخش محتوا صفحه که با رنگ سفید مشخص شده با کوچک و بزرگ کردن پنجره خودش رو هماهنگ میکنه اما سوال من اینجاست لایه های دیگر مثلا اون div آبی و سبز رو چطور باید بهشون بفهمونم که با div اصلی(سفید) خودشون رو هماهنگ کنند و با کوچک و بزرگ شدن پنره از چپ و راست بیرون نزنند؟:9:
09-03-2009, 02:52
Mohammadali.

Help Me Please
09-03-2009, 08:52
neopersia

خوب شما به صورت مطلق اونا رو آدرس دهی کردید بایدم از جاشون تکون نخورن :31:
یعنی وقتی به div بگیرد شما با فاصله 130 پیکسل از چپ و 27 پیکسل از بالای پنجره مرورگر نمایش داده بشه، همونجا نمایش داده میشه فرقی هم نمیکنه بقیه صفحه جاش کجا باشه!

آدرس دهی مطلق معمولاً برای layout قسمتهای عادی صفحات استفاده نمیشه باید با روشهای دیگه این قسمتها رو سر جاشون قرار بدید که یه مقدار نیاز به مهارت در css داره. کلاً برای طراحی تیبل لس اول باید css و html رو مسلط باشید وگرنه هر کار کنید گیج کننده میشه!
09-03-2009, 09:06
neopersia

من کد صفحه رو دوباره براتون نوشتم. معمولاً برای ستونهای کناری صفحات از همین روش استفاده میشه (البته بهتره که محتویات اصلی رو هم توی یک div جدا بزارید تا اگر ستونها کوتاه تر از محتویات بودن متن اصلی زیر ستون نمایش داده نشه!)
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
body {
background-color: #ccc;
}
.wrapper {
width: 780px;
margin: 0 auto;
background-color:#fff;
}
#apDiv1, #apDiv2 {
width:200px;
height:115px;
}
#apDiv1 {
background-color: #069;
float:left;
}
#apDiv2 {
background-color: #063;
float:right;
}
.clear {
height:1px;
overflow:hidden;
clear:both;
margin-top:-1px;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="apDiv1"></div>
<div id="apDiv2"></div>
<div class="clear"></div>
</div>
</body>
</html>
[/html]
09-03-2009, 10:27
Mohammadali.

[html]

.clear {
height:1px;
overflow:hidden;
clear:both;
margin-top:-1px;
}

[/html]
این قسمت css چه کاری انجام میده؟

بعد یک سوال دیگه استاد شما فرمودی این کد برای ستون های کناری استفاده میشه مثلا اگه بخوایم یک ستونی هم به وسط اضافه کنیم به نظر شما بهتره css اش رو چطور بنویسم؟ از همون float میشه؟
09-03-2009, 17:40
neopersia

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