درخواست راهنمایی در مورد قالب با html و css

این تاپیک 16 پاسخ و 3 مشارکت کننده دارد . آخرین آپدیت توسط :  مهران ،‏ 2 ماه پیش .

این تاپیک تاکنون 300 بازدید داشته است .

نویسنده پست
چهار شنبه ، 21 سپتامبر 2016     9:40 ب.ظ #


مهدی جی اج

Subscriber
18 پست2 تاپیک

سلام

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

 

پروژه

 

ممنون میشم در درجه اول نظرتون رو دربازش بگید؟

خوب و اصولی طراحی شده ؟

مشکلش چیه؟

 

 

و اینکه بعدش لطفا به این سوالا پاسخ بدید :

 

 

1.چرا تگ img که داخل div با کلاس postcontent هستش وقتی که display:inline-block بگذارم نمیتونم بصورت زیر بهش margin بدم ؟

margin : 0 auto;

مگه با این کد با توجه به اینکه display : inline-block هستش و خصوصیت بلاک که همون مارجین چپ و راست هست رو میتونه بپدیره پس چرا margin اثری نمیکنه و از چپ و راست در وسط قرارش  نمیده ؟

وقتی display:block بگذارم اونوقت درست عمل میکنه

 

2.همونطور که میبینید داخل div با آی دی footer دو تا دایو leftfoot و rightfoot هستش

چرا تا وقتی که واسه id=footer ارتفاع تعیین نکنم وقتی به دو تگ داخلیش محتوا میدم div با id=footer بطور اتوماتیک ارتفاع نمیگیره؟

 

 

 

 

ممنونم

0  تشکر
پنجشنبه ، 22 سپتامبر 2016     7:47 ق.ظ #


hamed_z2001

Subscriber
156 پست51 تاپیک

سلام

قالب رو نتونستم دانلود کنم ...

ولی برای سوالات

Inline block , یجورایی شبیه floate  و عنصر رو فقط به اندازه ای که هست عرض و ارتفاع میده, ولی block عرض خود المان رو که میگیره هیچ, باقی فضای موجود تو اون ردیفی که عنصرمون قرار داره رو هم به خودش اختصاص میده , یعنی تا یه جایی شو عکسمون پر کرده,بقیش به صورت خالی پر میشه حالا خاصیت margin  روش کار میکنه جون فضای خالی داره, وسط چین کردن با margin در صورتی انجام میشه که اون عنصرمون فضای خالی داشته باشه ....

سوال دوم :

کد رو ندیدم , ولی احتمالا collapse شده,یعنی به عناصر داخلی فوتر float دادی,برا اینکار بهتره از خاصیت clear:both استفاده کنی

موفق باشید

1  تشکر
پنجشنبه ، 22 سپتامبر 2016     7:51 ق.ظ #


مهران

Subscriber
166 پست2 تاپیک

سلام

بعد این فایل هاتونو در پیکو فایل آپلود کنید تا هم فایل ها بعد مدتی پاک نشن و هم ما بتونیم به سادگی دان کنیم

در مورد سوال اولتون اینکه اون ویژگی که فرمودید تنها برای حالت display:block; فعال است و وقتی تگی display:inline-block; باشه اون تگ کل اون سطر رو پوشش نمیده بلکه اون مقدار رو که اشکال کرده به صورت المان بلاکی در میاره برای همینه که میتونه ویژگی طول و عرض بپذیره ولی چون کل سطر رو اشغال نکرده display:block براش معنی نداره

در مورد سوالتون هم متوجه نمی شم چرا ارتفاع نگیره من امتحان کردم ارتفاع میگیره!

در مورد مشکلات قالب یه بار در validator چکش کنید مثلا hgroup منسوخ شده که در جلسه ی آخر طراحی وب آقای آوند به این نکته اشاره شده و یا اینکه بسیاری جاها دو تا " رو کنار هم زدید که اشتباهه یا اینکه عکس ها alt ندارند

در مورد طرحتون هم اینکه با توجه به اینکه هنوز در راه طراحی هستید خوبه و در آینده حتما پیشرفت خواهید کرد

مثلا از border-radius زیاد استفاده کرده اید درحالی که در طراحی های امروز از 3px الی دیگه 8 یا 10 پیکسل معمولا استفاده میشه (البته بستگی به پروژه داره) که اون موارد هم تجربه اس و رفته رفته تجربه که زیاد شد این مسایل هم بر طرف میشه یا اینکه رنگ ها جالب نیستند و یا اینکه یه جا همچین نوشتید:

در حالی که باید این طوری باشه:

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

2  تشکر
پنجشنبه ، 22 سپتامبر 2016     7:48 ب.ظ #


مهدی جی اج

Subscriber
18 پست2 تاپیک

hamed_z2001 عزیز

ممنون از پاسخت

مگه display :inline-block ویژگی های المان های بلاکی هم نمیتونه بپذیره ؟(همون مارجین چپ و راست منظورمه ) یا فقط عرض و ارتفاع میگیره؟

در مئرد سوال دوم هم بله حق با شماس داخلش از float استفاده کردم

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

 

Mehran

مهران جان ممنونم از جوابت

پس در کل اصولی بود ؟ یا باز درهم برهم بود ؟

 

در مورد display همین سوالی که پرسیدم بالا واسم پیش اومده ممنون میشم جواب بدی

 

در مورد footer هم نه ارتفاع نمیگیره

 

ببین مثلا الان تو فایلی که آپلود کردم ارتفاع رو کامنت کردم و بکگرند آبی دادم

اما همینطور که میبینی تا ارتفاع ندی بهش بکگرندو نشون نمیده

انگار که دو تا div داخلی اصلا داخل footer نیست(با اینکه از خصوصیت clear قبل و بعد از div#footer استفاده کردم)

 

پروژه 2

 

0  تشکر
پنجشنبه ، 22 سپتامبر 2016     8:16 ب.ظ #


مهران

Subscriber
166 پست2 تاپیک

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

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

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

کد شما این طوریه:

که باید این طوری باشه :

با این کار مشکلتون حل میشه

 

در مورد سوال دیگه تون هم بگم که inline-block تنها و تنها برای عرض و ارتفاع کاربرد داره که با خوندن مطلب زیر به طور کامل متوجه بحث خواهید شد.

لینک مطلب

موفق باشید.

2  تشکر
پنجشنبه ، 22 سپتامبر 2016     10:02 ب.ظ #


مهدی جی اج

Subscriber
18 پست2 تاپیک

اره مهران جان حل شد

 

ولی مگه واسه کل بخش فوتر clear لازم نیس؟؟؟؟

کلا هرجا float دادم و کارم باش تموم شد بعدش سریع clear بزنم؟

0  تشکر
جمعه ، 23 سپتامبر 2016     8:06 ق.ظ #


hamed_z2001

Subscriber
156 پست51 تاپیک

خاصیت inline block که میدی دیگه خاصیت بلاک رو نداره و همونطور که هم من هم دوستمون گفتن فقط به اندازه ای که خودش هست جا میگیره ...

برای وسط چین کردن عکس باید بلاک در نظر بگیری و بهش مارجین بدی

برای استفادت از clear هم یک مثال میزنم

فک کن سه تا عنصر داری که اینا رو کنار هم میچینی , با float, بعد از این سه عنصر میتونی از این کلاس clearfix استفاده کنی

2  تشکر
جمعه ، 23 سپتامبر 2016     8:27 ق.ظ #


مهران

Subscriber
166 پست2 تاپیک

مثال بزنم

با توجه به این مثالی که زدم شما بعد این که کارت با فلوت تموم شد باید  clearfix بزاری چون دایو کلی رو فلوت ندادی نمی تونی بعد دایو کلی اونو بزاری و حتما باید بعد آخرین فلوت باشه.

3  تشکر
جمعه ، 23 سپتامبر 2016     10:49 ق.ظ #


مهدی جی اج

Subscriber
18 پست2 تاپیک

ممنونم

 

کاملا متوجه شدم

 

یه سوال دیکه

 

توی این پروژه  من به home کلاس current رو دادم

 

وقتی تو فایلهای css بخام استایل بدم اگه فقط بزنم current. استایل نمیگیره

حتما باید بزنم :

 

topmenu nav ul li a.current#

 

تا استایل بگیره

 

 

این مشکلش چیه؟

0  تشکر
دوشنبه ، 26 سپتامبر 2016     9:09 ق.ظ #


مهدی جی اج

Subscriber
18 پست2 تاپیک

Mehran جان

در مورد سوالم میشه راهنمایی م کنی؟؟

ممنون میشم

0  تشکر
پست 1 تا 10 (از مجموع 17 پست)

برای پاسخ دادن به این تاپیک باید وارد سایت شوید .