اچ تی ام ال ؟

[particular 15]

سلام

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

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

با تشکر

[amir_seddighi 146]

سلام

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

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

با تشکر

درود

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

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

[particular 15]

درود

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

با تشکر

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

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

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

[amir_seddighi 146]

با تشکر

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

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

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

بین دو تگ 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>
   

[particular 15]

بین دو تگ 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>
   

نه متاسفانه .

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

با تشکر

[dis_card 16]

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

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

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

موفق باشی

[amin.poorsaeed 26]

دوست عزیز برای اینکه یه 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>

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

[particular 15]

دوست عزیز برای اینکه یه 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>

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

با تشکر

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

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

[amin.poorsaeed 26]

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

[AliFatehi 10]

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

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

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

[particular 15]

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

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

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

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

[ebiramrb 10]

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

[jmahyar152 10]

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

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

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

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

با تشکرgift

[poyaweb 10]

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

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

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