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

محمود الكيال · 22 يونيو 2020

مرحبا.

اريد تعديل ازاز على ملف 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;
}

محمد ربيع زليول · 22 يونيو 2020

للتعديل على مكان الأزرار يمكنك تغير ترتيب الكود بحيث تجعل قائمة الأزرار بعد 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;
}

آلاء مجدى إبراهيم · 10 يوليو 2020

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

<!DOCTYPE html>

<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="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"

/>

</head>

<body>

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

</button>

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

</button>

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

</span>

</div>

</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;

}

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

السؤال

محمود الكيال

رابط هذا التعليق

شارك على الشبكات الإجتماعية

2 أجوبة على هذا السؤال

Recommended Posts

محمد ربيع زليول

رابط هذا التعليق

شارك على الشبكات الإجتماعية

آلاء مجدى إبراهيم

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية