• اطلاعیه ها

    • Saeed Fard

      پوشش زنده وردکمپ ۲۰۱۸ اروپا توسط وردپرس پارسی   23/03/97

      اگر کاربر وردپرس هستید حتما تا به حال اسم وردکمپ رو شنیدید، کمپ و دورهمی بزرگ توسعه‌دهنده‌ها و کاربران وردپرس که سالانه در کشورهای مختلف برگزار میشه تحت عنوان وردکمپ هستش که از سمت مراجع اصلی وردپرس حمایت و برگزار می‌شه.   این‌ بار در سال 2018 وردکمپ اروپا در شهر بلگراد کشور صربستان در حال برگزاری هستش، این رویداد طی سه روز 24 تا 26 تیر ماه (June 14-16) برگزار میشه، در این رویداد مصطفی صوفی از وردپرس پارسی و به نمایندگی تمامی کاربران وردپرس فارسی حضور داره. وردپرس پارسی رویداد وردکمپ 2018 اروپا رو به صورت زنده توسط مصطفی پوشش می‌ده و در صورت علاقه‌مندی به این مراسم می‌تونید از طریق وردپرس پارسی دنبالش کنید.در حال حاضر یک روز از این مراسم گذشته که گزارش اون در قسمت پوشش زنده قرار گرفته. برای دنبال کردن مراسم وردکمپ اروپا به صورت لحظه‌ای به صفحه پوشش زنده در قسمت زیر مراجعه کنید. همینطور در آینده منتظر خبر برگزاری اولین وردکمپ در ایران توسط وردپرس‌پارسی باشید. https://wp-parsi.com/wceu-2018

      لینک خبر در وردپرس پارسی : https://wp-parsi.com/wceu-2018-live  

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

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


لینک به پست

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

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

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

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


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

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

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


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