مشکل در آدرس دهی عکس

سوال

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


ضمیمه ها
در حال بررسی 0
hrsh 3 هفته 15 پاسخ ها 58 دیده شده 1

پاسخ ها ( ۱۵ )

  1. کدهای style

    @font-face {
        font-family:’koodak’ ;
        src: url(‘../fonts/KoodakBold.woff’) format(‘woff’);
        font-weight: normal;
        font-style: normal;
        }
    * {
        font-family: ‘koodak’ ;
    }
    @font-face {
        font-family:’nazanin’ ;
        src: url(‘../fonts/Nazanin.woff’) format(‘woff’);
        font-weight: normal;
        font-style: normal;
        }
    * {
        font-family: ‘yekan’ ;
    }
    @font-face {
        font-family:’yekan’ ;
        src: url(‘../fonts/Yekan.woff2’) format(‘woff2’);
        font-weight: normal;
        font-style: normal;
        }
    * {
        font-family: ‘yekan’ ;
    }
    /*کد های اشتباهی
    @font-face{
        font-family: ‘koodak’ ;
        src: url(‘../fonts/KoodakBold.eot?#’)format(‘eot’),url(‘../fonts/KoodakBold.ttf?#’)format(‘truetype’), url(‘../fonts/KoodakBold.woff?#’)format(‘woff’),;
        font-weight: normal;
        font-style: normal;
    }
    *{
    font-family: ‘koodak’ ;
    }
    @font-face{
        font-family: ‘nazanin’ ;
        src: url(‘../fonts/Nazanin.eot’)format(‘eot’),url(‘../fonts/Nazanin.eot’)format(‘truetype’), url(‘../fonts/Nazanin.eot’)format(‘woff’),;
        font-weight: normal;
        font-style: normal;

    }
    *{
        font-family: ‘nazanin’ ;
        }

    @font-face{
        font-family: ‘yekan’ ;
        src: url(‘../fonts/Yekan.eot’)format(‘eot’),url(‘../fonts/Yekan.eot’)format(‘truetype’), url(‘../fonts/Yekan.eot’)format(‘woff’),;
        font-weight: normal;
        font-style: normal;
    }
    *{
        font-family: ‘yekan’ ;
        }
    /*Navbar*/
    .navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show>.nav-link {
        color: #۱ebba3 !important;
    }
    .nav-link{
        font-family: ‘koodak’!important;
    }
    .navbar-brand{
        font-family: ‘yekan’!important;
    }
    /*End Navbar*/
    /* Home */
    .landing{
        position: relative;
        top: ۰px;
        left: ۰;
        width: ۱۰۰%;
        height: ۱۰۰vh;
        z-index: -۱;
    }
    .home-wrap{
        position: absolute;
        top: ۰;
        left: ۰;
        width: ۱۰۰%;
        height: ۱۰۰%;
    }
    .home-inner{
        position: fixed;
        top: ۰;
        left: ۰;
        width: ۱۰۰%;
        height: ۱۰۰%;
        background: url(‘../images/root/back1.jpg’);
        background-size: cover;
        background-position: center center;
    }
    .caption{
        width: ۱۰۰%;
        position: absolute;
        top: ۴۰%;
        z-index: ۱;
        color: #fff;
    }
    .caption h1{
    font-family: ‘yekan’;
    font-size: ۴rem;
    font-weight: ۷۰۰;
    letter-spacing: ۰٫۳rem;
    text-shadow: ۰٫۱rem ۰٫۱rem ۰٫۸rem #۰۰۰ ;
    padding-bottom: ۱rem ;
    }
    .caption h3{
        font-family: ‘koodak’;
        font-size: ۲rem;
        text-shadow: ۰٫۱rem ۰٫۱rem ۰٫۵rem #۰۰۰;
        padding-bottom: ۱rem;
    }
    .caption .btn-strat{
        font-family: ‘yekan’;
        font-size: ۱٫۲rem;
        border-width: .۱rem;
        border-radius: ۰;
        padding: ۰٫۵rem ۱rem;
    }
    /* End Home */
    /* About Darsman */
    .area{
        margin: ۰ auto ;
        padding:4rem ۲rem ۱rem;
    }
    .area h2{
        font-size: ۲٫۴rem;
        font-family: ‘yekan’;
    }
    .area p{
        font-family: ‘nazanin’;
    }
    .btn-secondary{
        border-width: ۰٫rem;
        border-radius: ۰;
        font-size: ۱٫۲rem;
        padding: ۰٫۶rem1.2rem;
        margin: ۱rem;
        color: #fff;
        background-color: #۱ebba3;
        border-color: #۱ebba3;
    }
    .btn-secondary:hover{
        background-color: #۱۶۹c88;
        border-color: #۱۶۹c88;
    }
    /* Ens About Darsman */
    /* Servieces */
    .jumbotron{
        margin-bottom: ۰;
        padding: ۲rem ۰ ۳٫۵rem;
        border-radius: ۰;
    }
    h2.title{
        font-size: ۲rem;
        font-weight: ۸۰۰;
    }
    .underline{
        width: ۲۰rem;
        height: ۰٫۲rem;
        background-color: #۱ebba3;
        margin:1rem auto ۲rem;
    }
    .service i {
       color: #۱ebba3;
    }
    .service h3{
    font-family: yekan;
    font-size: ۱٫۴rem;
    font-weight:bold ;
    padding-bottom: ۰٫۴rem;
    }
    .service p {
       font-family: nazanin;
       font-size: ۱٫۱rem;
    }
    /*  End Servieces */
    /* Product Group */
    .group.bakgroun{
        position: relative;
        top: ۰;
    }
    .fixed-wrap{
        position: absolute;
        top: ۰;
        left: ۰;
        width: ۱۰۰%;
        height: ۱۰۰%;
        z-index: -۱ !important;
    }
    .fixed{
        position:fixed;;
        top: ۰;
        left: ۰;
        width: ۱۰۰%;
        height: ۱۰۰%;
        display: block;
        background-image: url(‘../images/root/back2.jpg’);
        background-size: cover;
        background-position: center center;
    }
    /* End Product Group */

    ————————————————————————————————————————–
    کد های index

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
        <meta charset=”UTF-8″>
        <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
        <title>آکادمی آنلاین درسمن</title>
        <link rel=”icon” href=”images/logo/favicon.png” type=”image/ico” />
        <link rel=”stylesheet” href=”css/bootstrap.min.css”>
        <link rel=”stylesheet” href=”css/bootstrap-rtl.min.css”>
        <link href=”https://use.fontawesome.com/releases/v5.0.4/css/all.css” rel=”stylesheet”>
        <link rel=”stylesheet” href=”css/style.css”>
    </head>
    <body class=”rtl”>
        <!–Home–>
        <div id=”home”>
            <nav class=”navbar navbar-expand-lg navbar-dark bg-dark fixed-top”>
                <a href=”#”class=”navbar-brand”></a>
                <img src=”file:///C:/Users/asus/Desktop/My%20Site/images/logo/darsman-logo.png” alt=”درسمن”width=”30px” height=”30px”>
                <a class=”navbar-brand” href=”#”>آکادمی آنلاین درسمن</a>
                <button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#navbarSupportedContent” aria-controls=”navbarSupportedContent” aria-expanded=”false” aria-label=”Toggle navigation”>
                  <span class=”navbar-toggler-icon”></span>
                </button>

                <div class=”collapse navbar-collapse” id=”navbarSupportedContent”>
                  <ul class=”navbar-nav mr-auto”>
                    <li class=”nav-item active”>
                      <a class=”nav-link” href=”#”>خانه <span class=”sr-only”>(current)</span></a>
                    </li>
                    <li class=”nav-item”>
                        <a class=”nav-link” href=”#”>درباره درسمن</a>
                      <li class=”nav-item”>
     
                        <a class=”nav-link” href=”#”>خدمات</a>
                      </li>
                      <li class=”nav-item”>
                        <a class=”nav-link” href=”#”>گروه محصولات</a>
                      </li>
                      <li class=”nav-item”>
                        <a class=”nav-link” href=”#”>مدرسین</a>
                      </li>
                        <li class=”nav-item”>
                            <a class=”nav-link” href=”#”>نویسندگان</a>
                          </li>
                      </li>
                    </li>
                </ul>
                <ul class=”navbar-nav ml-auto”>
                    <li class=”nav-item”>
                        <a class=”nav-link” href=”#”>ورود| ثبت نام</a>
                      </li>
                </ul>
                </div>
              </nav>
              <section class=”landing”>
                <div class=”home-wrap”>
                  <div class=”home-inner”>

                    </div>
                  </div>
              </section>
              <section class=”caption text-center”>
                  <h1>آکادمی آنلاین درسمن</h1>
                  <h3>بزرگترین ارائه دهنده دوره های آموزش برنامه نویسی و مهندسی</h3>
                  <a href=”#”class=”btn btn-outline-light btn-strat”> شروع آموزش</a>
              </section>
        </div>
        <!–End Home–>
     
        <!–About Darsman–>
        <div id=”About” class=”bg-white”>
          <div class=”col-12 text-center area”>
            <h2>
              آکادمی آنلاین درسمن – محصولی آموزشی از شرکت آریا نرم افزار
            </h2>
            <p>
              حتما شما هم برای یادگیری بیشتر یا گذراندن دروس داشگاهیتان با سایت‌هایی که ارائه خدمات آموزشی میدهند، برخورد داشتید.
            </p>
            <a href=”#”class=”btn btn-secondary”>
              درباره ما بیشتر بدانید
            </a>
          </div>
        </div>
    <!–End About Darsman–>
    <!– Servieces–>
    <div id=”Servieces”>
         <div class=”jumbotron”>
             <div class=”area text-center”>
                 <div class=”col-12 text-center”>
                     <h2 class=”title”>خدمات درسمن</h2>
                     <div class=”underline”></div>
                 </div>
                 <div class=”row text-center”>
                      <div class=”col-4″>
                        <div class=”service”>
                          <i class=”fa fa-play-circle fa-3x”></i>
                          <h3>
                            ویدئو های آموزشی
                          </h3>
                          <p>

                            مهمترین خدمات ما در آکادمی آنلاین درسمن ارائه ویدئوهای آموزشی با بالاترین کیفیت در زمینهای مختلف برنامه نویسی و علوم مهندسی</p>
                        </div>
                      </div>
                      <div class=”col-4″>
                        <div class=”service”>
                          <i class=”fa fa-file fa-3x”></i>
                          <h3>
                            مقالات علمی
                          </h3>
                          <p>
                             یکی دیگر از خدمات سایت درسمن ارائه آخرین مطالب علمی در حوزه های مختلف عووم مهندسی در قالب مقالات و پستها می باشد
                            </p>
                        </div>
                      </div>
                      <div class=”col-4″>
                          <div class=”service”>
                              <i class=”fa fa-reply fa-3x”></i>
                              <h3>
                                 انجمن پرسش و پاسخ
                                </h3>
                          <p>
                            انجمن پرسش و پاسخ درسمن جهت برطرف کردن مشکلات شما عزیزان راه اندازی شده و شما می توانید از طریق این انجمن پاسخ سولات خودتون رو بدست بیارید و یا سوالات دیگران را پاسخ دهید </p>
                        </div>
                      </div>
                      <div class=”col-4″>
     
                      </div>
                 </div>
             </div>
         </div>
     </div>
    <!–End Servieces–>
     
    <!– Product Group –>
    <div id=”prcdut-group”>
         <div class=”group-backgroun”>
              <div class=”row text-center”>
                   <div class=”col-12 text-center”>
                        <h2 class=”title”>گروه محصولات</h2>
                        <div class=”underline”></div>
                   </div>
                        <div class=”col-3″>
                             <div class=”service”>
                                 <i class=”fa fa-code fa-3x”></i>
                                 <h3>
                                     طراحی وب
                                 </h3>
                                 <p>

                                    آشنایی با زبانهای برنامه نویسی سمت کلاینت
     
                                 </p>
                             </div>
                         </div>
                         <div class=”col-3″>
                          <div class=”service”>
                            <i class=”fa fa-code fa-3x”></i>
                            <h3>
                                طراحی وب
                            </h3>
                            <p>

                               آشنایی با زبانهای برنامه نویسی سمت کلاینت
     
                            </p>
                        </div>
     
                         </div>
                         <div class=”col-3″>
                          <div class=”service”>
                            <i class=”fa fa-code fa-3x”></i>
                            <h3>
                                طراحی وب
                            </h3>
                            <p>

                               آشنایی با زبانهای برنامه نویسی سمت کلاینت
     
                            </p>
                        </div>
     
                         </div>
                         <div class=”col-3″>
                          <div class=”service”>
                            <i class=”fa fa-code fa-3x”></i>
                            <h3>
                                طراحی وب
                            </h3>
                            <p>

                               آشنایی با زبانهای برنامه نویسی سمت کلاینت
     
                           </p>
                       </div>
                   </div>
         </div>
          <div class=”fixes-wrap”>
            <div class=”fixed”>
     
            </div>
     
          </div>
       </div>
    </div>
    <!–End Product Group –>
     
        <script src=”js/jquery.min.3.3.1.js”></script>
        <script src=”js/popper.min.js”></script>
        <script src=”js/bootstrap.min.js”></script>
        <script src=”js/script.js”></script>
    </body>
    </html>


    ضمیمه ها
  2. سلام و عرض ادب خدمت شما

    نحوه آدرس دهی عکستون اشتباه هست، شکل صحیح آدرس دهی به صورت زیر هست:

    راجع به مشکل بعدی تون هم باید بگم شما که اصلا فونت رو تو فایل Css پروژتون تعریف نکردین!!
    برای اضافه کردن فونت به پروژه مثل کد زیر عمل کنید:

    در فایل Css پروژه خود کد زیر رو اضافه کنید:

    موفق باشید.

    • اصلا نمیزاره بفرستم میگه پرونده مجاز نیست امکانش براتون پیام فرستادم میشه بخونید اینجا خیلی برام مشکله کار کردن.

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

    • سلام مشکل فونت هام درست شذ خعیلی ممنون ولی تو آموزش چرا اون مدلی آدرس داده بود؟

      بین woffوwoff2فرقی هست؟

      یه سوال دیگه ذر مورد عکسی که گفتم مشکل از position هست فکر کنم چون وقتی fixedمیکنم همه چی خراب میشه ولی خب میخوام عکسه هم باشه هم fixedباشه.

      میدونم زیاد مبتدیم ولی بازم از پاسخ دادن با صبرتون خعیلی ممنونم.


      ضمیمه ها
      • سلام و عرض ادب، خوشحالم که مشکلتون حل شد.
        راجع به سوال دومتون باید بگم که Woff در واقع همان OTF یا TTF است با این تفاوت که شامل یکسری متادیتا می باشد به اضافه امکان فشرده سازی، خوشبختانه این فرمت توسط اغلب مرورگرها پشتیبانی می شود. طبیعتا با توجه به امکان فشرده سازی، استفاده از آنها در عرضه وب بسیار مفید است علاوه بر اینکه می توان کپی رایت و لایسنس را نیز در آن ضمیمه کرد. اما WOFF2 در واقع نسل بعدی WOFF است که امکان فشرده سازی بیشتری به شما می دهد. این میزان تقریبا ۳۰ درصد است و در برخی موارد به ۵۰ درصد هم می رسد که رقم قابل توجهی است. اغلب مرورگرهای جدید نیز از آن پیشتیبانی می کنند ولی اگر مشتریان شما کسانی هستند که هنوز از مرورگرهای قدیمی استفاده می کنند، استفاده از این فرمت توصیه نمی شود. در کل بهتره که شما در پروژه هاتون سه فرمت متفاوت از یک فونت رو تعریف کنید تا خیالتون از لحاظ پشتیبانی مرورگرها راحت باشه.
        متاسفانه دو سوال دیگه تون رو من دقیق متوجه نشدم که منظورتون چی هست، همیشه سوالتون رو خیلی واضح بذارید تا ما بهتر بتونیم راهنماییتون کنیم.
        سربلند باشید

        • بازم ممنون . منظورم اینه که طبق عکسی که فرستادم ببینید وقتی positionعکسم رو fixedمیکنم جایگزین عکس قبلی میشه و کلا قالب و بهم میریزه و وقتی هم چیز دیگه میزارم موقعیتش رو چیزی عوض نمیشه یعنی غکس نمیاد .


          ضمیمه ها

ارسال یک پاسخ