قرار دادن "کل" سایت در وسط

srezay · Oct 4, 2011

سلام دوستان عزیز،
من یک سایت طراحی کردم (کاملا با DIV) که وقتی روی سیستم های متفاوت (از لحاظ رزولوشن) بارگزاری میشه وضعیتش در محور x ( <---سایت---> ) تغییر میکنه، چطور میتونم کل سایت رو وسط قرار بدم بدون اینکه به کل سورس طراحی دست بزنم؟! :?:

sheisebaboo · Oct 4, 2011

سلام....منم اون اوایل که کار طراحی رو شروع کردم با این مشکلات روبرو بودم...
راه حل شما:

یه کد استایل با مقدار زیر بدید:

کد:

#kol
{margin:0px auto }

echessdesign · Oct 4, 2011

درود بر شما
پیش تر به این سوال پاسخ داده شده است
لطفا جستجو فرمایید...

srezay · Oct 4, 2011

مرسی، فراخوانیشو چطور بزنم؟ کل سایت رو بزارم تو فراخوانی این؟

Mohammad · Oct 4, 2011

کد:

<div style="width:900px;margin:0 auto;">
you site codes
</div>

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

srezay · Oct 5, 2011

مرسی از لطفت دوست عزیز، متاسفانه بدنه سایت که html هستش بجز متن ها، اسلایدشو، ویدئو و منو میرن وسط، از margin:0 auto برای بقیه اجزائی که جابجا نشدن بصورت اختصاصی استفاده کردم اما جوابی نگرفتم...

sheisebaboo · Oct 5, 2011

شما میتونید هربخشی رو در یه کادر با یه عرض مشخص قرار بدید

مثلا: برای متن ها و تصاویر و ... که به عنوان بخش اصلی سایتتون هستن که استایلی مثل زیر تعریف کنید:

کد:

#main
{width:1000px ;height:auto ;margin: 0px auto ;}

کد بالا رو برای بخش اصلی سایت که شامل مطالب و سایدبار هست قرار دهید....یعنی کل این بخش ها داخل این div برن.

بخش های دیگه هم به همین صورت، مثلا برای اسلایدشو:

کد:

#head
{width:1000px ;height:300px ;margin: 0px auto ;}

srezay · Oct 5, 2011

هنوز مشکل دارم..!
همه کار کردم اما نشد!
فاصلش از سمت چپ درست نمیشه..!
من بدنه سایت رو با فتوشاپ دراوردم و اچ.تی.ام.ال اکسپورت کردم، اجزاشو هم با css و بعضی جاها مثل همین اسلایدشو jquery استفاده کردم...

کد:

<div id="headerslides" style="position:absolute;left:5px;top:53px;width:780px;height:284px;z-index:1">
<img style="border-width:0;left:0px;top:0px;width:780px;height:284px;" src="slides/2.png" alt="">
<img style="border-width:0;left:0px;top:0px;width:780px;height:284px;display:none;" src="slides/3.png" alt="">
<img style="border-width:0;left:0px;top:0px;width:780px;height:284px;display:none;" src="slides/4.png" alt="">
<img style="border-width:0;left:0px;top:0px;width:780px;height:284px;display:none;" src="slides/5.png" alt="">
<img style="border-width:0;left:0px;top:0px;width:780px;height:284px;display:none;" src="slides/6.png" alt="">
<img style="border-width:0;left:0px;top:0px;width:780px;height:284px;display:none;" src="slides/7.png" alt="">
</div>

Mohammad · Oct 5, 2011

این چیزایی که منو دوستان گفتیم واسه xHTML هتسا :green:

شما html نوشتید ؟

srezay · Oct 5, 2011

من سایت رو با فتوشاپ طراحی کردم بعد ازش خروجی وب گرفتم، بصورت html داد..!
دستوراتی که دوستان دادند روی کدهای قالب سایت که با html بود جواب داد اما روی دستورات css برام تغییراتی رو به بار نیوردن...
نمونش باکس div پست قبلیم که محل اسلاید شو هستش...

Mohammad · Oct 5, 2011

srezay گفت:
من سایت رو با فتوشاپ طراحی کردم بعد ازش خروجی وب گرفتم، بصورت html داد..!
دستوراتی که دوستان دادند روی کدهای قالب سایت که با html بود جواب داد اما روی دستورات css برام تغییراتی رو به بار نیوردن...
نمونش باکس div پست قبلیم که محل اسلاید شو هستش...

1- doctype کارتون چیه ؟ اچ تی ام ال یا ایکس اچ تی ام ال ؟

2- شما با دادن کد absolute , top , left کادر رو بردید به گوشه بالا سمت چپ ، باید این 3 تا که گفتم رو حذف کنید و به جاش از margin : 0 auto که دوستان گفتند استفاده کنید

این ترفند فقط تو xhtml جواب میده

L-B · Oct 6, 2011

1- doctype کارتون چیه ؟ اچ تی ام ال یا ایکس اچ تی ام ال ؟

به نظرم html هست که اینجور میشه .... یک داک ساده html خروجی گرفتن
<html>
<body>
</body>
</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><title>title</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

srezay · Oct 6, 2011

xhtml که میکنم عرض سایت زیاد میشه و همه اجزا از هم جدا جدا میشن، ناجور میشه، من سایت رو روی 1024x768 طراحی کردم طوری که فیت مرورگر بشه بدون اینکه اسکرول بارها بیان، خیلی قاطی پاطی شد، البته یه چیزی، در حالت html که یه div برای کل سایت بسازم جواب میده و اصلاً بهم نمیریزه..!
خیلی تروتمیز میاد وسط صفحه، منتها یکسری از اجزاء سایت که DIV شدن رو من از لبه سمت چپ آدرس دادم، و بالا، یعنی همشون TOP و LEFT مشخصی دارن، حالا مشکل اینجاست که حتی اگه WIDTH رو 1000 کنم و MARGIN رو AUTO بزنم باز هم میمونن سمت چپ، اما اصل بحث که قالب و بدنه کلی سایته در حالت HTML میره وسط، آهان، راستی، XHTML هم که باشه باز هم اجزا از سمت چپ تکون نمیخورن..!

pouya saadeghi · Oct 6, 2011

خب اگه میخواین وسط باشه نباید از left استفاده کنید. برای فاصله دادن از سمت چپ ، از margin-left استفاده کنید که نسبت به والد فاصله بیفته نه نسبت به حاشیه مرورگر

srezay · Oct 7, 2011

احساس میکنم جوابم همینه...
خب به چه صورت استفادش کنم؟ px,cm,%,auto ؟ کدومش اصل مشکل منو رفع میکنه؟
مرسی پویا و مرسی از همه...

echessdesign · Oct 7, 2011

این روش غیر استاندارد هست، اما مشکل شما رو راه می ندازه:

کد:

<div align=center>
your code
</div>

srezay · Oct 7, 2011

خب یعنی این مشکل ساز نمیشه؟

مثلاً:

کد:

<div style="left: 5px; top: 100px; align:center;">
متن
<div/>
<div style="left: 105px; top: 100px; align:center;">
اسلایدشو
<div/>

بخاطر اینکه هر DIV یه Width ثابتی براش قرار دادم، آخه بعضی جاها نیاز شده که Z-Index رو تغییر بدم و اگه Width رو زیاد کنم لایه زیری (مثلاً لینک) غیر قابل دسترسی میشه...

pouya saadeghi · Oct 7, 2011

srezay گفت:
خب به چه صورت استفادش کنم؟ px,cm,%,auto ؟ کدومش اصل مشکل منو رفع میکنه؟

مگه مشکل وسط چین شدن کل قالب حل نشده بود؟ :

srezay گفت:
خیلی تروتمیز میاد وسط صفحه، منتها یکسری از اجزاء سایت که DIV شدن رو من از لبه سمت چپ آدرس دادم، و بالا، یعنی همشون TOP و LEFT مشخصی دارن، حالا مشکل اینجاست که حتی اگه WIDTH رو 1000 کنم و MARGIN رو AUTO بزنم باز هم میمونن سمت چپ، اما اصل بحث که قالب و بدنه کلی سایته در حالت HTML میره وسط

کل قالب رو در یه div (به عنوان container) با خاصیت margin:0 auto و width مشخص (مثلا 900پیکسل) قرار بدید. بعد المنت های داخلی قالب که میخواین از سمت چپ فاصله داشته باشه رو به جای استفاده از left با margin-left تنظیم کنید.مثلا اگه یه المنت (فرزند container) میخواین از سمت چپ قالب 100 پیکسل فاصله داشته باشه، بنویسید: margin-left:100px اینجوری والد (container) وسط میمونه با width مثلا 900 پیکسل. بعد فرزندش از سمت چپ container صد پیکسل فاصله میگیره. اما وقتی بذارید left:100px از سمت چپ مرورگر 100 پیکسل فاصله خواهد داشت.