reza0118 2 ارسال شده در خرداد 95 گزارش بازنشر ارسال شده در خرداد 95 سلام من یک صفحه ای دارم طراحی میکنم ولی ب یک مشکلی بر خوردم عرض صفحه ام (بادی) 100 درصد هست و میخوام عکس هایی که با سایز مثلا 300 در 300 قرار میگیره کنار هم وسط صفحه باشه و بصورت اتوماتیک مناسب با مانیتور این اتفاق بیافته ... عکس پیوست را مشاهده کنید سایز مانیتور 1280 در 1024 هست و بخاطر فلوت چپ گذاشتن از سمت چپ شروع شده اگه مانیتور صفحه اش 1920 در 1080 بشه تعداد عکس ها بیشتر میشه اما تمام عکس ها از سمت چپ شروع میشه چطوری اینو هوشمند کنم که : یا عکس ها بصورت کامل از چپ تا راست کنار هم باشه و تصویر را کامل کنه یا اینکه اگه هر تعدادی هست وسط صفحه باشه و از چپ و راست مارجین مناسبی بنا به مانیتور داشته باشه؟ سپاس نقل قول لینک به ارسال
amirhosein-wp 39 ارسال شده در خرداد 95 گزارش بازنشر ارسال شده در خرداد 95 با سلام، دوست عزیز باید کل صفحه ای که طراحی میکنید قابلیت ریسپانسیو داشته باشه، برای اینکار می تونید خودتون در فایل css یک کلاس با مثلاً عرض 25% تعریف کنید و المنت ها را داخل یک div با این کلاس قرار دهید. اما بهتون پیشنهاد میکنم از بوت استرپ استفاده کنید. اگر کدی خواستید یا سوالی داشتید همین جا مطرح کنید هم دوستان بزرگوار و هم بنده کمکتون می کنیم. کلاس css برای تقسیم صفحه به 4 قسمت: .example{ margin= 0px; padding= 0px; width= 25%; float= left; } 2 نقل قول لینک به ارسال
reza0118 2 ارسال شده در خرداد 95 مالک گزارش بازنشر ارسال شده در خرداد 95 در 2 ساعت قبل، amirhosein-wp گفته است : با سلام، دوست عزیز باید کل صفحه ای که طراحی میکنید قابلیت ریسپانسیو داشته باشه، برای اینکار می تونید خودتون در فایل css یک کلاس با مثلاً عرض 25% تعریف کنید و المنت ها را داخل یک div با این کلاس قرار دهید. اما بهتون پیشنهاد میکنم از بوت استرپ استفاده کنید. اگر کدی خواستید یا سوالی داشتید همین جا مطرح کنید هم دوستان بزرگوار و هم بنده کمکتون می کنیم. کلاس css برای تقسیم صفحه به 4 قسمت: .example{ margin= 0px; padding= 0px; width= 25%; float= left; } درود اینطوری فاصله میاندازه من میخوام عکس ها بهم چسبیده باشه ... مثل این سایت : ali - ghazizadeh . com نقل قول لینک به ارسال
amirhosein-wp 39 ارسال شده در خرداد 95 گزارش بازنشر ارسال شده در خرداد 95 (ویرایش شده) درود. دوست عزیز فاصله افتادن بین عکس ها به خاطر دستورات پیشفرض مرورگر هستش، باید ریست کنی دستوراته پیش فرضو که کدش توی نت موجود هست. گزینه بعد شما کد زیرو اجرا کن، غیر استاندارد هستش ولی کار می کنه، برای استاندارد کردنش باید کدهای داخل تگ <style> رو در فایل css جدا قرار بدی و در صفحه فراخوانی کنی. مورد بعدی هم که هستش زیر هم قرار گرفتن تصاویر در اسکرین های کوچیکه که می تونی خودت با یه ذره کد نویسی درست کنی، اما بهت پیشنهاد می کنم قبلش کلا طراحی وب بدون حال ریسپانسیو و بگذرونی و بعدش از بوت استرپ استفاده کنی. ولی اگر خواستی همینجوری ببینی چی میشه این کد رو به استایل .portofilo اضافه کن: min-width: 300px; موفق باشید. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <!-- تعریف دستورات css با تگ style --> <style> /* حذف دستورات پیشفرض مرورگر برای تگ body */ body{ margin: 0px; padding: 0px; width: 100%; height: auto; } /* تعریف کلاسی برای تقسیم بندی کردن body به 5 بخش */ .portofilo{ margin: 0px; padding: 0px; width: 20%; float: left; } /* تعریف کلاس css برای تگ img */ img{ margin: 0px; padding: 0px; width: 100%; float: left; } </style> </head> <body> <!-- تقسیم صفحه با تگ div و کلاس تعریف شده به پنج بخش --> <div class="portofilo"> <!-- معرفی عکس به صفحه --> <img src="http://www.ali-ghazizadeh.com/wp-content/uploads/2014/08/665599_462081913843899_126421863_o-540x420.jpg"> </div> <div class="portofilo"> <img src="http://www.ali-ghazizadeh.com/wp-content/uploads/2014/08/277329_464953453556745_1265031239_o-540x420.jpg"> </div> <div class="portofilo"> <img src="http://www.ali-ghazizadeh.com/wp-content/uploads/2014/08/621395_467692093282881_191317292_o-540x420.jpg"> </div> <div class="portofilo"> <img src="http://www.ali-ghazizadeh.com/wp-content/uploads/2014/08/331893_470405149678242_820795059_o-540x420.jpg"> </div> <div class="portofilo"> <img src="http://www.ali-ghazizadeh.com/wp-content/uploads/2014/08/1025302_571199482932141_1486477179_o-540x420.jpg"> </div> </body> </html> ویرایش شده خرداد 95 توسط amirhosein-wp اضافه کردن کامنت به کد 3 نقل قول لینک به ارسال
reza0118 2 ارسال شده در خرداد 95 مالک گزارش بازنشر ارسال شده در خرداد 95 سپاس از روش دومی که شما گفتی استفاده کردم تو یک سایت خارجی معرفی کرده بود که برای هر سایز مانیتور یک فاصله بتونی انتخاب کنی .... همون فراخونی شما بحرحال سپاس بابت راهنمایی 1 نقل قول لینک به ارسال
hamid_khaleghi 74 ارسال شده در خرداد 95 گزارش بازنشر ارسال شده در خرداد 95 با سلام کد زیر رو امتحان کنید <style> article { margin:0 auto; width:100%; margin-top:50px; text-align:center; } img { width:300px; height:300px; border:1px solid black; display:inline-block; margin:0 0 1px 1px; } .clear { clear:both; } </style> <article> <img src="آدرس تصویر" /> <img src="آدرس تصویر" /> <img src="آدرس تصویر" /> <img src="آدرس تصویر" /> <img src="آدرس تصویر" /> <br /> <img src="آدرس تصویر" /> <img src="آدرس تصویر" /> <br /> <img src="آدرس تصویر" /> <img src="آدرس تصویر" /> <img src="آدرس تصویر" /> <section class="clear"></section> </article> 1 نقل قول لینک به ارسال
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .