نحوه ثابت ماندن header با تغییر سایز پنجره مرورگر

[sahel65]

سلام به همگی؛
ظهرتون بخیر؛
دوستان من تا حالا چند تا طراحی که آماده کردم اکثرا وسط چین بودن و مشکلی نداشتم. ولی امروز میخواستم برای نمونه یه سایتی رو درست کنم که body اون کل صفحه رو چه از طول و چه از عرض اشغال کنه!
در این مواقع اندازه Body رو چه مقدار بدیم که طرح درست کار کنه؟
همچنین به این تصویر من نگاه کنید:

http://plt.host22.com/pic/45117b0e0a11.png

الان این تصویر در مانتیور من که 15 اینچ هستش درست نمایش داده میشه و کل صفحه رو پر میکنه؛
حالا مشکلی که وجود داره اینه که وقتی من اندازه مرورگر رو کوچیک میکنم Header سایت که همون نوار مشکی هستش (که البته هنوز کامل نشده) میاد پایین و سمت چپ و زیر leftside قرار میگیره؛ چیکار کنم که اونهم با کوچیک شدن مرورگر کوچیک بشه و تغیر مکان نده.
با clear یا position باید کار کنم؟
کدهای مربوط به تصویر فوق:

*
{
margin:0;
padding:0;
}

body
{
background-color:#fff;
margin:0px;
height:700px;
}

.leftside
{

width:205px;
float:left;
background-color:Green;
height:550px;
}

.header
{
margin-left:15px;
float:left;
height:80px;
width:1110px;
background-color:#000;
position:relative;
}



راستش رو بخواین من مفهوم دقیق clear و position رو متوجه نمیشم بخوبی؛ امکانش هست با یک مثال بهم بگید؟ یا برای نمونه همین دو تا رو برای کد طراحی خودم که تو بالا براتون آوردم نحوه استفادش رو بگید؟
ممنونم از همتون

[sahel65]

دوستان یه مقدار search کردم و یه جای دیگه هم شخصی همین مشکل رو داشت؛
راه حلی که بهش گفته بودن این بود:


Give the header position:relative
Give all the 3 divs inside position: absolute
Use top:0;left:0 for the first div
Use top:0;right:0 for the last one
And for the middle one give the correct px value for left:

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

*
{
margin:0;
padding:0;
}

body
{
background-color:#fff;
margin:0px;
height:700px;
width:1350px;
}

.leftside
{

width:205px;
float:left;
background-color:Green;
height:550px;
top:0;
left:0;
position:absolute;
}

.header
{
margin-left:220px;
float:left;
height:80px;
min-width:1130px;
background-color:#000;
}


1- حالا در اینجا چند تا سوال برام پیش اومده؛ کار Position دقیقا چیه که باعث رفع مشکل من شد؟
2- چرا با اینکه position : relative رو در header نذاشتم بازهم طرح درست کار می کنه؟البته اولش گذاشتم بعد برداشتم.(یعنی همون position:absolute; اولی کافیه؟؟ چرا؟؟)
3- خاصیتهای top:0 و یا left:0 منظور همون Margin هستند؟
4- توی این خط که گفته And for the middle one give the correct px value for left ، اینجا منظورش این بوده که اگه میخوای یک div رو در وسط قرار بدی، دقت کن که به مقادیر left چه مقادیری میدی؟
5- همونطور که می بینید من عرض کل صفحه رو در مانیتور خودم که 15 هستش 1350 گرفتم تا کل صفحه رو پوشش بده، آیا همین مقیاسی که من دارم روش آزمایش می کنم درسته یا نه؟ چجوری بدونم تو مانیتورهای دیگه هم تمام صفحه رو گرفته؟ چون من توی اینجا با دادن رنگ به background بدنه فهمیدم که اگه اینقدر بگیرم کل صفحه م رو رنگ مورد نظر میکنه.
با تشکر و عذرخواهی از شما

[khanlo.javid]

درود :



دوست گرامی برای اینکه مطمئن شید که تو تمام مانیتور ها وب سایت شما کل صفحه رو گرفته باید از المنت% به جای px توی عرض دیو هاتون استفاده کنید برای مثال برای اینکه کل صفحه کاربر رو بگیره شما عرض رو برابر با 100% قرار بدید حله.



موفق باشید.

[Saber Mogaddas]

سلام


دوستان من تا حالا چند تا طراحی که آماده کردم اکثرا وسط چین بودن و مشکلی نداشتم. ولی امروز میخواستم برای نمونه یه سایتی رو درست کنم که body اون کل صفحه رو چه از طول و چه از عرض اشغال کنه!
در این مواقع اندازه Body رو چه مقدار بدیم که طرح درست کار کنه؟

به صورت زیر.. عرض اتو هست و حداقل عرض 980px

body {
min-width: 980px;
width: auto;


}


..

[sahel65]

ازتون ممنونم آقای مقدس ؛
از نظر height مشکلی ندارم و فقط میخواستم از نظر عرضی بدونم و اینکه اگه مثلا بخواهیم صفحه در تمام مانتیورها بزرگ دیده بشه و حاشیه ای از اطراف نداشته باشیم که طبق گفته شما با دستوری که نوشتید مشکل حل میشه.
در خصوص سوال دو منظور از Position دقیقا چیه؟ میشه مثالی بزنید یا اگه ممکنه کدی رو که انجامش دادم دلیلش رو بگید چی بود که اینجوری درست شد و با resize کردن مرورگر دیگه Header نمیاد بره پایین و زیر left side قرار بگیره؟؟ در حالت کلی تر چه امکانی به طرح میده.
در خصوص سوال سه منظورم اینه که اون دستورات دقیقا معادل margin-top و یا margin-left هستن؟
سوال بعدیم هم منظورم این بود که برای قرارگیری یک div دیگه در وسط، معیار رو باید از چپ بگیریم؟ یعنی طبق div سمت چپی بریم جلو و طرحمون رو بر اساس اون انجام بدیم؟
مثلا تو همین طرح فوق من به div سمت چپ مقدار position:absolute دادم که Header درست شد و دیگه جابجا نمیشه، منظورم اینه که در طراحی ها باید یک div رو مبدا بگیریم؟(که مثلا در اینجا فکر کنم باید از div چپی برای مبدا(اگه حرفم درست باشه) استفاده کنیم؟

[Saber Mogaddas]

سلام


- حالا در اینجا چند تا سوال برام پیش اومده؛ کار Position دقیقا چیه که باعث رفع مشکل من شد؟

یک سایت مرجع فارسی خوب برای درک مفهوم دستور position در css (http://www.developer1.ir/CSS/Position.aspx)
هر کجا رو متوجه نشدید بپرسید..


- چرا با اینکه position : relative رو در header نذاشتم بازهم طرح درست کار می کنه؟البته اولش گذاشتم بعد برداشتم.(یعنی همون position:absolute; اولی کافیه؟؟ چرا؟؟)

همانطور که می دونیم position:absolute تگ رو شناور می کنه در صفحه ولی وقتی تگ ما داخل یک تگ با position:relative باشه داخل اون تگ شناور میشه .. یعنی position:relative راهی هم هست برای کنترل بیشتر تگ هایی که دارای دستور psotion:absolute هستند.


خاصیتهای top:0 و یا left:0 منظور همون Margin هستند؟

فکر کنم مقاله بالا جواب این سوال رو داده باشه براتون در هر صورت دستور top right left bottom از پارامتر ها ی position هستند و ربطی به margin ندارند..یعنی تگی که بر فرض مثال با دستور position:relative هست می توان با top right left bottom ائنئ جابجا کرد همانطور که میدونیم برای تگ margin از margin-top , margin-right,margin-left , margin-bottom استفاده میشه..


همونطور که می بینید من عرض کل صفحه رو در مانیتور خودم که 15 هستش 1350 گرفتم تا کل صفحه رو پوشش بده، آیا همین مقیاسی که من دارم روش آزمایش می کنم درسته یا نه؟ چجوری بدونم تو مانیتورهای دیگه هم تمام صفحه رو گرفته؟ چون من توی اینجا با دادن رنگ به background بدنه فهمیدم که اگه اینقدر بگیرم کل صفحه م رو رنگ مورد نظر میکنه.

شما که می خواهید عرضتون تو همه مرورگر ها و رزولوشن ها یکی باشه بهتره که از 980 تا 1007 پیکسل استفاده کنید..ولی تو پست قبلی متغیر بودن عرض رو گفتم که روش خوبی هست برای اینکار..


توی این خط که گفته And for the middle one give the correct px value for left ، اینجا منظورش این بوده که اگه میخوای یک div رو در وسط قرار بدی، دقت کن که به مقادیر left چه مقادیری میدی؟

این کلا ربطی به موضوع شما نداره تمامی روش های این کار رو من گفتم..این طرف 3 دیو که دارای position:absolute رو داخل یک دیو relative قرار میده و به صورتی که در بالا گفتم اونارو کنترل میکنه و در نهایت میگه که تو عرض وطول این 3 دیو دقت کنید که زیاد نباشه از دیو اصلی تا نزنه بیرون..

موفق باشید..