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

3 سال پیش توسط imaniy مطرح شد
آفلاین
user-avatar
imaniy ( 13698 تجربه )
3 سال پیش
تخصص : طراح وب

لینک کوتاه اشتراک گذاری

1

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

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

آفلاین
user-avatar
آرش مختاری ( 6571 تجربه )
3 سال پیش
تخصص : Front-end | React

لینک کوتاه اشتراک گذاری

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/

آفلاین
user-avatar
محمد یوسفی پور ( 10142 تجربه )
3 سال پیش
تخصص : برنامه نویس، لینوکس، طراحی وب

لینک کوتاه اشتراک گذاری

1

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

آفلاین
user-avatar
imaniy ( 13698 تجربه )
3 سال پیش
تخصص : طراح وب

لینک کوتاه اشتراک گذاری

0

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

آفلاین
user-avatar
imaniy ( 13698 تجربه )
3 سال پیش
تخصص : طراح وب

لینک کوتاه اشتراک گذاری

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

آفلاین
user-avatar
محمد یوسفی پور ( 10142 تجربه )
3 سال پیش
تخصص : برنامه نویس، لینوکس، طراحی وب

لینک کوتاه اشتراک گذاری

1

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

آفلاین
user-avatar
imaniy ( 13698 تجربه )
3 سال پیش
تخصص : طراح وب

لینک کوتاه اشتراک گذاری

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>

آفلاین
user-avatar
محمد یوسفی پور ( 10142 تجربه )
3 سال پیش
تخصص : برنامه نویس، لینوکس، طراحی وب

لینک کوتاه اشتراک گذاری

0

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

برای ارسال پاسخ لازم است، ابتدا وارد سایت شوید.