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

شروع موضوع توسط srezay ‏4 اکتبر 2011 در انجمن مسایل عمومی طراحی و توسعه‌وب

کلمات کلیدی:
  1. srezay

    srezay Member

    ارسال‌ها:
    105
    تشکر شده:
    41
    امتیاز دستاورد:
    16
    سلام دوستان عزیز،
    من یک سایت طراحی کردم (کاملا با DIV) که وقتی روی سیستم های متفاوت (از لحاظ رزولوشن) بارگزاری میشه وضعیتش در محور x ( <---سایت---> ) تغییر میکنه، چطور میتونم کل سایت رو وسط قرار بدم بدون اینکه به کل سورس طراحی دست بزنم؟!:?:
     
    نوشته شده توسط srezay در ‏4 اکتبر 2011
  2. sheisebaboo

    sheisebaboo Member

    ارسال‌ها:
    230
    تشکر شده:
    184
    امتیاز دستاورد:
    16
    سلام....منم اون اوایل که کار طراحی رو شروع کردم با این مشکلات روبرو بودم...
    راه حل شما:

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

    کد (Text):
    #kol
    {margin:0px auto }
     
    نوشته شده توسط sheisebaboo در ‏4 اکتبر 2011
    !MOHSEN! و srezay از این پست تشکر کرده اند.
  3. echessdesign

    echessdesign مدیر انجمن طراحی وب

    ارسال‌ها:
    4,375
    تشکر شده:
    3,833
    امتیاز دستاورد:
    113
    درود بر شما
    پیش تر به این سوال پاسخ داده شده است
    لطفا جستجو فرمایید...
     
    نوشته شده توسط echessdesign در ‏4 اکتبر 2011
    srezay از این پست تشکر کرده است.
  4. srezay

    srezay Member

    ارسال‌ها:
    105
    تشکر شده:
    41
    امتیاز دستاورد:
    16
    مرسی، فراخوانیشو چطور بزنم؟ کل سایت رو بزارم تو فراخوانی این؟
     
    نوشته شده توسط srezay در ‏4 اکتبر 2011
  5. Mohammad

    Mohammad Member

    ارسال‌ها:
    881
    تشکر شده:
    685
    امتیاز دستاورد:
    16
    کد (Text):
    <div style="width:900px;margin:0 auto;">
    you site codes
    </div>
    قبلا خیلی زیاد این سوال مطرح شده و پاسخ هم گرفته بهتر بود جست و جو می کردید
     
    نوشته شده توسط Mohammad در ‏4 اکتبر 2011
    srezay از این پست تشکر کرده است.
  6. srezay

    srezay Member

    ارسال‌ها:
    105
    تشکر شده:
    41
    امتیاز دستاورد:
    16
    مرسی از لطفت دوست عزیز، متاسفانه بدنه سایت که html هستش بجز متن ها، اسلایدشو، ویدئو و منو میرن وسط، از margin:0 auto برای بقیه اجزائی که جابجا نشدن بصورت اختصاصی استفاده کردم اما جوابی نگرفتم...
     
    نوشته شده توسط srezay در ‏5 اکتبر 2011
  7. sheisebaboo

    sheisebaboo Member

    ارسال‌ها:
    230
    تشکر شده:
    184
    امتیاز دستاورد:
    16
    شما میتونید هربخشی رو در یه کادر با یه عرض مشخص قرار بدید

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

    #main
    {width:1000px ;height:auto ;margin: 0px auto ;}
    کد بالا رو برای بخش اصلی سایت که شامل مطالب و سایدبار هست قرار دهید....یعنی کل این بخش ها داخل این div برن.

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

    #head
    {width:1000px ;height:300px ;margin: 0px auto ;}
     
    نوشته شده توسط sheisebaboo در ‏5 اکتبر 2011
    srezay از این پست تشکر کرده است.
  8. srezay

    srezay Member

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

    کد (Text):
    <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>
     
    نوشته شده توسط srezay در ‏5 اکتبر 2011
  9. Mohammad

    Mohammad Member

    ارسال‌ها:
    881
    تشکر شده:
    685
    امتیاز دستاورد:
    16
    این چیزایی که منو دوستان گفتیم واسه xHTML هتسا :green:

    شما html نوشتید ؟
     
    نوشته شده توسط Mohammad در ‏5 اکتبر 2011
    srezay از این پست تشکر کرده است.
  10. srezay

    srezay Member

    ارسال‌ها:
    105
    تشکر شده:
    41
    امتیاز دستاورد:
    16
    من سایت رو با فتوشاپ طراحی کردم بعد ازش خروجی وب گرفتم، بصورت html داد..!
    دستوراتی که دوستان دادند روی کدهای قالب سایت که با html بود جواب داد اما روی دستورات css برام تغییراتی رو به بار نیوردن...
    نمونش باکس div پست قبلیم که محل اسلاید شو هستش...
     
    نوشته شده توسط srezay در ‏5 اکتبر 2011
  11. Mohammad

    Mohammad Member

    ارسال‌ها:
    881
    تشکر شده:
    685
    امتیاز دستاورد:
    16
    1- doctype کارتون چیه ؟ اچ تی ام ال یا ایکس اچ تی ام ال ؟

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

    این ترفند فقط تو xhtml جواب میده
     
    نوشته شده توسط Mohammad در ‏5 اکتبر 2011
    srezay از این پست تشکر کرده است.
  12. L-B

    L-B Well-Known Member

    ارسال‌ها:
    1,541
    تشکر شده:
    1,496
    امتیاز دستاورد:
    113
    به نظرم html هست که اینجور میشه .... یک داک ساده html خروجی گرفتن
    <html>
    <body>
    </body>
    </html>
    به این حالته به احتمال زیاد ... :|
    ------------

    اینو اضافه کن :

    کد (Text):
    <!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" />
     
     
    آخرین ویرایش: ‏6 اکتبر 2011
    نوشته شده توسط L-B در ‏6 اکتبر 2011
    srezay از این پست تشکر کرده است.
  13. srezay

    srezay Member

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

    pouya saadeghi Active Member

    ارسال‌ها:
    1,412
    تشکر شده:
    2,234
    امتیاز دستاورد:
    36
    خب اگه میخواین وسط باشه نباید از left استفاده کنید. برای فاصله دادن از سمت چپ ، از margin-left استفاده کنید که نسبت به والد فاصله بیفته نه نسبت به حاشیه مرورگر
     
    نوشته شده توسط pouya saadeghi در ‏6 اکتبر 2011
    Mohammad و srezay از این پست تشکر کرده اند.
  15. srezay

    srezay Member

    ارسال‌ها:
    105
    تشکر شده:
    41
    امتیاز دستاورد:
    16
    احساس میکنم جوابم همینه...
    خب به چه صورت استفادش کنم؟ px,cm,%,auto ؟ کدومش اصل مشکل منو رفع میکنه؟
    مرسی پویا و مرسی از همه...
     
    آخرین ویرایش: ‏7 اکتبر 2011
    نوشته شده توسط srezay در ‏7 اکتبر 2011
  16. echessdesign

    echessdesign مدیر انجمن طراحی وب

    ارسال‌ها:
    4,375
    تشکر شده:
    3,833
    امتیاز دستاورد:
    113
    این روش غیر استاندارد هست، اما مشکل شما رو راه می ندازه:
    کد (Text):

    <div align=center>
    your code
    </div>
     
     
    نوشته شده توسط echessdesign در ‏7 اکتبر 2011
    srezay از این پست تشکر کرده است.
  17. srezay

    srezay Member

    ارسال‌ها:
    105
    تشکر شده:
    41
    امتیاز دستاورد:
    16
    خب یعنی این مشکل ساز نمیشه؟

    مثلاً:

    کد (Text):

    <div style="left: 5px; top: 100px; align:center;">
    متن
    <div/>
    <div style="left: 105px; top: 100px; align:center;">
    اسلایدشو
    <div/>
     
    بخاطر اینکه هر DIV یه Width ثابتی براش قرار دادم، آخه بعضی جاها نیاز شده که Z-Index رو تغییر بدم و اگه Width رو زیاد کنم لایه زیری (مثلاً لینک) غیر قابل دسترسی میشه...
     
    آخرین ویرایش: ‏7 اکتبر 2011
    نوشته شده توسط srezay در ‏7 اکتبر 2011
  18. pouya saadeghi

    pouya saadeghi Active Member

    ارسال‌ها:
    1,412
    تشکر شده:
    2,234
    امتیاز دستاورد:
    36
    مگه مشکل وسط چین شدن کل قالب حل نشده بود؟ :
    کل قالب رو در یه div (به عنوان container) با خاصیت margin:0 auto و width مشخص (مثلا 900پیکسل) قرار بدید. بعد المنت های داخلی قالب که میخواین از سمت چپ فاصله داشته باشه رو به جای استفاده از left با margin-left تنظیم کنید.مثلا اگه یه المنت (فرزند container) میخواین از سمت چپ قالب 100 پیکسل فاصله داشته باشه، بنویسید: margin-left:100px اینجوری والد (container) وسط میمونه با width مثلا 900 پیکسل. بعد فرزندش از سمت چپ container صد پیکسل فاصله میگیره. اما وقتی بذارید left:100px از سمت چپ مرورگر 100 پیکسل فاصله خواهد داشت.
     
    آخرین ویرایش: ‏8 اکتبر 2011
    نوشته شده توسط pouya saadeghi در ‏7 اکتبر 2011
    echessdesign، srezay و Mohammad از این ارسال تشکر کرده اند.
  19. srezay

    srezay Member

    ارسال‌ها:
    105
    تشکر شده:
    41
    امتیاز دستاورد:
    16
    :oops: :oops: :oops: :oops: :oops: :oops: :oops:
    عاشقتم...
    همینه...
    :oops: :oops: :oops: :oops: :oops: :oops: :oops:
     
    نوشته شده توسط srezay در ‏8 اکتبر 2011
  20. baran17862

    baran17862 Member

    ارسال‌ها:
    288
    تشکر شده:
    15
    امتیاز دستاورد:
    18
    دوستان حالا من اگه بخوام رو محور y وسط بیاد سایتم باید چکار کنم ؟ اینی که دوستم گف رو محور x بود....
    برای y چکار کنم ؟
     
    نوشته شده توسط baran17862 در ‏8 اکتبر 2011

به اشتراک بگذارید