ورود

View Full Version : مشکل در طراحی ریسپانسیو قالب html


amirdesigner2info
دوشنبه 16 شهریور 1394, 16:20 عصر
سلام
من توی تبدیل PSD به HTML به صورت ریسپانسیو مشکل دارم .
یه بخش تو هدر سایت باید یه عکس بزارم و پایین عکس بچسبه به پایین هدر دقیق
اما هر کاری میکنم نمیشه . حتی position دادم و با top و right اومدم درستش کنم درست شد اما چون میخوام ریسپانسیو باشه نمیشه سایز مرورگر که تغییر میکنه اونم عوض میشه جاش
http://s6.uplod.ir/i/00673/gfmg05mdaeej.png
میخوام مثل لینک بالا بشه ولی مثل لینک زیر میشه
http://s6.uplod.ir/i/00673/11qm10bknsqe.png

لطفا کمک کنید دوستان تا فردا باید پروژه رو تموم کنم
amirdesigner2info
دوشنبه 16 شهریور 1394, 17:46 عصر
چی شد کسی کمک نمیکنه؟
دوستان خیلی فوریه تا فردا باید تموم بشه .
لطفا کمک کنید.
mohammad425
دوشنبه 16 شهریور 1394, 17:54 عصر
به عکس اینو بده ببین کار میکنه؟


max-width:100%;
position: absolute;
bottom:0;
right:auto;
left:auto;
amirdesigner2info
دوشنبه 16 شهریور 1394, 18:22 عصر
نشد این دادم کلا عکس رفت.
mohammad425
دوشنبه 16 شهریور 1394, 18:37 عصر
این چی؟

max-width:100%;
margin:40px auto;
amirdesigner2info
دوشنبه 16 شهریور 1394, 19:29 عصر
اینجوری درست شد اما وقتی اندازه مرورگر رو تغییر میدم بهم میریزه.
mohammad425
دوشنبه 16 شهریور 1394, 19:41 عصر
اینجوری نمیتونم بگم مشکل از کجاست
کدهاتو قرار بده
amirdesigner2info
دوشنبه 16 شهریور 1394, 20:00 عصر
این لینک فایل هست : http://uplod.ir/3srg3h5zeg5e/test.rar.htm
mohammad425
دوشنبه 16 شهریور 1394, 20:18 عصر
به کلاس header اینو اضافه کن:


display: flex;justify-content: center;align-items: flex-end;
amirdesigner2info
دوشنبه 16 شهریور 1394, 20:33 عصر
اینو زدم درست شد اما تو طرح اصلی منو هم دارم بالای هدر اونم اومد پایین نمیشه یه کدی بزنم منو بره بالا؟
mohammad425
دوشنبه 16 شهریور 1394, 20:47 عصر
عکس رو داخل یه دایو قرار بده و این مقادیر رو به اون بده
amirdesigner2info
دوشنبه 16 شهریور 1394, 20:57 عصر
گذاشتم داخل div بهش هم اون استایل هارو دادم اما دوباره مفخی شد.(البته ببخشید ها خیلی مزاحم شما شدم نمیدونم فکر کنم قسمت نیست درست بشه)
amirdesigner2info
دوشنبه 16 شهریور 1394, 21:07 عصر
آقا خیلی ممنون به Div طول و عرض دادم درست شد
mohammad425
دوشنبه 16 شهریور 1394, 21:22 عصر
کاری با قسمت ندارم ولی باید درست بشه :لبخند:
من به چیزی گیر بدم تا درستش نکنم دست از سرش بر نمیدارم :لبخند:

من ایم کارو کردم جواب داد:
عکس رو درون دایو قرار دادم:

<div class="image-header">
<img class="col-lg-6 col-md-6 col-sm-12 col-xs-12 rell-header-img" src="img/resll-header-img.png"></div>


اینم css:


.image-header {display: flex;justify-content: center;align-items: flex-end;min-height: 473px;}
mohammad425
دوشنبه 16 شهریور 1394, 21:23 عصر
آقا خیلی ممنون به Div طول و عرض دادم درست شد
موفق باشین
amirdesigner2info
دوشنبه 16 شهریور 1394, 21:27 عصر
ببخشید یه سوال دیگه الان درست شده ولی هر کار میکنم نمیاد سمت راست چون سمت چپ باید یه متن بنویسم.
الان وسطه
mohammad425
دوشنبه 16 شهریور 1394, 21:42 عصر
اگه میخوای بره سمت راست justify-content رو بزار: flex-star
اگه هم میخوای بره سمت چپ justify-content رو بزار: flex-end