PDA

View Full Version : آموزش: اموزش کد نویسی صفحات وب آفلاین


alimorteza12
سه شنبه 13 مهر 1395, 20:42 عصر
سلام خسته نباشید
ببخشید من میخواستم یه صفحه وبی رو بصورت آفلاین طراحی کنم که بگراندصفحه ام یه تصویر باشه و تصویر حالت اسکرول داشته که کدش رو نوشتم اما وقتی میخوام به تصویرم عرض و ارتفا بدم نمیشه وقتی که مرورگرم کوچیک هست عکس بصور کامل صفحه رو میپوشونه اما وقتی مرورگر رو بزرگ میکنم تصویر کوچیک میشه و گوشه های تصویر خالی وسفید رنگ میشه چکار کنم که تصویر در هر دو صورت کامل صفخه رو بپوشونه

کدی که من استفاده کردم


</head>

<meta charset="utf-8" />

<style type="text/css">
<!--
body {
background-image:url(img/14.jpg) ;
background-attachment:scroll;
background-repeat:no-repeat;

}
-->
</style>

<body>
</body>
</html>
alimorteza12
شنبه 17 مهر 1395, 11:57 صبح
سلام خسته نباشید
ببخشید من میخواستم یه صفحه وبی رو بصورت آفلاین طراحی کنم که بگراندصفحه ام یه تصویر باشه و تصویر حالت اسکرول داشته که کدش رو نوشتم اما وقتی میخوام به تصویرم عرض و ارتفا بدم نمیشه وقتی که مرورگرم کوچیک هست عکس بصور کامل صفحه رو میپوشونه اما وقتی مرورگر رو بزرگ میکنم تصویر کوچیک میشه و گوشه های تصویر خالی وسفید رنگ میشه چکار کنم که تصویر در هر دو صورت کامل صفخه رو بپوشونه

کدی که من استفاده کردم


</head>

<meta charset="utf-8" />

<style type="text/css">
<!--
body {
background-image:url(img/14.jpg) ;
background-attachment:scroll;
background-repeat:no-repeat;

}
-->
</style>

<body>
</body>
</html>




یعنی تو این انجمن یکی نیس که جواب مارو بده؟
Moien Tajik
شنبه 17 مهر 1395, 12:43 عصر
سلام ,
طبیعی هستش که عکستون در اندازه های مختلف یکسان نباشه ، height و width باید auto باشن .

2 راه برای حلش دارید :

1- راه ساده تر : استفاده از یکی از فریمورک های css مثل Bootstrap یا Materialize و استفاده از کلاس img-responsive برای عکستون .
2- استفاده از Media های CSS و ست کردن اندازه بکگراند برای سایز های مختلف .
ashanet
شنبه 17 مهر 1395, 13:55 عصر
می تونید داخل کد css تون از background-size استفاده کنید و مقدار 100% 100% بهش بدید که هم ارتفاع و هم عرض به صورت کامل و تمام صفحه باشه
alimorteza12
شنبه 17 مهر 1395, 15:40 عصر
می تونید داخل کد css تون از background-size استفاده کنید و مقدار 100% 100% بهش بدید که هم ارتفاع و هم عرض به صورت کامل و تمام صفحه باشه


ممنون از پاسخ گویی خوبتون

یه سوال دیگه...؟
من میخوام داخلش یه متن طولانی بذارم اما این متن رو میخوام از حاشیه مروگر فاصله بگیر و شروع متنم از داخل قالب باشه نه خارج از اون چطر این کار ور انجام بدم از تگ &nbps استفاده کردم برای فاصله دادن اما وقتی متن رو در حالت انتخاب درمیاری چندان جالب بنظر نمیاد آیا راه دیگه ای هست...؟
ashanet
یک شنبه 18 مهر 1395, 12:06 عصر
من منظورتون رو دقیقا متوجه نشدم . اما اگر منظورتون اینه یه عکس دارید و می خواید با یه فاصله مشخص متن بگذارید هم این مورد هم امکان پذیره . شما برای عکسی که در نظر گرفتید یه div در نظر بگیرید و بعد عکس رو داخلش بگذارید
و بعد از اون متنتون رو استایل دهی کنید و با استفاده از margin و padding یه مقدار به پیکسل مثلا 10px بهش بدید


<div id="image"><img src="address ax"/><label style="margin="10px;padding:10px;">matn shoma</label></div>
alimorteza12
یک شنبه 18 مهر 1395, 16:30 عصر
من منظورتون رو دقیقا متوجه نشدم . اما اگر منظورتون اینه یه عکس دارید و می خواید با یه فاصله مشخص متن بگذارید هم این مورد هم امکان پذیره . شما برای عکسی که در نظر گرفتید یه div در نظر بگیرید و بعد عکس رو داخلش بگذارید
و بعد از اون متنتون رو استایل دهی کنید و با استفاده از margin و padding یه مقدار به پیکسل مثلا 10px بهش بدید


<div id="image"><img src="address ax"/><label style="margin="10px;padding:10px;">matn shoma</label></div>


من یه تصویر دارم که میخوام متنم رو داخل کادری که توی اون تصویر طراحی کردم قرار بدم

این کدی که دادید متن را در زیر تصویر میاره نه روی تصویر
میخوام متن روی تصویر و داخل کادری باشه که طراحی کردم
Moien Tajik
یک شنبه 18 مهر 1395, 21:05 عصر
کافیه position عکستون رو روی relative و position متن رو بر روی absolute قرار بدید و با margin , padding جایی که میخواید قرارش بدید.
این آموزش کمکتون میکنه : https://css-tricks.com/text-blocks-over-image/
ashanet
یک شنبه 18 مهر 1395, 22:04 عصر
بله این کد برای نمونه بود که نحوه div گذاری صحیح رو برسونم.باید با استفاده از css تنظیم کنید.اگر درست نشد بگید تا کد براتون بنویسم
alimorteza12
دوشنبه 19 مهر 1395, 21:30 عصر
بله این کد برای نمونه بود که نحوه div گذاری صحیح رو برسونم.باید با استفاده از css تنظیم کنید.اگر درست نشد بگید تا کد براتون بنویسم


ممنونم ازتون اما متوجه نشدم اگه براتون امکانش هست بنویسیدش ممنون میشم
kerkerehsaz
پنج شنبه 22 مهر 1395, 13:59 عصر
سلام آیا کد نویسی سایت http://kerkerehsaz.com مناسب هست ؟
لطفا از هر نظر چه سئو ، چه کد نویسی و چه ... نظر و بررسی کنید.
ممنون میشم .