imaniy
6 سال پیش توسط imaniy مطرح شد
7 پاسخ

یه مشکل کوچیک در navbar من

سلام معمولا در html اینجوریه که مثالا شما وقتی یک المنت رو مینویسی و اونو تمام میکنی و میری خط بعدی یک المنت دیگه رو مینویسی اصولش اینه که دومین المنت زیر اولین المنت نمایش داده میشه و برای من هم معمولا اینطوری هستش و مشکلی ندارم ولی یک navbar دارم که زیرش تو html هر المنتی مینویسم میره زیر navbar و مجبورم بهش margin-top بدم تا درست بشه ولی بعد از اون همه چی اوکی میشه و مشکلی ندارم میخاستم دلیلش رو بدونم کدش رو زیر میزارم انلاین نگاه کنین ممنون میشم تو این مورد هم کمکم کنین. البته ناگفته نماند که تا اونجایی که من آزمون و خطا کردم مشکل از کلاس fixed-top هستش که رو navbar هستش وقتی ورمیدارم دیگه درست میشه ولی وقتی هستش انگار چون fixed هستش به عنوان block حساب نمیشه و بقیه المنت ها میرن زیرش.

https://liveweave.com/#&togetherjs=VgqJ9oCjaG


ثبت پرسش جدید
آرش میلانی
تخصص : Front-end | React
@arash 6 سال پیش آپدیت شد
1

@iaghapor1994
سلام دوست عزیز
المنت ها در css اگه display: block داشته باشن طبق یک flow پشت سر هم قرار میگیرن
مثلا اگه 2تا المنت قرار بدی ، المنت دومی زیر المنت اول قرار میگیره.
ولی وقتی به یکی از المنت ها پوزیشن میدیم مثل position:fixed یا position:absolute، اون المنت از flow عادی خارجی میشه و دیگه پشت اون المنت قبلیش قرار نمیگیره و المنت هایی که بعدش اومدن زیر اون المنت میرین (بخاطر همین مجبوری که margin-top بدی)
مقاله زیر رو مطالعه کن تا کار با position ها رو یادبگیری

http://css-tricks.ir/reference/position/
https://css-tricks.ir/reference/z-index/


محمد یوسفی پور
تخصص : برنامه نویس، لینوکس، طراحی وب
@myp79 6 سال پیش مطرح شد
1

چون position رو برابر fixed قرار میده داخل css و بعدشم تمام فاصله ها رو از بالا برای آن object صفر میکنه و به z-index یه مقدار خیلی زیاد میده که همیشه روی نوشته ها باشه.


imaniy
تخصص : طراح وب
@imaniy 6 سال پیش آپدیت شد
0

مشکل حل شد ممنون از شما دوستان عزیز.


imaniy
تخصص : طراح وب
@imaniy 6 سال پیش مطرح شد
0

دوستان مشکل حل شد ولی یکی دیگه جاش رو گرفت به عکس زیر توجه کنید من یک کادر هشدار دارم :

http://imgurl.ir/uploads/g503059_1.jpg

خوب به دلیل فیکس بودن navbar من مجبور شدم به کادر هشدار خودم margin-top: ۶rem بدم خوب تا اینجا هیچ مشکلی نیست مشکل از اونجا شروع میشه که من برای این کادر هشدار یک دکمه بستن کادر هشدار اختصاص دام و وقتی روش کلیک میکنم و کادر بسته میشه المنتی که زیر کادر هشدار هستن یعنی بخش پست ها و سایدبار میرن زیر navbar ... لطفا به عکس زیر هم توجه کنید :

http://imgurl.ir/uploads/r22237_2.jpg

خب برای حل این مشکل من یک div ساختم و قسمت پست ها و سایدبار رو داخل اون قرار دادم با این روش پس از بسته شدن کادر هشدار، همچنان یک div وجود داره که با navbar از بالا فاصله داره و مشکل تا اینجا حل شد ولی مشکل دیگه ای که با این کار وجود اومد اینه که من به سایدبار و یکی از المن های دیگه خاصیت order دادم که دیگه کار نمیکنه در صورتی که قبل اینکه div رو بزارم قشنگ داشت کار میکرد اگه کسی کدهای قالب رو میخاد و حرفه ای هستش لطفا به ایمیل من یا آیدی تلگرام من پیام بده خیلی خیلی ممنون :

ID TELEGRAM : imaniy1


محمد یوسفی پور
تخصص : برنامه نویس، لینوکس، طراحی وب
@myp79 6 سال پیش آپدیت شد
1

وقتی کلید بسته شدن کادر رو مینید دقیقا اون کادر چه تغییراتی براش اعمال میشه منظورم اینه که کلا از صفحه حذف میشه یا اینکه داخل css دستکاری می کنید؟


imaniy
تخصص : طراح وب
@imaniy 6 سال پیش آپدیت شد
0

اون کادر کلا از صفحه حذف میشه :

<div id="margin-t">
<div class="alert alert-info alert-dismissible fade show text-center">
<button type="button" class="close" data-dismiss="alert">×</button>
برای همکاری با سایت ما لطفا توسط لینک رو به رو با ما در ارتباط باشید <a href="#" class="alert-link">لینک +</a>
</div>


محمد یوسفی پور
تخصص : برنامه نویس، لینوکس، طراحی وب
@myp79 6 سال پیش آپدیت شد
0

پیشنهاد میکنم برای رفع مشکل اون قسمت div رو که گفتین بعدا برا پست ها اضافه کردید پاک کنید و به جای حذف این پیام از صفحه تو css visibility رو بعد از کلیک hidden کنید. احتمالا مشکل حل میشه.


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام