رفتن به مطلب

تنظیم پاراگراف عکس ها در قالب - css


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

سلام خدمت تمای دوستان عزیز

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

من یه قالبی دارم که وقتی عکسی رو در ویرایش گر وسط چین میکنم هنگام نمایش آن را راستچین میکند. فایل های css این قالب هم براتون ضمیمه میکنم...

البته خودم در فایل ضمیمه ی base.css به جای :


img.aligncenter{
margin: auto;
}

این کد رو قرار دادم :


img.aligncenter {
float:none;
display:block;
margin:5px auto;
}

اما توفیقی نکرد و تغییری مشاهده نکردم...من میخوام هر طوری که تو ویرایشگر تنظیم میکنم پاراگراف بندی بشه...ممنون میشم اگه راهنماییم کنید...

css.zip

ویرایش شده توسط nimait70
لینک به ارسال

این کد ها رو هم به فایل base.css اضافه کردم :


img {
max-width: 100%
}
img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
.alignright {float:right; }
.alignleft {float:left; }
.aligncenter {display: block; margin-left: auto; margin-right: auto; text-align: center}

اما

اما بازم نشد که نشد...

لینک به ارسال

دوستان این کد رو هم امتحان کردم اما بازم حل نشد...لطفا کمک کنید :

.alignnone {

margin: 5px 20px 20px 0;

}

.aligncenter,

div.aligncenter {

display: block;

margin: 5px auto 5px auto;

}

.alignright {

float:right;

margin: 5px 0 20px 20px;

}

.alignleft {

float: left;

margin: 5px 20px 20px 0;

}

.aligncenter {

display: block;

margin: 5px auto 5px auto;

}

a img.alignright {

float: right;

margin: 5px 0 20px 20px;

}

a img.alignnone {

margin: 5px 20px 20px 0;

}

a img.alignleft {

float: left;

margin: 5px 20px 20px 0;

}

a img.aligncenter {

display: block;

margin-left: auto;

margin-right: auto

}

.wp-caption {

background: #fff;

border: 1px solid #f0f0f0;

max-width: 96%; /* Image does not overflow the content area */

padding: 5px 3px 10px;

text-align: center;

}

.wp-caption.alignnone {

margin: 5px 20px 20px 0;

}

.wp-caption.alignleft {

margin: 5px 20px 20px 0;

}

.wp-caption.alignright {

margin: 5px 0 20px 20px;

}

.wp-caption img {

border: 0 none;

height: auto;

margin: 0;

max-width: 98.5%;

padding: 0;

width: auto;

}

.wp-caption p.wp-caption-text {

font-size: 11px;

line-height: 17px;

margin: 0;

padding: 0 4px 5px;

}

لینک به ارسال

سلام

اینطوری استایل بدید:


p img.alignright {}

عکس هایی که داخل تگ p هستند.

لینک به ارسال

سلام

اینطوری استایل بدید:


p img.alignright {}

عکس هایی که داخل تگ p هستند.

ممنون بابت پاسخ گویی، این طوری هم استایل دادم :

.alignnone {

margin: 5px 20px 20px 0;

}

.aligncenter,

div.aligncenter {

display: block;

margin: 5px auto 5px auto;

}

.alignright {

float:right;

margin: 5px 0 20px 20px;

}

.alignleft {

float: left;

margin: 5px 20px 20px 0;

}

.aligncenter {

display: block;

margin: 5px auto 5px auto;

}

p img.alignright {

float: right;

margin: 5px 0 20px 20px;

}

p img.alignnone {

margin: 5px 20px 20px 0;

}

p img.alignleft {

float: left;

margin: 5px 20px 20px 0;

}

p img.aligncenter {

display: block;

margin-left: auto;

margin-right: auto

}

.wp-caption {

background: #fff;

border: 1px solid #f0f0f0;

max-width: 96%; /* Image does not overflow the content area */

padding: 5px 3px 10px;

text-align: center;

}

.wp-caption.alignnone {

margin: 5px 20px 20px 0;

}

.wp-caption.alignleft {

margin: 5px 20px 20px 0;

}

.wp-caption.alignright {

margin: 5px 0 20px 20px;

}

.wp-caption img {

border: 0 none;

height: auto;

margin: 0;

max-width: 98.5%;

padding: 0;

width: auto;

}

.wp-caption p.wp-caption-text {

font-size: 11px;

line-height: 17px;

margin: 0;

padding: 0 4px 5px;

}

اما بازم نشد...یه جای قالب یه چنین چیزی نوشته :

Using 'class="alignright"' on an image will (who would've

thought?!) align the image to the right. And using 'class="centered',

will of course center the image. This is much better than using

align="center", being much more futureproof (and valid) */

اگه از


class="centered'

به جای


align="center"

استفاده بشه عکس وسط چین میشه اما تمامی مطالب قبلی من با align="center" نوشته شده و ادیتور (ckeditor 4)هم به عنوان پیش فرض از این استفاده میکنه و سخته هر دفعه کد رو دستکاری کنم...

لطفا اگه راه حلی به ذهنتون میرسه راهنماییم کنید...

ویرایش شده توسط Morteza
لینک به ارسال

آدرس آنلاین بدید.

روی آدرس آنلاینم فعلا نصب نیست...دارم روی لوکال تستش میکنم...عکس میذارم واستون...

عکس شماره 1 با style="text-align: center نوشته شده که راستچین هست کلا اما عکس شماره 2 که با class="centered" دستکاریش کردم همانطور که ملاحضه میکنید کاملا وسط چین شده...

کجا میشه کد های css شو دست کاری کرد تا با style="text-align: center هم عکس ها رو وسط چین نشون بده؟

post-981-0-65687500-1381598483_thumb.jpg

post-981-0-99686600-1381598492_thumb.jpg

ویرایش شده توسط nimait70
لینک به ارسال

روی آدرس آنلاینم فعلا نصب نیست...دارم روی لوکال تستش میکنم...

آنلاین گذاشتید در خدمتم.

لینک به ارسال

این کد رو هم به تنهایی به انتهای فایل base.css اضافه کردم اما تغییری مشاهده نشد...میتونید خودتون هم چک بکنید...

به آخر این فایل اضافه کردید و درست هم نمایش میده من مشکلی نمیبینم.

کوکی + تمپ مرورگرتونو حذف کنید.

لینک به ارسال

به آخر این فایل اضافه کردید و درست هم نمایش میده من مشکلی نمیبینم.

کوکی + تمپ مرورگرتونو حذف کنید.

الان این پست عکس هاش برای شما وسط چین هست؟ کوکی و تمپ رو هم پاک کردم،با یک مرورگر دیگه تست کردم اما بازم راستچینه... :


http://vcbt.ir/%D9%81%DB%8C%D9%84%D9%85-hes-just-not-that-into-you/

لینک به ارسال

یا مثلا این مطلب :


http://vcbt.ir/%D8%B3%D8%B1%DB%8C%D8%A7%D9%84-training-day-2001/

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

ویرایش شده توسط nimait70
لینک به ارسال

برای تصاویرتون این کد رو به فایل rtl.css اضافه کنید:


.size-full {
margin:5px auto;
}

و برای imdb هم میتونید این کار رو انجام بدین:

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

این کد نمایش تصویر imdb هستش:


<a target="_blank" href="http://www.imdb.com/title/tt0139654/?ref_=sr_1"><img style="width: 45px; height: 22px; " src="http://ashowtime17.org/pic/imdb-logo.png" alt=""></a>

پاکش کنید و به جاش کد زیر رو بزارین.


<a target="_blank" href="http://www.imdb.com/title/tt0139654/?ref_=sr_1" style="position: absolute;"><img style="width: 45px; height: 22px; margin: 0px auto;" src="http://ashowtime17.org/pic/imdb-logo.png" alt=""></a>

درست باید بشه.

در آخر هم حتما کش مرورگرتون رو خالی کنید.

لینک به ارسال

برای تصاویرتون این کد رو به فایل rtl.css اضافه کنید:


.size-full {
margin:5px auto;
}

و برای imdb هم میتونید این کار رو انجام بدین:

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

این کد نمایش تصویر imdb هستش:


<a target="_blank" href="http://www.imdb.com/title/tt0139654/?ref_=sr_1"><img style="width: 45px; height: 22px; " src="http://ashowtime17.org/pic/imdb-logo.png" alt=""></a>

پاکش کنید و به جاش کد زیر رو بزارین.


<a target="_blank" href="http://www.imdb.com/title/tt0139654/?ref_=sr_1" style="position: absolute;"><img style="width: 45px; height: 22px; margin: 0px auto;" src="http://ashowtime17.org/pic/imdb-logo.png" alt=""></a>

درست باید بشه.

در آخر هم حتما کش مرورگرتون رو خالی کنید.

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

لینک به ارسال

این افزونه چنین کدی رو در پایگاه داده ی من پیدا نمیکنه :


><img style="width: 45px; height: 22px; " src="http://ashowtime17.org/pic/imdb-logo.png" alt=""></a>

باید کاملا شبیه باشه با اونی که درون پست ها هست.

از توی پست ها کپی کنید توی افزونه پیدا میکنه.

لینک به ارسال

باید کاملا شبیه باشه با اونی که درون پست ها هست.

از توی پست ها کپی کنید توی افزونه پیدا میکنه.

در هر صورت بخشی از کد هست خوب، میبایست پیدا کنه دیگه...

کلش هم کپی کردم پیدا نکرد :


Sorry, <a target="_blank" href="http://www.imdb.com/title/tt0139654/?ref_=sr_1"><img style="width: 45px; height: 22px; " src="http://ashowtime17.org/pic/imdb-logo.png" alt=""></a> is not found in this Database(db)!

قسمت اول هم خوب هر دفعه فرق داره دیگه...هر مطلب با مطلب دیگه فرق داره آدرس IMDB یش :


<a target="_blank" href="http://www.imdb.com/title/tt0139654/?ref_=sr_1"

لینک به ارسال

از فایل rtl.css هم این دو خاصیت را بیابید و حذف کنید


.footer .latest_news img, .latest_news img,
.footer .latest_news p,
.latest_news p,
.comments_list li img ,
.twitter-author img,
.widget ul.tweets li span,
ul.tweets li span,
p.cat-content{
float: right;
margin-right: 0px;
margin-left:10px;
}

.news_in_photo .news-photo {
float: right;
}

لینک به ارسال

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

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

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

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

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

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

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

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

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