اذهب إلى المحتوى
  • 0

تعديل على مكان الأزرار css

محمود الكيال

السؤال

مرحبا.

اريد تعديل ازاز على ملف css.. مكان الازار اعلى فوق ال pdf اريد جعلها تحت ال pdf وطول الازرار على عرض ال pdf لسهولة التحكم 

اليك اكواد ملف html , css 

html:

<!DOCTYPE html>

<html lang="ar">
  <head>
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;"
    />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta
      name="viewport"
      content="initial-scale=1, width=device-width, viewport-fit=cover"
    />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
      integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
  </head>

  <body>
    
    <div class="top-bar">
      <button class="btn" id="prev-page">
        <i class="fas fa-arrow-circle-left"></i> Prev Page
      </button>
      <button class="btn" id="next-page">
        Next Page <i class="fas fa-arrow-circle-right"></i>
      </button>
      <span class="page-info">
        Page <span id="page-num"></span> of <span id="page-count"></span>
      </span>
    </div>
    
    <canvas id="pdf-render"></canvas>

    <script src="../../node_modules/pdfjs-dist/build/pdf.js"></script>
    <script type="text/javascript" src="./js/index.js"></script>
  </body>
</html>

css:

* {
  margin: 0;
  padding: 0;
}

.top-bar {
  background: #333;
  color: #fff;
  padding: 1rem;
}

.btn {
  background: coral;
  color: #fff;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0.7rem 2rem;
}

.btn:hover {
  opacity: 0.9;
}

.page-info {
  margin-left: 1rem;
}

.error {
  background: orangered;
  color: #fff;
  padding: 1rem;
}

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

للتعديل على مكان الأزرار يمكنك تغير ترتيب الكود بحيث تجعل قائمة الأزرار بعد viewer.

الكود الحالي:

<div class="top-bar">
  <button class="btn" id="prev-page">
    <i class="fas fa-arrow-circle-left"></i> Prev Page
  </button>
  <button class="btn" id="next-page">
    Next Page <i class="fas fa-arrow-circle-right"></i>
  </button>
  <span class="page-info">
    Page <span id="page-num"></span> of <span id="page-count"></span>
  </span>
</div>

<canvas id="pdf-render"></canvas>

يصبح كالتالي:

<canvas id="pdf-render"></canvas>

<div class="top-bar">
  <button class="btn" id="prev-page">
    <i class="fas fa-arrow-circle-left"></i> Prev Page
  </button>
  <button class="btn" id="next-page">
    Next Page <i class="fas fa-arrow-circle-right"></i>
  </button>
  <span class="page-info">
    Page <span id="page-num"></span> of <span id="page-count"></span>
  </span>
</div>

أما بالنسبة لحجم الأزرار نقوم بإدخال span الذي يحتوي على كلاس page-info داخل div نعطيه مثلا كلاس page-info-container كالتالي:

<div class="page-info-container">
  <span class="page-info">
    Page <span id="page-num"></span> of <span id="page-count"></span>
  </span>
</div>

ونقوم ببعض التغيرات في ملف CSS:

.btn {
  background: coral;
  color: #fff;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0.7rem 2rem;
  /*  نضيف الأسطر التالية */
  width: 50%;
  float: left;
}

.page-info-container {
  width: 100%;
  clear: both;
}

ليكون ملف HTML كالتالي:

<!DOCTYPE html>

<html lang="ar">
  <head>
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;"
    />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta
      name="viewport"
      content="initial-scale=1, width=device-width, viewport-fit=cover"
    />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
      integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
  </head>

  <body>
    <canvas id="pdf-render"></canvas>

    <div class="top-bar">
      <button class="btn" id="prev-page">
        <i class="fas fa-arrow-circle-left"></i> Prev Page
      </button>
      <button class="btn" id="next-page">
        Next Page <i class="fas fa-arrow-circle-right"></i>
      </button>
      <div class="page-info-container">
        <span class="page-info">
          Page <span id="page-num"></span> of <span id="page-count"></span>
        </span>
      </div>
    </div>

    <script src="../../node_modules/pdfjs-dist/build/pdf.js"></script>
    <script type="text/javascript" src="./js/index.js"></script>
  </body>
</html>

وملف CSS كالتالي:

* {
  margin: 0;
  padding: 0;
}

.top-bar {
  background: #333;
  color: #fff;
  padding: 1rem;
}

.btn {
  background: coral;
  color: #fff;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0.7rem 2rem;
  width: 50%;
  float: left;
}

.btn:hover {
  opacity: 0.9;
}

.page-info-container {
  width: 100%;
  clear: both;
}

.page-info {
  margin-left: 1rem;
}

.error {
  background: orangered;
  color: #fff;
  padding: 1rem;
}

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

لتعديل مكان الازازر يمكنك جعلها بهذه الصوره 

<!DOCTYPE html>

 

<html lang="ar">

  <head>

    <meta

      http-equiv="Content-Security-Policy"

      content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;"

    />

    <meta name="format-detection" content="telephone=no" />

    <meta name="msapplication-tap-highlight" content="no" />

    <meta

      name="viewport"

      content="initial-scale=1, width=device-width, viewport-fit=cover"

    />

    <link

      rel="stylesheet"

      href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"

      integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"

      crossorigin="anonymous"

    />

    <link rel="stylesheet" type="text/css" href="css/index.css" />

  </head>

 

  <body>

    

    <canvas id="pdf-render"></canvas>

 

    <div class="top-bar">

      <button class="btn" id="prev-page">

        <i class="fas fa-arrow-circle-left"></i> Prev Page

      </button>

      <button class="btn" id="next-page">

        Next Page <i class="fas fa-arrow-circle-right"></i>

      </button>

      <span class="page-info">

        Page <span id="page-num"></span> of <span id="page-count"></span>

      </span>

    </div>

 

    <script src="../../node_modules/pdfjs-dist/build/pdf.js"></script>

    <script type="text/javascript" src="./js/index.js"></script>

  </body>

</html>


 

مع اضافه التنسيق 

* {

  margin: 0;

  padding: 0;

}

 

.top-bar {

  background: #333;

  color: #fff;

  padding: 1rem;

}

 

.btn {

  background: coral;

  color: #fff;

  border: none;

  outline: none;

  cursor: pointer;

  padding: 0.7rem 2rem;

}

 

.btn:hover {

  opacity: 0.9;

}

 

.page-info {

  margin-left: 1rem;

}

 

.error {

  background: orangered;

  color: #fff;

  padding: 1rem;

}

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...