استایل دادن به آی فریم های گوگل

[abolfazl 156]

سلام دوستان

ما بنا به موضوع سایتمون در پست هامون از آی فریم های گوگل که درقسمت گوگل مپ موجود می باشد استفاده میکنیم

میخاستم اگر امکانش هست راهنماییمون کنید که استایلی رو براشون طراحی کنیم

یعنی یه کادری میخایم که مپ ها در اون کادر قرار بگیرند

چطور بایدبرای آی فریم های گوگل استایل بنویسیم؟

[SM-Mahdavi 5427]

سلام

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

[abolfazl 156]

سلام

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

سلام ممنون از توجه شما به این تاپیک

درسته ماهم یه باکس ساده میخایم برای این نقشه ها

یعنی نمیشه تو استایل قالب براشون یه باکس ساده تعریف کنیم تا آی فریم های گوگل در این باکس ها قرار بگیرن؟

چه طور باید این کار و انجام بدم؟

ویرایش شده شهریور 94 توسط abolfazl

[SM-Mahdavi 5427]

یه div بسازید و به صورت زیر استایل بدید

div#map{
width:500px;
height;300px;
background:#eee;
border:1px solid #ccc;
padding:1px;
}

داخل div کد مربوط به نقشه

[abolfazl 156]

یه div بسازید و به صورت زیر استایل بدید

div#map{
width:500px;
height;300px;
background:#eee;
border:1px solid #ccc;
padding:1px;
}

داخل div کد مربوط به نقشه

من یه دایو بسازم فکر نکنم بشه باز کاریش کرد چون کدی از آیفریم گوگل تو این کدی که زحمتش و کشیدید مشاهده نکردم

آقای مهدوی ببینید برای مثال این یه کد آیفریم مپ گوگله:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d207372.49201938324!2d51.349818600000006!3d35.696814100000005!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3f8e00491ff3dcd9%3A0xf0b3697c567024bc!2z2KrZh9ix2KfZhg!5e0!3m2!1sfa!2sir!4v1442418377122" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

این برای نقشه تهرانه فکر کنید ما از این آیفریم ها تعداد زیادی در پست های مختلف داریم

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

[SM-Mahdavi 5427]

<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d207372.49201938324!2d51.349818600000006!3d35.696814100000005!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3f8e00491ff3dcd9%3A0xf0b3697c567024bc!2z2KrZh9ix2KfZhg!5e0!3m2!1sfa!2sir!4v1442418377122" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

css

.map{
width:500px;
height;300px;
background:#eee;
border:1px solid #ccc;
padding:1px;
}

[abolfazl 156]

<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d207372.49201938324!2d51.349818600000006!3d35.696814100000005!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3f8e00491ff3dcd9%3A0xf0b3697c567024bc!2z2KrZh9ix2KfZhg!5e0!3m2!1sfa!2sir!4v1442418377122" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

css

.map{
width:500px;
height;300px;
background:#eee;
border:1px solid #ccc;
padding:1px;
}

داداش من منظورت و متوجه شدم...

ولی چاره ای نداره که بدون اضافه کردن دایو به آیفریم این کار صورت بگیره یعنی چیزی بهش اضافه نشه به همین شکل براش باکس تعریف کنیم؟

چون تعداد زیادی از پست ها دارای این آیفریم هستن و کار سختیه برم تو هر پست این دایو و بهش اضافه کنم

[abolfazl 156]

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

[sajjadmp 72]

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

اینجوری استایل دهی نمیشه ؟
.map iframe{
border:2px solid red
}

[abolfazl 156]

اینجوری استایل دهی نمیشه ؟
.map iframe{
border:2px solid red
}

خیلی ممنون ولی با این کد هیچ حاشیه ای اضافه نمیشه! دوستان علتش چیه؟

ویرایش شده شهریور 94 توسط abolfazl

[فرحان 997]

سلام. علتش اینه که توی پست ها شما .map نداری که !

شما بیا این کار رو بکن مثلا بگو .

.post iframe

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

[abolfazl 156]

سلام. علتش اینه که توی پست ها شما .map نداری که !

شما بیا این کار رو بکن مثلا بگو .

.post iframe

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

خیلی ممنون از راهنماییتون ولی بازم استایل نگرفت

[فرحان 997]

انتهای فایل style.css کد رو به این صورت گذاشتید:

.post iframe{
width:500px;
height;300px;
background:#eee;
border:4px solid #ccc;
padding:1px;
}

کار نداد ؟

اگر کار نداد جلوی هر دستور یک عبارت !important بذارید. مثلا به این صورت :

width:500px !important;

اگر باز هم کار نداد با inspect element براوزر نگاه کنید قسمت مطلب تگ هاش چه کلاسی دارن همون به جای .post بذارید در مورد نحوه استفاده از اینسپکت المنت هم جستجو کنید.