Jadi saya mengalami pertanyaan pemformatan CSS yang saya harap saya bisa mendapatkan bantuan. Secara umum, saya membuat pengaturan saya berfungsi, memiliki posisi pergeseran menu berdasarkan ukuran layar sehingga selalu terpusat secara vertikal dan horizontal, dll.

Namun, saya mengalami masalah di mana jika Anda membuat jendela tampilan terlalu kecil, elemen mulai tumpang tindih, yang tidak diinginkan.

Berikut adalah biola untuk menampilkan apa yang saya bicarakan. Saya lebih suka bahwa kotak hijau memaksa segala sesuatu yang lain di bawahnya, sehingga tidak lagi tumpang tindih dengan yang merah (Semuanya dalam div "buttonContainerBase"):

Biola

Inilah pengaturan Div HTML dan CSS yang relevan:

#buttonContainerBase {
  position: absolute;
  left: 0px;
  width: 100%;
  height: 100%;
}
.hCenterDiv {
  width: 370px;
  margin-left: auto;
  margin-right: auto;
}
.backgroundBoxDiv {
  position: absolute;
  top: 50%;
  height: 244px;
  margin-top: -112px;
  margin-left: 0px;
  width: 370px;
  overflow: auto;
  display: inline-block;
  text-align: center;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  opacity: 0.95;
  filter: alpha(opacity=95);
  background: -moz-linear-gradient(top, #FFFFFF 45%, #F5F5F5 75%);
  background: -webkit-gradient(linear, top, bottom, color-stop(45%, #FFFFFF), color-stop(75%, #F5F5F5));
  background: linear-gradient(180deg, #FFFFFF 45%, #F5F5F5 75%);
  box-shadow: 2px 2px 4px #244260;
}
.logoContainerDiv {
  width: 344px;
  height: 76px;
  margin-top: 5px;
  display: inline-block;
  background-color: red;
}
.dividingLineDiv {
  height: 2px;
  width: 370px;
  background-color: #335B84;
}
#myLogo {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 257px;
  height: 73px;
  background-color: green;
}
#contentWrapper {
  min-height: 300px;
}
.buttonContainerDiv {
  /*padding: 5px;*/
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
}
#studentLoginDiv {
  margin-bottom: 10px;
}
.customButton {
  padding: 0px;
  width: 225px;
  height: 34px;
  border: solid 2px #FFFFFF;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  border-style: outset;
  background-color: #f5f5f5;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 18px;
  cursor: pointer;
}
.customButton:hover {
  border: solid 2px #F5F5F5;
  border-style: inset;
  background-color: #f2f2f2;
}
.customButton:active {
  border: solid 4px #F5F5F5;
  border-style: inset;
  background-color: #D1D1D1;
}
<div id="contentWrapper">
  <div id="buttonContainerBase">
    <div class="hCenterDiv">
      <div class="backgroundBoxDiv">
        <div class="elementContainerDiv">
          <div class="logoContainerDiv"></div>
          <div class="dividingLineDiv"></div>
          <div class="buttonContainerDiv">
            <input class="customButton" id="instructorLogin" type="button" value="Instructor Login" onclick="window.open('http://www.google.com');" />
          </div>
          <div class="buttonContainerDiv" id="studentLoginDiv">
            <input class="customButton" id="studentLogin" type="button" value="Student Login" onclick="window.open('http://www.google.com/');" />
          </div>
          <div class="dividingLineDiv"></div>
          <div class="buttonContainerDiv">
            <input class="customButton" id="instructionalVids" type="button" value="Instructional Videos" onclick="window.open('https://www.youtube.com/');" />
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="myLogo"></div>
</div>

Masih agak baru dalam permainan CSS, jadi saya mohon maaf sebelumnya jika terlihat funky/canggung.

1
nyghtrunner 3 Juni 2016, 00:20
Saya tidak akan menjawab pertanyaan Anda, tetapi jika Anda baru mengenal "permainan CSS" Anda dapat melewatkan banyak pembelajaran jika Anda mempelajari flexbox dari awal. Maka Anda bisa menghindari banyak masalah, bahkan mungkin yang satu ini. Saya merekomendasikan flexboxfroggy.com untuk memasangkan pengembang backend dan mereka menikmati game edukasi ini. Semoga saran ini bermanfaat bagi Anda.
 – 
Pavelloz
3 Juni 2016, 00:56
Saya harus tidak setuju dengan @Pavelloz. Mempelajari semua aspek CSS akan memungkinkan Anda untuk menulis CSS Anda sendiri, tetapi juga mendiagnosis dan memperbaiki masalah dengan CSS yang telah ditulis orang lain. Bukan untuk mengatakan bahwa Flexbox tidak bisa menjadi solusi di sini tetapi merekomendasikan Anda melewatkan banyak pembelajaran sepertinya bukan saran yang kuat bagi saya.
 – 
matt.
3 Juni 2016, 01:01
1
Saya akan melihat ke flexbox di beberapa titik, tetapi saya setuju dengan enki bahwa ada nilai dalam mempelajari solusi, daripada belajar bagaimana melewati masalah. Saya hanya melakukan ini di CSS untuk mempelajari lebih lanjut tentang CSS, karena ini adalah konsep yang sangat sederhana.
 – 
nyghtrunner
3 Juni 2016, 17:16
Seperti seseorang pernah berkata, "Intelektual memecahkan masalah, jenius mencegahnya.". Bagaimanapun, lakukan apa yang harus kamu lakukan.
 – 
Pavelloz
7 Juni 2016, 22:16

1 menjawab

Jawaban Terbaik

Ini terjadi karena #myLogo memiliki position:absolute, jadi :

  • ubah ke position:relative di CSS
  • pindahkan div di DOM agar berada di atas
  • hapus semua CSS untuk #buttonContainerBase

Dalam backgroundBoxDiv

  • hapus margin-top: -112px, itu akan menjadi peretasan.
  • tambahkan kode ini:

    top: 0;
    bottom:0;
    right:0;
    left:0;
    margin:auto;
    

CATATAN Ini akan tumpang tindih dalam tampilan 320px, jadi Anda mungkin memerlukan kueri media untuk itu.


.hCenterDiv {
  width: 370px;
  margin-left: auto;
  margin-right: auto;
}
.backgroundBoxDiv {
  position: absolute;
  top: 0;
  bottom:0;
  right:0;
  left:0;
  margin:auto;
  height: 244px;
  width: 370px;
  overflow: auto;
  display: inline-block;
  text-align: center;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  /*
	border: solid 2px #004586;
	background-color: #FFFFFF;
	*/
  opacity: 0.95;
  filter: alpha(opacity=95);
  background: -moz-linear-gradient(top, #FFFFFF 45%, #F5F5F5 75%);
  background: -webkit-gradient(linear, top, bottom, color-stop(45%, #FFFFFF), color-stop(75%, #F5F5F5));
  background: linear-gradient(180deg, #FFFFFF 45%, #F5F5F5 75%);
  box-shadow: 2px 2px 4px #244260;
}
.logoContainerDiv {
  width: 344px;
  height: 76px;
  margin-top: 5px;
  display: inline-block;
  background-color: red;
  /*	border: solid 2px #004586;	*/
}
.dividingLineDiv {
  height: 2px;
  width: 370px;
  background-color: #335B84;
}
#myLogo {
  position: relative;
  top: 5px;
  left: 5px;
  width: 257px;
  height: 73px;
  background-color: green;
}
#contentWrapper {
  /*
	column-count: 2;
	column-gap: 40px;
	*/
  min-height: 300px;
  
}
/******** BUTTONS *********/

.buttonContainerDiv {
  /*padding: 5px;*/
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
}
#studentLoginDiv {
  margin-bottom: 10px;
}
.customButton {
  padding: 0px;
  width: 225px;
  height: 34px;
  border: solid 2px #FFFFFF;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  border-style: outset;
  background-color: #f5f5f5;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 18px;
  cursor: pointer;
}
.customButton:hover {
  border: solid 2px #F5F5F5;
  border-style: inset;
  background-color: #f2f2f2;
}
.customButton:active {
  border: solid 4px #F5F5F5;
  border-style: inset;
  background-color: #D1D1D1;
}
/****** END BUTTONS *******/
<div id="contentWrapper">
  <div id="myLogo"></div>
  <div id="buttonContainerBase">
    <div class="hCenterDiv">
      <div class="backgroundBoxDiv">
        <div class="elementContainerDiv">
          <div class="logoContainerDiv"></div>
          <div class="dividingLineDiv"></div>
          <div class="buttonContainerDiv">
            <input class="customButton" id="instructorLogin" type="button" value="Instructor Login" onclick="window.open('http://www.google.com');" />
          </div>
          <div class="buttonContainerDiv" id="studentLoginDiv">
            <input class="customButton" id="studentLogin" type="button" value="Student Login" onclick="window.open('http://www.google.com/');" />
          </div>
          <div class="dividingLineDiv"></div>
          <div class="buttonContainerDiv">
            <input class="customButton" id="instructionalVids" type="button" value="Instructional Videos" onclick="window.open('https://www.youtube.com/');" />
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
2
dippas 3 Juni 2016, 00:56
Terima kasih atas jawaban cepatnya! Saya baru saja mencobanya, dan sementara itu memecahkan masalah yang tumpang tindih, menu sekarang tidak lagi berpusat secara vertikal di halaman, hanya secara horizontal. Saya pikir saya mungkin bisa menyelesaikan ini dengan javascript, karena yang benar-benar saya butuhkan adalah cara untuk memberi tahu elemen itu, "if element.y < 78 { element.y=78; }". Saya hanya berharap ada cara untuk menjaga fungsionalitas penuh dan memperbaiki masalah dengan CSS.
 – 
nyghtrunner
3 Juni 2016, 00:41
Yah, saya mencoba perbaikan Anda yang diperbarui, dan meskipun mungkin sedikit lebih baik, tumpang tindih, seperti yang Anda catat masih ada. Saya akan melihat kueri media, tetapi saya mungkin hanya akan menggunakan rute javascript. Either way, terima kasih telah meluangkan waktu untuk melihat ke dalam ini.
 – 
nyghtrunner
3 Juni 2016, 17:08
Itu hanya dalam 320px, jadi kueri media minimum akan memperbaikinya, Tidak perlu menggunakan javascript, saya hanya tidak berpikir bahwa saya harus mengkodekan semuanya. Saya memecahkan masalah Anda, memperhatikan bahwa itu adalah area pandang kecil yang perlu diurus.
 – 
dippas
3 Juni 2016, 17:34
Kueri media berhasil. Dan jauh lebih mudah digunakan daripada yang saya bayangkan. Terima kasih lagi!
 – 
nyghtrunner
3 Juni 2016, 18:52
Jangan edit pertanyaan untuk berterima kasih kepada saya dan untuk menambahkan kode yang akhirnya Anda gunakan sebagai gantinya, Anda dapat mempertimbangkan untuk menerima jawabannya :),
 – 
dippas
3 Juni 2016, 18:53