رفتن به مطلب

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


m1410

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

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

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

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

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

مشکل :

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

من به کمک دستور 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;
}

 

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

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

بله درست میفرمایید - باید تگ های 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

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

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

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

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

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

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

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

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

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

 

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

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

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

یه مشکل

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

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

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

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

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

ممنون از پاسخ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

بحثمون سر انیمیشن بود که من گفتم از سلکتور 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); }

 

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

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

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

دو سوال :

اول اینکه اندازه صفحات وب رو باید چطور تنظیم کنیم ؟ من 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;
}

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

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

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

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

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

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

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

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

برای مثال 

display: flex; flex-direction: row;

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

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

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

  • 3 هفته پیش...

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

یه قالب آماده داریم که میخوام یه تغییر توش بدم

با  کمک گزینه Inspect فهمیدم باید چی رو تغییر بدم اما فایلشو نمیدونم باید چطور پیدا کنم

دسترسی به کل قالب دارم ممنون میشم راهنمایی کنید چطور باید گزینه ای که میخوام تغییر بدم رو فایلشو پیدا کنم

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

در 39 دقیقه قبل، m1410 گفته است :

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

یه قالب آماده داریم که میخوام یه تغییر توش بدم

با  کمک گزینه Inspect فهمیدم باید چی رو تغییر بدم اما فایلشو نمیدونم باید چطور پیدا کنم

دسترسی به کل قالب دارم ممنون میشم راهنمایی کنید چطور باید گزینه ای که میخوام تغییر بدم رو فایلشو پیدا کنم

درود؛

لطفا برای پرسش های جدید یک تاپیک جدید ایجاد کنید.

توی همون پنل Inspect طبق تصویر زیر نام فایل و خطی که کد استایل داخلش هست رو نوشته. اگه موس رو روش نگهدارید آدرس دقیق فایل رو زیرش نشون میده بهتون.

Screenshot_3.png.fdc700b5000be2211646066c19f7ddda.png

اگر از افزونه های ادغام فایل های استایل استفاده می کنید، برای فهمیدن فایل دقیق باید موقتا افزونه رو غیرفعال کنید در غیراینصورت تمامی فایل های استایل در یک فایل جمع میشن که شناسایی فایل دقیق رو غیرممکن می کنند.

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

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

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

استایل رو بلدم فایلشو پیدا کنم

اما کدها و فایل های php رو میخواستم بدونم

یه قطعه کد دارم استایل داخلی یا درون خطی بهش دادن - میخوام اونو پاک کنم - فایل php رو پیدا نمیکنم

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

در 56 دقیقه قبل، m1410 گفته است :

یه قطعه کد دارم استایل داخلی یا درون خطی بهش دادن - میخوام اونو پاک کنم - فایل php رو پیدا نمیکنم

پیدا کردن کد PHP که خروجی HTML تولید کنه تقریبا غیرممکن هست مگر اینکه بدونید اون خروجی رو چه تابعی می تونه تولید کنه . در اینصورت میشه فهمید یک قسمت از سورس سایت توسط چه کدی تولید شده.

 

برای مشکل شما که استایل درون خطی به یک المنت داده شده، دو حالت می تونه داشته باشه:

  1. حالت اول اینه که اون استایل رو مستقیما داخل فایل PHP به اون المنت دادن و به همون صورت هم داخل سورس اومده. اگه این حالت باشه، می تونید قالب رو داخل یک پوشه داخل کامپیوترتون قرار بدید بعد نرم افزار NotePad++ رو اجرا کنید. گزینه Ctrl+F رو بزنید. تب Find in Files رو بزنید. در فیلد Find What قسمتی از اون دستور استایل درون خطی رو وارد کنید. مثلا style="margin:5px" بعد از فیلد Directory پوشه قالب رو انتخاب کنید و کلید Find All رو بزنید. برنامه توی تمامی فایل های قالب دنبال اون کلمه می گرده و اگه پیدا بشه آدرس و خط دقیق اون کد رو بهتون میگه
  2. حالت دوم زمانی هست که اون استایل درون خطی توسط جاوا اسکریپت تولید میشه. مثل اسلایدرها، کاروسل ها یا محتوای داینامیک که بر اساس اندازه دستگاه کاربر یه میزان و عدد خاصی رو به المنت به صورت درون خطی میدن. در این حالت متاسفانه شناسایی خیلی سخت میشه مگر اینکه بدونید اون المنت مربوط به چه قابلیتی هست. یعنی اگه مربوط به اسلایدر هست باید داخل کدهای مربوط به اسلایدر یا افزونه اسلایدر دنبال اون کد بگردید.
لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

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

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

در تصویر زیر اون خطی که آبی شده و انتخاب شده یه کد استایل داخلی داره که میخوام حذف بشه

نسخه موبایل سایت هست - یه افزونه + یه قالب مخصوص براش تعریف شده

مشکل این هست که در محصول تکی وقتی گالری باشه تصویر شاخص نمایش داده نمیشه و من وقتی این استایل داخلی رو حذف میکنم اکی میشه مشکل

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

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

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

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

اما یه راه حل ساده تر وجود داره و اونم استفاده از استایل خنثی هست! یعنی بیاییم استایل مشابهی رو برای اون کلس تعریف کنیم و مقدار خنثی بهش بدیم و اونو important کنیم. برای تصویری که دادید، سه استایل مشاهده میشه که دستور خنثی رو میتونید به این صورت استفاده کنید:

figure.woocommerce-product-gallery__wrapper {
	width: unset !important;
    transform: unset !important;
    transition-duration: unset !important;
}

 

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

بایگانی شده

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

مهمان
این موضوع برای عدم ارسال قفل گردیده است.
×
×
  • اضافه کردن...