قرار دادن یک عکس لینک دار درست در وسط صفحه [بایگانی]

samangeraphic

جمعه 02 اسفند 1392, 12:00 عصر

سلام دوستان
یه مشکل دارم که واقعا خستم کرده
کلی سایتهای خارجیو ایرانیو رفتم اما به نتیجه دلخواه نرسیدم
من یه عکس دارم که میخوام تو صفحه ورودی سایتم بذارمش
میخوام این عکس هم از لحاظ افقی و هم از لحاظ عمودی بیاد وسط صفحه
یه لینک هم داشته باشه که هر کس رو عکس کلیک کرد بره تو صفحه اصلی سایت
یه سری نمونه CSS و HTML پیدا کردم اما نشد:گریه:
لطفا کمک کنین....

Mori Bone

جمعه 02 اسفند 1392, 12:16 عصر

.a
{
position: fixed;
width: 500px;
height: 400px;
margin: 200px 0 0 250px;
top: 50%;
left: 50%;
}

cancerr

جمعه 02 اسفند 1392, 13:10 عصر

position absulout ya fix

left:0
top:0;
right:0;
bottom:0;
margin:auto;

اگه ابسولوت بگیری شاید وسط کل سایتتو بگیره.

samangeraphic

جمعه 02 اسفند 1392, 13:41 عصر

ممنونم ولی من متوجه اینها نمیشم
من مثل شما استاد نیستم:لبخندساده:
میشه یه کد کامل قرار بدید و من فقط آدرس عکسو لینکو توش عوض کنم؟
ممنونم از همتون

دانیال دزفولی

جمعه 02 اسفند 1392, 14:40 عصر

کذ رو بدید تا درست کنم

samangeraphic

جمعه 02 اسفند 1392, 15:08 عصر

ممنون
من از این کد استفاده میکنم اما این کد فقط عکسو از لحاظ افقی میاره وسط و تو مانیتورهای مختلف امکان داره پایین عکس خالی بمونه

<div align="center"><a href="/fa" target="_self"><img src="intro.jpg" width="70%" height="70%" /></a></div>

دانیال دزفولی

جمعه 02 اسفند 1392, 15:50 عصر

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="myreset.css">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style>
div {
background:#C36;
width:70%;
height:70%;
position:fixed;
right:0;
margin-right:15%;
top:0;
margin-top:15%;
}
</style>
</head>

<body>
<div><a href="/fa" target="_self"><img src="intro.jpg" width="70%" height="70%" /></a></div>
</body>
</html>

samangeraphic

جمعه 02 اسفند 1392, 18:34 عصر

ممنون که وقت گذاشتی ولی اینم درست کار نمیکنه
اولا که تصویر وسط نیست و کمی به چپ مایله
و دوم اینکه تصویر به نسبت سایز کادرم کش میاد
مثل پیتزا کش میاد عکسم:لبخندساده:

دانیال دزفولی

جمعه 02 اسفند 1392, 19:03 عصر

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="myreset.css">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style>
div {
background: #C36;
width: 70%;
height: 70%;
position: fixed;
right: 0;
margin-right: 15%;
top: 0;
margin-top: 15%;
}
div img {
width: 100%;
height: auto;
max-height: 100%
}
</style>
</head>

<body>
<div><a href="/fa" target="_self"><img src="intro.jpg" /></a></div>
</body>
</html>

samangeraphic

جمعه 02 اسفند 1392, 19:24 عصر

مرسی ولی بازم کش میاد عکس
وسطم نمیمونه
میچسبه پایین
عکس زیرو ببینید:
116962

2undercover

جمعه 02 اسفند 1392, 19:38 عصر

همونطور که کاربر cancerr گفتند:

http://codepen.io/anon/pen/fIgLp

refugee

جمعه 02 اسفند 1392, 19:58 عصر

سلام این کد :

<!DOCTYPE html>

<html>
<head>
<title></title>
<style>
.continer {
width:700px;
position:absolute;
margin:-315px -350px;
top:50%;
left:50%;
}
</style>
</head>

<body>
<div class="continer">
<a href="#"><img src="pic.png" width="700" /></a>
</div>
</body>
</html>

* توضیحات : برای اینکه عکس لینک شود : از تگ a استفاده میکنیم . و برای اینکه وسط قرار بگیرد بصورت افقی از تگ margin: 0px auto; استفاده میکنیم . حالا اگه بخواهیم عکس بصورت عمودی هم وسط باشد باید مارجین رو تغییر داد و عکس رو صفر کرد از افقی و عمودی ( یعنی چی ؟ یعنی توسط مارجین ارتفاع و عرض را منفی میکنیم تا وسط مرکز مشخص شود ) و توسط top و left عرض و ارتفاع رو مساوی با 50% میذاریم .

کد رو ببینید اینم نمونه : http://up.vbiran.ir/uploads/0refugee_39579139300313242269.zip

اینم لینک وبساتی که اموزش کامل تر دادن : http://mihanlearn.com/articles/%D9%88%D8%B3%D8%B7-%DA%86%DB%8C%D9%86-%DA%A9%D8%B1%D8%AF%D9%86-%D8%B9%D9%86%D8%A7%D8%B5%D8%B1-%D9%85%D8%AE%D8%AA%D9%84%D9%81-%D8%A8%D8%A7-css/

samangeraphic

جمعه 02 اسفند 1392, 20:17 عصر

ممنونم
این خیلی خوب بود فقط یه ایراد داره
من اگه بخوام طول و عرض عکسمو 100 درصد بدم چی؟
الان سایز 700 دادی شما
من اگه 100% بدم مخراب میشه

refugee

جمعه 02 اسفند 1392, 21:15 عصر

ممنونم
این خیلی خوب بود فقط یه ایراد داره
من اگه بخوام طول و عرض عکسمو 100 درصد بدم چی؟
الان سایز 700 دادی شما
من اگه 100% بدم مخراب میشه

ببینید وقتی میخواهید وسط قرار بگیره یعنی اندازه کامل کل صفحه نیست . پس بنابر این کوچیکتر از اندازه کل دیوایس است .
در غیر اینصورت دیگه معنی نمیده وقتی میخواهید 100٪ بذارید . ( ایرادی نداره )

samangeraphic

جمعه 02 اسفند 1392, 21:41 عصر

حالا 100 درصد نه
70%
من میخوام تو هر سایزی که کادر من هست، عکسم با طول و عرض مثلا 70% تو وسط کادر باشه
من فلش کارم و این کار تو فلش خیلی راحته اما نمیدونم چرا تو html انقدر داستان داره:ناراحت:

2undercover

شنبه 03 اسفند 1392, 14:12 عصر

کد ها:

http://codepen.io/anon/pen/fIgLp

الان لوگو گوگل 70 درصد عرض صفحه رو فرا گرفته و وسط صفحه هم هست.

samangeraphic

شنبه 03 اسفند 1392, 16:14 عصر

نه
لوگوی گوگل 70 درصد نیست
وقتی درصد میدیم یعنی وقتی صفحه رو کوچیک میکنیم، لوگو هم به همون نسبت کوچیک میشه

2undercover

شنبه 03 اسفند 1392, 16:20 عصر

نه
لوگوی گوگل 70 درصد نیست
وقتی درصد میدیم یعنی وقتی صفحه رو کوچیک میکنیم، لوگو هم به همون نسبت کوچیک میشه

متوجه منظورتون نمیشم؟!

samangeraphic

دوشنبه 05 اسفند 1392, 10:23 صبح

فکر نمیکردم چیز خاصی باشه ولی وقتی سایتهای خارجی رو هم گشتمو چیزی دستگیرم نشد فهمیدم یه همچین مورد ساده ای خیلی سخته پیاده سازیش
دوستان واقعا نمیشه کاری کرد؟:ناراحت:
من میخوام کادر اینترنت اکسپلورم تو هر سایزی بود، عکسم هم تو ابعاد مثلا 70% (به نسبت کادرم) تو وسز کادر باشه

refugee

دوشنبه 05 اسفند 1392, 11:43 صبح

فکر نمیکردم چیز خاصی باشه ولی وقتی سایتهای خارجی رو هم گشتمو چیزی دستگیرم نشد فهمیدم یه همچین مورد ساده ای خیلی سخته پیاده سازیش
دوستان واقعا نمیشه کاری کرد؟:ناراحت:
من میخوام کادر اینترنت اکسپلورم تو هر سایزی بود، عکسم هم تو ابعاد مثلا 70% (به نسبت کادرم) تو وسز کادر باشه

اخه دوست من وقتی شما داری عرض عکس رو 70٪ دیو مادر میذاری یعنی هر چقد اون دیو مادر کوچیک بشه به نسبت کوچیک شدن اون اینم با حفظ 70 درصد خودش کوچیک میشه .

الان همه چی واضح است نمیدونم شما چرا مشکل دارید .

اشتباه از شماست . بررسی کنید دوباره متوجه خواهید شد

samangeraphic

دوشنبه 05 اسفند 1392, 11:55 صبح

ممنون که جواب میدین
خب منم میخوام دقیقا همین اتفاق بیفته
اما این کدهایی که دوستان گذاشتن تو هیچکدوم این اتفاق نمیوفته
تو بعضی هاش هم که عکس همراه کادر کش میاد و دفورمه میشه

samangeraphic

دوشنبه 05 اسفند 1392, 12:39 عصر

من یه عکس دارم که میخوام تو صفحه ورودی سایتم بذارمش
میخوام این عکس هم از لحاظ افقی و هم از لحاظ عمودی بیاد وسط صفحه
اما نکته اینجاس که من میخوام واسه سایز عکسم درصد بدم نه عدد
همین
یه لینک هم داشته باشه که هر کس رو عکس کلیک کرد بره تو صفحه اصلی سایت

samangeraphic

دوشنبه 05 اسفند 1392, 20:31 عصر

ممنون از شما که این فایلو آماده کردی
اما این هم مشکل دفورمه شدن عکس رو داره:ناراحت:
یه همچین کدی رو دوستان تو پست های بالا قرار داده بودن
خودتون اگه اجراش کنید میبینید که عکس داخلش همراه با تغییر سایز کادر، کش میاد یا جمع میشه

samangeraphic

سه شنبه 06 اسفند 1392, 00:57 صبح

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

130000

سه شنبه 06 اسفند 1392, 10:46 صبح

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

http://s5.picofile.com/file/8114802168/Fixed_center.zip.html

samangeraphic

سه شنبه 06 اسفند 1392, 11:31 صبح

واقعا ممنونم که وقت میذارید
با عرض شرمندگی این هم ایرادش اینه که سایز عکس ثابته و با درصد نیست
یعنی کادر اینترنت اکسپلورر من کوچک بشه یا بزرگ، سایز عکسم تغییر نمیکنه :متفکر::ناراحت:

refugee

سه شنبه 06 اسفند 1392, 13:28 عصر

واقعا ممنونم که وقت میذارید
با عرض شرمندگی این هم ایرادش اینه که سایز عکس ثابته و با درصد نیست
یعنی کادر اینترنت اکسپلورر من کوچک بشه یا بزرگ، سایز عکسم تغییر نمیکنه :متفکر::ناراحت:

دوست من امکانش است مشکل از طرف شما باشه . ( یا کد ها یا مرورگر یا نحوه اجرا و .. )

نمیشه که این همه ادم درست کنند بگین خرابه ( قطعا اینا تست میکنن بعد میدن دست شما )

samangeraphic

سه شنبه 06 اسفند 1392, 14:25 عصر

شما اینو ببینید متوجه میشید
http://www.uploadbaz.com/15yzmmzrnqo0

refugee

سه شنبه 06 اسفند 1392, 14:31 عصر

یجای دیگه اپلود کنید . نشد دانلود کنم .

up.vbiran.ir

samangeraphic

سه شنبه 06 اسفند 1392, 14:37 عصر

http://up.vbiran.ir/uploads/fix_14673139332849142322.zip

2undercover

سه شنبه 06 اسفند 1392, 15:01 عصر

تا جایی که من می دونم، بهترین نتیجه ای که می تونید با CSS بگیرید این هست:

http://codepen.io/2undercover/pen/raAxv

samangeraphic

سه شنبه 06 اسفند 1392, 18:47 عصر

احسنت
دقیقا این همون چیزیه که من میخوام:تشویق:
چه جوری باید از این کد تو صفحه استفاده کنم؟
میشه خروجی این کدو واسم بذارید

samangeraphic

سه شنبه 06 اسفند 1392, 18:48 عصر

تا جایی که من می دونم، بهترین نتیجه ای که می تونید با CSS بگیرید این هست:

http://codepen.io/2undercover/pen/raAxv

احسنت
دقیقا این همون چیزیه که من میخوام:تشویق:
چه جوری باید از این کد تو صفحه استفاده کنم؟
میشه خروجی این کدو واسم بذارید

2undercover

چهارشنبه 07 اسفند 1392, 14:19 عصر

<!DOCTYPE html><html>
<head>
<title>Title</title>
<style>
.img {
position: absolute; top: 0; right: 0; left: 0; bottom: 0; max-width: 70%; width: auto; height: auto; max-height: 100%; margin: auto;
}
</style>
</head>

<body>
<img class="img" src="path/to/image">
</body> </html>

به جای path/to/image آدرس عکس رو بزارید.

samangeraphic

چهارشنبه 07 اسفند 1392, 21:21 عصر

خیلی خوب بود:تشویق:
ممنون از همه دوستانی که کمک کردند
موفق باشید:لبخندساده:

farshid.kh

شنبه 10 آبان 1393, 20:19 عصر

ببخشید میشه این کد کاریش کرد حالت بسته شدنم داشته باشه؟

پیام حیاتی

یک شنبه 11 آبان 1393, 08:28 صبح

ببخشید میشه این کد کاریش کرد حالت بسته شدنم داشته باشه؟
تاریخ پست رو نگاه کردید؟!
تایپیک جدید ایجاد کنید.