6 پست در این موضوع قرار دارد

سلام

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

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

 

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

 

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

سپاس

Capture.PNG

0

به اشتراک گذاری این پست


لینک به پست

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

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

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

 

2

به اشتراک گذاری این پست


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

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

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


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

 

درود

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

مثل این سایت :

ali - ghazizadeh . com

 

0

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

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

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

به اشتراک گذاری این پست


لینک به پست

سپاس

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

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

1

به اشتراک گذاری این پست


لینک به پست

با سلام

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

<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

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری