رفتن به مطلب

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


پست های پیشنهاد شده

سلام و وقت بخیر

من درحال یادگیری برنامه نویسی هستم - یه سری مشکلات و سوال برام پیش میاد که نمیفهمم چطور باید رفع کنم یا راه حلش چیه

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

پروژه ای که برای یادگیری دست گرفتم دیجی کالا هستش

مشکل :

در بخش منو - وقتی موس زیر هر گزینه میره - یک خط زیرش میاد

من به کمک دستور hover و border-bottom خط رو ایجاد کردم اما نمیدونم چرا برای هر گزینه بیش از اندازه ایجاد شده و به نوعی padding رو هم شامل شده

یک تصویر از مشکل قرار دادم .

کدهای css :

#menu-top .second-layer .option-menu > li:hover{
            border-bottom: 2px solid rgb(233, 56, 56);
            border-radius: 2px;
        }

کدهای html :

<nav id="menu-top">
        <div class="second-layer" style="padding-right: 20px;">
            <ul class="option-menu">
                <li>
                    <a class="font-bold pipe one-option" href="#">
                        دسته‌بندی کالاها
                    </a>
                </li>
              </ul>
          </div>
  </nav>

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

ممنون

لینک ها تنها برای اعضای سایت قابل نمایش است.

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • مدیر انجمن

درود؛

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

در حال حاضر شما تگ li رو برای خط زیر انتخاب کردید در صورتی که باید تگ a رو انتخاب کنید. البته باید چک کنید که خود تگ a دارای padding نباشه. می تونید این کد رو امتحان کنید:

#menu-top .second-layer .option-menu li a:hover {
            border-bottom: 2px solid rgb(233, 56, 56);
            border-radius: 2px;
}

 

  • Like 1
لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

بسیار ممنون از پاسخ

بله درست میفرمایید - باید تگ های a رو هدف قرار میدادم

اما یه مورد - اون گزینه اولی "دسته بندی کالا" - تو دیجی کالا زیر کلش خط میاد - یعنی آیکن هم شامل میشه اما الان برا من اینطور نیست

برای ایجاد آیکن از سلکتور before استفاده کردم میشد با spam هم انجام داد اما خب اینطور کد کمتری خرج میشه در html :

#menu-top .second-layer .option-menu .pipe::before {
            content: "";
            height: 16px;
            width: 16px;
            background: url(icon/menu.png) no-repeat center;
            display: block;
            position: absolute;
            right: 16px;
            top: 10px;
        }

و اینکه یه انیمیشنی داره دیجی کالا برای این خط ها آیا با دستور transition ایجاد کرده ؟

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • مدیر انجمن

برای راحتی کار، می تونید بجای استفاده از padding در یک جهت منو، لینک منو رو در وسط قرار بدید، از padding: 0px 5px برای تناسب در چپ و راست استفاده کنید و بجای فاصله گذاری با padding از خاصیت margin استفاده کنید برای چپ و راست فهرست. با اینکار خط زیر منو بدون مشکل نمایش داده میشه.

 

برای اون انیمیشن خط زیر منو ترکیبی از transform و transition می تونه مشکل رو حل کنه. یه نمونه براتون ساختم:

برای خط زیر از h1:after و h1:hover:after استفاده شده بجای خاصیت عادی border

  • لینک ها تنها برای اعضای سایت قابل نمایش است.
  • Like 2
لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

بسیار ممنون از پاسخ

با بحث transform آشنا نیستم ولی transition رو متوجه میشم که چیکار میکنه و باید چطور و کجا ازش استفاده کنم.

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

از padding و margin استفاده کردم اما هنوز خط زیر آیکن نمیاد :

لینک ها تنها برای اعضای سایت قابل نمایش است.

ویرایش شده توسط m1410
لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • مدیر انجمن

خاصیت transform برای حرکت دادن، چرخش یا تحرک دوبعدی و سه بعدی المنت ها استفاده میشه. به نوعی میشه گفت مثل انیمیشن ها عمل میکنه.

خاصیت transition برای تنظیم سرعت اجرای تغییرات و انیمیشن ها استفاده میشه. هرچی مدت زمان بیشتر باشه، انیمیشن و تغییر وضعیت المنت ها آهسته تر میشه. یکی دیگه از مقادیر این خاصیت، تعیین خاصیتی هست که قراره زمان روش اثر بگذاره. مثلا استفاده از width در مقدار این خاصیت باعث میشه خاصیت width در استایل اون المنت، در مدت زمان خاصی انجام بشه. مثلا تغییر اندازه یک المنت از 1 پیکسل تا 10 پیکسل در مدت زمانی مثل 1 ثانیه یا 5 ثانیه انجام بشه. در حالت عادی اگه زمان انیمیشن تعیین نشه، انیمیشن خیلی سریع اتفاق میفته و کاربر زیاد اون انیمیشن رو احساس نمی کنه. ولی اگه چند میلی ثانیه به انیمیشن زمان بدیم، حالت بهتری پیدا می کنه و انیمیشن محسوس هست.

 

برای مشکل دوم، حتما اون تگ یا المنتی رو خاصیت border بدید که کد مربوط به آیکن هم داخلش باشه. به احتمال زیاد کد مربوط به اون آیکن خارج از اون کدی هست که از border براش استفاده کردید. یا کد آیکن رو منتقل کنید داخل اون المنت، یا برای آیکن هم از خاصیت border استفاده کنید. یا برای اون منو، المنت کلی تر رو انتخاب کنید که خاصیت border هم شاملش بشه

  • Like 2
لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

با تشکر از پاسخ هاتون

یه مشکل

در نمونه کدی که در این صفحه هستش : لینک ها تنها برای اعضای سایت قابل نمایش است.

شما از سلکتور after استفاده کردید - من هم برای ایجاد یه لوله بین گزینه اول با دیگر گزینه های منو از همین دستور استفاده کردم و روی تگ a پیاده کردم

کد نمونه رو استفاده میکنم - برای همه گزینه های منو border و انیمیشن به شکل درستی نمایش داده میشه - اما برای گزینه اول اون لوله - border رو به خودش میگیره و زیر گزینه اول نمایش داده نمیشه

باید چطور عمل کنم ؟

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • مدیر انجمن

می تونید از خاصیت border توی تگ a استفاده کنید اگه با سکتور after تداخل وجود داره.

  • Like 2
لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

ممنون از پاسخ

متوجه نمیشم چطوری میشه

الان تو تگ a من border رو تنظیم میکنم الباقی کدهارو باید در بخش hover قرار بدم ؟

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • مدیر انجمن

فایل پروژه رو داخل یه هاست آنلاین قرار بدید و لینک بدید تا این مشکل و مشکلات بعدیش رو بهتر بتونیم راهنمایی و عیب یابی کنیم.

  • Like 2
لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

بسیار ممنون از پاسخ

لینک ها تنها برای اعضای سایت قابل نمایش است.

اینطوری اکی هستش ؟ یا مثل اون لینکی که دادید بهتره ؟

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • مدیر انجمن

نه همین لینکی که دادید خوبه. 

الانم من چک کردم اون خط قرمز زیر آیکن هم میاد. حالا روی همین لینک بگید مشکل از کجاست

  • Like 1
لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

بسیار ممنون از پاسخ

بحث خط زیر عنوان و شکل هارو حل کردم

بحثمون سر انیمیشن بود که من گفتم از سلکتور after برای لوله بعد از عنوان اول استفاده کردم و انیمیشن زیر اولی ظاهر نمیشه

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • مدیر انجمن

دستورات استایل #menu-top .second-layer .option-menu>li>a:hover رو حذف کنید. درحال حاضر داخل این دستور، خاصیت های border-bottom و border-radius وجود داره.

بعد کدهای زیر رو حذف کنید:

.one-option {
    margin-left: 20px;
}

و

#menu-top .second-layer .option-menu .pipe::after {
    content: "";
    height: 20px;
    width: 1px;
    background: #dfdfdf;
    display: block;
    position: absolute;
    right: 178px;
    top: 10px;
}

 

وقتی اون سه دستور استایل رو حذف کردید، اینها رو جایگزین کنید:

#menu-top .second-layer .option-menu .icon-option1::before {border-right: 2px solid #d2d2d2;
    padding-right: 40px;
    margin-left: -10px;
}
#menu-top .second-layer .option-menu>li>a:after {
  display:block;
  content: '';
  border-bottom: solid 4px #019fb6;  
  padding-bottom: 10px;
  transform: scaleX(0);
  transition: transform 250ms ease-in-out;
}
#menu-top .second-layer .option-menu>li>a:hover:after { transform: scaleX(1); }

 

  • Like 1
لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

بسیار ممنون از پاسخ

بسیار عالی - خوب شد

دو سوال :

اول اینکه اندازه صفحات وب رو باید چطور تنظیم کنیم ؟ من 1200 پیکسل در نظر گرفتم اما تو این پروژه - دیجی کالا بنظرم auto یا رسپانسیو هستش و اندازه میگیرم 1340 تنظیم شده

دوم - وقتی یک سطر نوشته زیر هم داریم مثلا منو - چطور باید فاصله بین خط هارو تنظیم کرد ؟

الان در آدرس پروژه من زیر منو رو اکی کردم اما فاصله بین خط های تگ های a زیاده - از line-height استفاده کردم اما کاربری نبود

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • مدیر انجمن

الان کدهای رسپانسیو داخل قالب وجود داره فقط توی استایل دهی مشکل دارید. توی فایل استایل #header .header-left رو حذف کنید و این کدها رو بجاش قرار بدید:

#header .header-left {
    width: auto;
    height: 70px;
    position: relative;
    justify-content: flex-end;
    display: flex;
    left: 20px;
    background-color: #fff;
}

 

برای اون منوها، می تونید از padding-bottom استفاده کنید. یا اگه تعداد منوها زیاد باشه، می تونید قسمت لینک ها رو اسکرول بدید. یعنی چنین کدی:

.sub-menu2 .right-submenu2 {
    width: 270;
    height: 100%;
    float: right;
    overflow: auto;
}

یا اینکه محدوده زیرمنوها رو تمام صفحه کنید که پیشنهاد نمی کنم اینکارو، ممکنه باعث باگ بشه.

  • Like 1
لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

با تشکر از پاسخ

با display ها کامل آشنا نیستم block و inline-block رو میشناسم  میفهمم چیکار میکنن

شما از flex استفاده کردید - عملکردش چطور هستش ؟

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • مدیر انجمن

مقادیر خاصیت display رو می تونید از لینک  لینک ها تنها برای اعضای سایت قابل نمایش است.  مطالعه کنید.

بطور خلاصه بخوام بگم که قابل فهم باشه، مقدار flex یک خاصیت جامع هست که خودش شامل چند خاصیت وابسته هست. flex رو میشه جهت داد، از سمت چپ و راست تراز کرد، از سمت بالا و پایین تراز کرد، از wrap یا nowrap استفاده کرد و خلاصه خیلی کارا میشه باهاش کرد. 

برای مثال 

display: flex; flex-direction: row;

کد بالا  دقیقا همون کار  inline-block رو انجام میده ولی در بخش flex ها، گزینه های بیشتری برای استایل دهی در دسترس هستند.

بطور کلی flex و وابسته هاش، می تونند حرفه ای تر عمل کنند

  • Like 1
لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

برای ارسال دیدگاه یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید دیدگاهی ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در سایت ما ثبت نام کنید. عضویت خیلی ساده است !

ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید

ورود به حساب کاربری
×
×
  • اضافه کردن...