Kode css seperti tidak berfungsi, tidak ngaruh ke html

Sering, waktu menambah elemen baru di situs ini, kode css seperti tidak berfungsi. Dikasih width dan tinggi/height, kok seperti tidak nyerap kodenya.

Kejadian terbaru yang dialami admin misalnya, ketika merapikan halaman pencarian www.santuy.com ini. Jadi, status halaman pencarian tabrakan/saling tumpuk dengan bagian pagination blog.

Kode htmlnya adalah berikut ini;

   <b:includable id='status-message'>
   <b:if cond='data:navMessage'>
   <div class='status-message-wrap'>
   <div class='status-message'>
   <data:navMessage/>
   </div>
   </div>
   </b:if>
   </b:includable>

Dan css nya sebagai berikut;

  .status-message-wrap {
   display: block;
   width: 100%;
   height: auto;
}
.status-message {
   padding: 15px 10px;
   border: 1px solid #ccc;
   background: yellow;
   color: #888;
}
           

Karena html nya seperti tidak mendeteksi css yang dibikin maka dicobalah mengubah nama class di bagian html nya.
Dari ;

  <div class='status-message-wrap'>
  <div class='status-message'>
  <data:navMessage/>
  </div>
  </div>
   

Menjadi ;

 <div class='sresult'>
  <data:navMessage/>
  </div>
                     
 

Dengan css yang berubah menjadi ;

  .sresult {
   display: block;
   width: 100%;
   height: auto;
}
            

Hasilnya, tampilan halaman pencarian pun menjadi seperti yang di inginkan.

Sebelumnya, saat membuat gambar posting menjadi thumbnail, juga mengalami hal yang serupa, kode css seperti error, tidak berfungsi.

Thumbnail yang dimaksud adalah berikut ini;

Awalnya. kode html nya kayak di bawah;

<div class="galp">
  <div class="pshell">
    <a href="" title="">
      <img src="" alt="">
    </a>
    <a href="" title="">
      <img src="" alt="">
    </a>
    <a href="" title="">
      <img src="" alt="">
    </a>
    <a href="" title="">
      <img src="" alt="">
    </a>
  </div>
  </div>
 

Dengan css nya sebagai berikut;

.galp {
    width: 100%;
    padding: 10px;
    float: left;
    display: block;
  }
.galp .pshell {
    width: 32%;
    float: left;
    margin: 0 5px 5px 0;
  }
  .galp .pshell a img {
    width: 100%;
    height: 100%;
  }
 

Mau macam mana diubah, floating gambar tidak pernah sesuai. Kalau ngak kekiri semua, gambar keluar dari gars semua. Ternyata ada yang keliru, harusnya htmlnya seperti ini;

<div class="galp">
  <div class="pshell">
    <a href="" title="">
      <img src="" alt="">
    </a>
  </div>
  <div class="pshell">
    <a href="" title="">
      <img src="" alt="">
    </a>
  </div>
  <div class="pshell">
    <a href="" title="">
      <img src="" alt="">
    </a>
  </div>
  <div class="pshell">
    <a href="" title="">
      <img src="" alt="">
    </a>
  </div>
  <div class="pshell">
    <a href="" title="">
      <img src="" alt="">
    </a>
  </div>
  </div>
 

Terakhir admin dapati, paling simple nya, html dan css nya dibuat seperti ini saja;

 <div class="galp">
  <a href="" title=""> <img alt="" src=""/></a>
  <a href="" title=""> <img alt="" src=""/></a>
  <a href="" title=""> <img alt="" src=""/></a>
  <a href="" title=""> <img alt="" src=""/></a>
  <a href="" title=""> <img alt="" src=""/></a>
  <a href="" title=""> <img alt="" src=""/></a>
  <a href="" title=""> <img alt="" src=""/></a>
</div> 
  
  .galp {
    width: 100%;
    height: 100%;
  }
.galp a {
    width: 32%;
    float: left;
  }
.galp a img {
    width: 100%;
    height: 200px;
  }     
 

Simple dan rapi.

Tentang Author

St

Dikirim pada -18 Sep 2023
" Selamat datang, selamat membaca dan selamat berseluncur "

San Tuy

Share ke

Lainnya oleh Santuy :