رفتن به مطلب

پست های پیشنهاد شده

سلام

من یک صفحه ای دارم طراحی میکنم ولی ب یک مشکلی بر خوردم

عرض صفحه ام (بادی) 100 درصد هست و میخوام عکس هایی که با سایز مثلا 300 در 300 قرار میگیره کنار هم وسط صفحه باشه و بصورت اتوماتیک مناسب با مانیتور این اتفاق بیافته ...

 

عکس پیوست را مشاهده کنید سایز مانیتور 1280 در 1024 هست و بخاطر فلوت چپ گذاشتن از سمت چپ شروع شده اگه مانیتور صفحه اش 1920 در 1080 بشه تعداد عکس ها بیشتر میشه اما تمام عکس ها از سمت چپ شروع میشه چطوری اینو هوشمند کنم که :

 

یا عکس ها بصورت کامل از چپ تا راست کنار هم باشه و تصویر را کامل کنه یا اینکه اگه هر تعدادی هست وسط صفحه باشه و از چپ و راست مارجین مناسبی بنا به مانیتور داشته باشه؟

سپاس

Capture.PNG

لینک به ارسال

با سلام، دوست عزیز باید کل صفحه ای که طراحی میکنید قابلیت ریسپانسیو داشته باشه، برای اینکار می تونید خودتون در فایل css یک کلاس با مثلاً عرض 25% تعریف کنید و المنت ها را داخل یک div با این کلاس قرار دهید. اما بهتون پیشنهاد میکنم از بوت استرپ استفاده کنید. اگر کدی خواستید یا سوالی داشتید همین جا مطرح کنید هم دوستان بزرگوار و هم بنده کمکتون می کنیم.

کلاس css برای تقسیم صفحه به 4 قسمت:

.example{
  margin= 0px;
  padding= 0px;
  width= 25%;
  float= left;
}

 

لینک به ارسال
در 2 ساعت قبل، amirhosein-wp گفته است :

با سلام، دوست عزیز باید کل صفحه ای که طراحی میکنید قابلیت ریسپانسیو داشته باشه، برای اینکار می تونید خودتون در فایل css یک کلاس با مثلاً عرض 25% تعریف کنید و المنت ها را داخل یک div با این کلاس قرار دهید. اما بهتون پیشنهاد میکنم از بوت استرپ استفاده کنید. اگر کدی خواستید یا سوالی داشتید همین جا مطرح کنید هم دوستان بزرگوار و هم بنده کمکتون می کنیم.

کلاس css برای تقسیم صفحه به 4 قسمت:


.example{
  margin= 0px;
  padding= 0px;
  width= 25%;
  float= left;
}

 

درود

اینطوری فاصله میاندازه من میخوام عکس ها بهم چسبیده باشه ...

مثل این سایت :

ali - ghazizadeh . com

 

لینک به ارسال

درود. دوست عزیز فاصله افتادن بین عکس ها به خاطر دستورات پیشفرض مرورگر هستش، باید ریست کنی دستوراته پیش فرضو که کدش توی نت موجود هست.

گزینه بعد شما کد زیرو اجرا کن، غیر استاندارد هستش ولی کار می کنه، برای استاندارد کردنش باید کدهای داخل تگ <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>

 

ویرایش شده توسط amirhosein-wp
اضافه کردن کامنت به کد
لینک به ارسال

سپاس

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

بحرحال سپاس بابت راهنمایی ;)

لینک به ارسال
  • 3 هفته بعد...

با سلام

کد زیر رو امتحان کنید

<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>

 

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...