particular

اچ تی ام ال ؟

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

سلام

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

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

با تشکر

Share this post


Link to post
Share on other sites
آموزش ووکامرس قالب جوملا قالب وردپرس قالب رایگان وردپرس قالب رایگان جوملا هاست نامحدود هاست جوملا هاست لاراول هاست وردپرس هاست ارزان هاست ربات تلگرام خرید دامنه آموزش ساخت ربات تلگرام با php آموزش لاراول آموزش cPanel آموزش php آموزش فرم ساز RSform آموزش ساخت ربات جذب ممبر آموزش ساخت ربات دوستیابی آموزش ساخت ربات فروشگاهی برای ووکامرس آموزش طراحی سایت داینامیک با php آموزش بخش پشتیبانی با rsticket

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

سلام

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

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

با تشکر

درود

background: url(../images/bg.jpg) top center no-repeat fixed;

ویرایش شده در توسط amir_seddighi

Share this post


Link to post
Share on other sites
درود

background: url(../images/bg.jpg) top center no-repeat fixed;

با تشکر

این کد جواب نداد !!!

من اینجور نوشتم . در قسمتی که رنگی هست باید یه کد اضافه بشه . اما چه کدی ؟

فایل پیوست رو ببینید لطفا

Share this post


Link to post
Share on other sites
با تشکر

این کد جواب نداد !!!

من اینجور نوشتم . در قسمتی که رنگی هست باید یه کد اضافه بشه . اما چه کدی ؟

فایل پیوست رو ببینید لطفا

بین دو تگ Head این کد رو جایگزین کنید ببینید درست میشه ؟

  1. <style type=“text/css”>
  2. body
  3. {
  4. background-image: url(“image.gif”);
  5. background-repeat: no-repeat;
  6. background-attachment: fixed;
  7. background-position: center;
  8. }
  9. </style>

Share this post


Link to post
Share on other sites
بین دو تگ Head این کد رو جایگزین کنید ببینید درست میشه ؟

  1. <style type=“text/css”>
  2. body
  3. {
  4. background-image: url(“image.gif”);
  5. background-repeat: no-repeat;
  6. background-attachment: fixed;
  7. background-position: center;
  8. }
  9. </style>

نه متاسفانه .

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

با تشکر

Share this post


Link to post
Share on other sites

توی استایل سی اس اس از این کد استقاده کنید

   background:#000 url(bg.jpg) no-repeat center center fixed;
   -webkit-background-size:cover;
   -moz-background-size:cover;
   background-size:cover;  

با این کد هم میتوانید وسط سایت قرار بدید و هم توی تمامی مانیتور ها ثابت میمونه وسط سایت

موفق باشی

Share this post


Link to post
Share on other sites

دوست عزیز برای اینکه یه div رو تو هر مرورگری تو وسط صفحه نشون بدی یه کد js ساده هست که در این جا نحوه استفاده از اون رو بهت میگم

اول کد های اچ تی ام ال زیر رو بین تگ های body اضافه کن

<div class="image">
<img src="http://placehold.it/600x300&text=ArasDesign" alt="ارس دیزاین" width="600" height="300" />
</div>

بعد آخرین نسخه کتاخانه جی کوئری رو با کد زیر قبل از تگ </head> فراخاوانی کن :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

بعد از کد بالا کد زیر رو اضافه کن

<script>
   window.confirm = function(){};
   window.prompt  = function(){};
   window.open    = function(){};
   window.print   = function(){};
   // Support hover state for mobile.
   if (false) {
     window.ontouchstart = function(){};
   }
</script>
<script>
$(document).ready(function(){				   
	$(window).resize(function(){

		var box = $(".image");

			box.css({
				position:'absolute',
				left: ($(window).width() - box.outerWidth())/2,
				top: ($(window).height() - box.outerHeight())/2
			});
	});

	$(window).resize();
});
</script>

الان دایو مورد نظرت میاد وسط صفحه

Share this post


Link to post
Share on other sites
دوست عزیز برای اینکه یه div رو تو هر مرورگری تو وسط صفحه نشون بدی یه کد js ساده هست که در این جا نحوه استفاده از اون رو بهت میگم

اول کد های اچ تی ام ال زیر رو بین تگ های body اضافه کن

<div class="image">
<img src="http://placehold.it/600x300&text=ArasDesign" alt="ارس دیزاین" width="600" height="300" />
</div>

بعد آخرین نسخه کتاخانه جی کوئری رو با کد زیر قبل از تگ </head> فراخاوانی کن :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

بعد از کد بالا کد زیر رو اضافه کن

<script>
   window.confirm = function(){};
   window.prompt  = function(){};
   window.open    = function(){};
   window.print   = function(){};
   // Support hover state for mobile.
   if (false) {
     window.ontouchstart = function(){};
   }
</script>
<script>
   $(document).ready(function(){                   
       $(window).resize(function(){

           var box = $(".image");

               box.css({
                   position:'absolute',
                   left: ($(window).width() - box.outerWidth())/2,
                   top: ($(window).height() - box.outerHeight())/2
               });
       });

       $(window).resize();
});
</script>

الان دایو مورد نظرت میاد وسط صفحه

با تشکر

کاملا به خواسته ی خودم رسیدم .

لطفا در صورت امکان توضیحاتی در مورد کد های فوق بدید . تا درک بیشتری داشته باشم . هر چند مشکلم رو برطرف کردید ....

Share this post


Link to post
Share on other sites

اگر دقت کنید کد های بالا مربوط به height و width هست ، کار کد های بالا اینکه اول رزولیشن صفحه کاربر رو میگیرن و بعد محاسبات مربوط رو انجام میدن و دقیقترین مقدار ها رو برای فاصله های دایو میدن تا درست وسط صفحه بیاد توضیح بهتری از این نمی تونم بدم چون خیلی سادن

Share this post


Link to post
Share on other sites

دوست عزیز یه راه حل آسون

تو ادیتورت عکس رو بزار یا نوشته هم بزار یا هرکاری دیگه

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

Share this post


Link to post
Share on other sites
دوست عزیز یه راه حل آسون

تو ادیتورت عکس رو بزار یا نوشته هم بزار یا هرکاری دیگه

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

شما از چه ادیتوری استفاده میکنی ؟

Share this post


Link to post
Share on other sites

اوووووووووووووو ، چقد شما سخت می گیرید ، جیکوئری چیه ، این حرفا کدومه ، با css می شه این کارو کرد ، این که شما نمی تونید این کار رو انجام بدید که دلیل نمی شه روش غلطه

Share this post


Link to post
Share on other sites
اوووووووووووووو ، چقد شما سخت می گیرید ، جیکوئری چیه ، این حرفا کدومه ، با css می شه این کارو کرد ، این که شما نمی تونید این کار رو انجام بدید که دلیل نمی شه روش غلطه

برادر من. درستش اینه که این این کد ها تو جاواسکریپت نوشته بشه. من این مشکل رو زیاد داشتم. با css هم حل میشه اما گاهی اوقات اذیت میکنه آدمو.

بعدشم js چیز سختی نیست که... راستی برای این کار ساده اگه نظر من رو میخواید اصلا jq لازم نیست. غیر از این که کلی کد js رو الکی اضافه میکنه به سندتون کار دیگه ای نمیکنه. jq برای پروژه های بزرگتری کاربرد خودشو نشون میده.

مزیت js هم به css اینه که هم سریعتره هم قبل از css لود(load) میشه.

با تشکرgift

Share this post


Link to post
Share on other sites

برای راست چین کردن متن یا چپ چین کردن متن از dir استفاده میکنیم

که راست چین و چپ چین میشه rtl ltr راست به چپ و چپ به راست

dir="rtl" یا dir="ltr"

Share this post


Link to post
Share on other sites

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

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

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

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


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

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

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


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