0

Here is my style:

<style>
      ul {         
          padding:0 0 0 0;
          margin:0 0 0 0;
      }
      ul li {     
          list-style:none;
          margin-bottom:25px;           
      }
      ul li img {
          cursor: pointer;
      }
      .modal-body {
          padding:5px !important;
      }
      .modal-content {
          border-radius:0;
      }
      .modal-dialog img {
          text-align:center;
          margin:0 auto;
      }
    .controls{          
        width:50px;
        display:block;
        font-size:11px;
        padding-top:8px;
        font-weight:bold;          
    }
    .next {
        float:right;
        text-align:right;
    }
      /*override modal for demo only*/
      .modal-dialog {
          max-width:500px;
          padding-top: 90px;
      }
      @media screen and (min-width: 768px){
          .modal-dialog {
              width:500px;
              padding-top: 90px;
          }          
      }
      @media screen and (max-width:1500px){
          #ads {
              display:none;
          }
      }

        .dock {
            border: 4px dotted #cccccc;
            background-color: #ededed;
            width: 600px;
            height: 300px;
            color: #aaa;
            font-size: 18px;
            text-align: center;
            padding-top: 100px;
        }
        .dock_hover {
            border: 4px dotted #4d90fe;
            background-color: #e7f0ff;
            width: 600px;
            height: 300px;
            color: #4d90fe;
            font-size: 18px;
            text-align: center;
            padding-top: 100px;
        }
  </style>

And I want to control

ul li {     
          list-style:none;
          margin-bottom:25px;           
      }

without making change for my default page. margin-bottom must be 0px And here is my ul li

<ul class="row">
    <li class="col-lg-3 col-md-3 ">
    <img class="img-responsive" src="images/photodune-174908-rocking-the-night-away-xs.jpg">
    </li>
    <li class="col-lg-3 col-md-3 ">
    <img class="img-responsive" src="images/photodune-287182-blah-blah-blah-yellow-road-sign-xs.jpg">
    </li>
    <li class="col-lg-3 col-md-3 ">
    <img class="img-responsive" src="images/photodune-460760-colors-xs.jpg">
    </li>
</ul>

Is it possible to change margin-bottom:0px through given class to ul li ? I've read the reference css style change just for one page but I don't know how to implement its code. That's why I ask a question for this. Here is the page while margin-bottom:0px enter image description here

Here is the page while margin-bottom:25px enter image description here

I want to fix the picture with margin-bottom:25px but I don't want to change totally of the page. Here's full of my script page:

<!DOCTYPE html>
<?php include('akses.php'); ?>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Basarnas</title>

    <!-- Bootstrap Core CSS -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="../css/sb-admin.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="../font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<style>
      ul {         
          padding:0 0 0 0;
          margin:0 0 0 0;
      }
      ul li {     
          list-style:none;
          margin-bottom:25px;           
      }
      ul li img {
          cursor: pointer;
      }
      .modal-body {
          padding:5px !important;
      }
      .modal-content {
          border-radius:0;
      }
      .modal-dialog img {
          text-align:center;
          margin:0 auto;
      }
    .controls{          
        width:50px;
        display:block;
        font-size:11px;
        padding-top:8px;
        font-weight:bold;          
    }
    .next {
        float:right;
        text-align:right;
    }
      /*override modal for demo only*/
      .modal-dialog {
          max-width:500px;
          padding-top: 90px;
      }
      @media screen and (min-width: 768px){
          .modal-dialog {
              width:500px;
              padding-top: 90px;
          }          
      }
      @media screen and (max-width:1500px){
          #ads {
              display:none;
          }
      }

        .dock {
            border: 4px dotted #cccccc;
            background-color: #ededed;
            width: 600px;
            height: 300px;
            color: #aaa;
            font-size: 18px;
            text-align: center;
            padding-top: 100px;
        }
        .dock_hover {
            border: 4px dotted #4d90fe;
            background-color: #e7f0ff;
            width: 600px;
            height: 300px;
            color: #4d90fe;
            font-size: 18px;
            text-align: center;
            padding-top: 100px;
        }
  </style>
<body>

    <div id="wrapper">

        <!-- Navigation -->
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.php">Operator Komunikasi</a>
            </div>
            <!-- Top Menu Items -->
            <ul class="nav navbar-right top-nav">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <?php echo $_SESSION['operatorkomunikasi']; ?> <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="settings.php"><i class="fa fa-fw fa-gear"></i> Settings</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="../logout.php"><i class="fa fa-sign-out"></i> Log Out</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav side-nav">
                    <li>
                        <a href="index.php"><i class="fa fa-fw fa-home"></i> Home</a>
                    </li>
                    <li class="active">
                        <a href="data_informasi_bencana.php"><i class="fa fa-fw fa-clipboard"></i> Informasi Bencana</a>
                    </li>
                    <li>
                        <a href="monitoring_operasi_sar.php"><i class="fa fa-fw fa-desktop"></i> Monitoring Operasi SAR</a>
                    </li>
                    <li>
                        <hr width="107%"><font color="#ffffff">&nbsp;&nbsp;&nbsp;&nbsp;Direktorat Operasi dan Latihan<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;BASARNAS</font><hr width="107%">
                        &nbsp;&nbsp;&nbsp;<img src="../gambar/logo.png"><hr width="107%">
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </nav>

        <div id="page-wrapper">

            <div class="container-fluid">
                <!-- Page Heading -->
                <div class="row">
                    <div class="col-lg-12">
                        <h2 class="page-header">
                            Data Informasi Bencana
                        </h2>
                        <ol class="breadcrumb">
                            <li>
                                <i class="fa fa-clipboard"></i> <a href="data_informasi_bencana.php"> List Informasi Bencana</a>
                            </li>
                            <li class="active">
                                <i class="fa fa-external-link"></i> Berita SAR
                            </li>
                        </ol>
                    </div>
                </div>

        <?php  if (isset($_POST['submit'])) {
        $key = md5('vxcygnusloiv');
        function encrypt($string, $key){
        $string = rtrim(base64_encode(mcrypt_encrypt(MCRYPT_RIJNDAEL_256, $key, $string, MCRYPT_MODE_ECB)));
        return $string;
        }

        $conn = new Mongo();
        $db = $conn->selectDB('basarnas');

        $id = $_POST['id'];
        $kategori = $_POST['kategoribencana'];
        $kepalaoperasi = $_POST['kepalaoperasi'];
        $kepalaoperasii = $_POST['kepalaoperasii'];

        $query = $db->informasi_bencana;
        $queryy = $db->user;
        $queryyy = $db->pegawai;
        if ($kategori == "Bencana Besar") {
        $cursor=$queryy->find(array("kantor"=>encrypt($kepalaoperasi, $key), "level"=>encrypt("Kepala Kantor Pusat BASARNAS", $key)));
        $nResults = $cursor->count();
        if ($nResults == 0){
        echo '<div class="alert alert-danger alert-dismissable">
              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
              <i class="fa fa-times"></i> Berita SAR gagal dikirim karena tidak ada yang menjabat sebagai (Kepala '.$kepalaoperasi.').
              </div>';
        }else {
        $cursor=$queryy->find(array("kantor"=>encrypt($kepalaoperasi, $key), "level"=>encrypt("Kepala Kantor Pusat BASARNAS", $key)));
        foreach($cursor as $doc){
        $selected = array('_id'=> new MongoId($doc['idpegawai']));
        $cursorr=$queryyy->find($selected);
        foreach($cursorr as $docc){
        $nip_kepala = decrypt($docc['nip'], $key);
        $nama_kepala = decrypt($docc['nama'], $key);
        $query->update(array("_id"=>new MongoId($id)), array('$set'=>array("status"=>encrypt("berita", $key), "status_berita"=>encrypt("Pending Berita SAR", $key), "kategori"=>encrypt($kategori, $key), "smc"=>encrypt($kepalaoperasi, $key), "nip_kepala"=>encrypt($nip_kepala, $key), "nama_kepala"=>encrypt($nama_kepala, $key), "chat_pusat_daerah"=>encrypt("", $key), "status_chat_pusat"=>0, "status_chat_daerah"=>0)));
        if ($query){
        echo '<div class="alert alert-info alert-dismissable">
              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
              <i class="fa fa-check"></i> Berita SAR berhasil dikirim ke ('.$kepalaoperasi.').
              </div>';
        }else {
        echo '<div class="alert alert-danger alert-dismissable">
              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
              <i class="fa fa-times"></i> Berita SAR gagal dikirim ke ('.$kepalaoperasi.').
              </div>';
        }
        }
        }
        }
        } elseif ($kategori == "Bencana Kecil"){
        $cursor=$queryy->find(array("kantor"=>encrypt($kepalaoperasii, $key), "level"=>encrypt("Kepala Kantor SAR Daerah", $key)));
        $nResults = $cursor->count();
        if ($nResults == 0){
        echo '<div class="alert alert-danger alert-dismissable">
              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
              <i class="fa fa-times"></i> Berita SAR gagal dikirim karena tidak ada yang menjabat sebagai (Kepala '.$kepalaoperasii.').
              </div>';
        }else {
        $cursor=$queryy->find(array("kantor"=>encrypt($kepalaoperasii, $key), "level"=>encrypt("Kepala Kantor SAR Daerah", $key)));
        foreach($cursor as $doc){
        $selected = array('_id'=> new MongoId($doc['idpegawai']));
        $cursorr=$queryyy->find($selected);
        foreach($cursorr as $docc){
        $nip_kepala = decrypt($docc['nip'], $key);
        $nama_kepala = decrypt($docc['nama'], $key);
        $query->update(array("_id"=>new MongoId($id)), array('$set'=>array("status"=>encrypt("berita", $key), "status_berita"=>encrypt("Pending Berita SAR", $key), "kategori"=>encrypt($kategori, $key), "smc"=>encrypt($kepalaoperasii, $key), "nip_kepala"=>encrypt($nip_kepala, $key), "nama_kepala"=>encrypt($nama_kepala, $key), "chat_pusat_daerah"=>encrypt("", $key), "status_chat_pusat"=>0, "status_chat_daerah"=>0)));
        if ($query){
        echo '<div class="alert alert-info alert-dismissable">
              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
              <i class="fa fa-check"></i> Berita SAR berhasil dikirim ke ('.$kepalaoperasii.').
              </div>';
        }else {
        echo '<div class="alert alert-danger alert-dismissable">
              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
              <i class="fa fa-times"></i> Berita SAR gagal dikirim ke ('.$kepalaoperasii.').
              </div>';
        }
        }
        }
        }
        } else {
        echo '<div class="alert alert-danger alert-dismissable">
              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
              <i class="fa fa-times"></i> Berita SAR gagal dikirim.
              </div>';
        }
        }
        $key = md5('vxcygnusloiv');
        function decrypt($string, $key){
        $string = rtrim(mcrypt_decrypt(MCRYPT_RIJNDAEL_256, $key, base64_decode($string), MCRYPT_MODE_ECB));
        return $string;
        }
        $conn = new Mongo();
        $db = $conn->selectDB('basarnas');
        $query = $db->informasi_bencana;
        $cursor=$query->find(array("_id"=>new MongoId($_GET['id'])));
        foreach($cursor as $id=>$doc){
        if (decrypt($doc['jenis_kejadian'], $key) == "" || decrypt($doc['lokasi_kejadian'], $key) == "" || decrypt($doc['no_telp_lain'], $key) == "" || decrypt($doc['catatan'], $key) == "") {
        $status = "disabled";
        }else{
        $status = "";
        }       
        ?>  
                <div class="row">
                    <div class="col-lg-12">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                <h3 class="panel-title"><i class="fa fa-file"></i> Form Pembuatan Berita SAR</h3>
                            </div>
                            <div class="panel-body">
                                <form class="form-signin" action="" method="post">
                                <div class="row">
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label>Waktu Kejadian:</label><input type="hidden" name="id" value="<?php echo $doc['_id']; ?>"/>
                                            <input type="text" class="form-control" name="waktulaporan" value="<?php echo date('Y/m/d, H:i', $doc['waktu_laporan']->sec); ?>" disabled/>
                                        </div>
                                        <div class="form-group">
                                            <label>Nama Pelapor:</label>
                                            <input type="text" class="form-control" name="namapelapor" value="<?php echo decrypt($doc['nama_pelapor'], $key); ?>" disabled/>
                                        </div>
                                        <div class="form-group">
                                            <label>No Telepon Pelapor:</label>
                                            <input type="text" class="form-control" name="notelp" value="<?php echo decrypt($doc['no_telp'], $key); ?>" disabled/>
                                        </div>
                                        <div class="form-group">
                                            <label>Jenis Kejadian:</label>
                                            <input type="text" class="form-control" name="jeniskejadian" value="<?php echo decrypt($doc['jenis_kejadian'], $key); ?>" disabled/>
                                        </div>
                                        <div class="form-group">
                                            <label>Lokasi Kejadian:</label>
                                            <input type="text" class="form-control" name="lokasikejadian" value="<?php echo decrypt($doc['lokasi_kejadian'], $key); ?>" disabled/>
                                        </div>
                                        <div class="form-group">
                                            <label>No Telepon Lain Yang Bisa Dihubungi:</label>
                                            <input type="text" class="form-control" name="notelplain" value="<?php echo decrypt($doc['no_telp_lain'], $key); ?>" disabled/>
                                        </div>
                                        <div class="form-group">
                                            <label>Catatan Tambahan: </label>
                                            <textarea class="form-control" rows="3" name="catatan" disabled><?php echo decrypt($doc['catatan'], $key); ?></textarea>
                                        </div>
                                        <div class="form-group">
                                            <label>Kategori Bencana:</label>
                                            <select class="form-control" name="kategoribencana" onchange="kategori(this);" required>
                                                <option value=""></option>
                                                <option value="Bencana Besar">Bencana Besar</option>
                                                <option value="Bencana Kecil">Bencana Kecil</option>
                                            </select>
                                        </div>
                                        <div class="form-group" id="bencanabesar" style="display: none;"><input type="hidden" name="kepalaoperasi" value="Kantor Pusat BASARNAS"/>
                                            <input type="text" class="form-control" value="Kantor Pusat BASARNAS" disabled/>
                                        </div>
                                        <div class="form-group" id="bencanakecil" style="display: none;">
                                            <label>Pilih Kantor SAR:</label>
                                            <select class="form-control" name="kepalaoperasii" required>
                                                <option value="Kantor SAR Daerah Aceh">Kantor SAR Daerah Aceh</option>
                                                <option value="Kantor SAR Daerah Medan">Kantor SAR Daerah Medan</option>
                                                <option value="Kantor SAR Daerah Padang">Kantor SAR Daerah Padang</option>
                                                <option value="Kantor SAR Daerah Pekanbaru">Kantor SAR Daerah Pekanbaru</option>
                                                <option value="Kantor SAR Daerah Jambi">Kantor SAR Daerah Jambi</option>
                                                <option value="Kantor SAR Daerah Tanjung Pinang">Kantor SAR Daerah Tanjung Pinang</option>
                                                <option value="Kantor SAR Daerah Pangkal Pinang">Kantor SAR Daerah Pangkal Pinang</option>
                                                <option value="Kantor SAR Daerah Bengkulu">Kantor SAR Daerah Bengkulu</option>
                                                <option value="Kantor SAR Daerah Palembang">Kantor SAR Daerah Palembang</option>
                                                <option value="Kantor SAR Daerah Lampung">Kantor SAR Daerah Lampung</option>
                                                <option value="Kantor SAR Daerah Jakarta">Kantor SAR Daerah Jakarta</option>
                                                <option value="Kantor SAR Daerah Bandung">Kantor SAR Daerah Bandung</option>
                                                <option value="Kantor SAR Daerah Semarang">Kantor SAR Daerah Semarang</option>
                                                <option value="Kantor SAR Daerah Surabaya">Kantor SAR Daerah Surabaya</option>
                                                <option value="Kantor SAR Daerah Denpasar">Kantor SAR Daerah Denpasar</option>
                                                <option value="Kantor SAR Daerah Mataram">Kantor SAR Daerah Mataram</option>
                                                <option value="Kantor SAR Daerah Kupang">Kantor SAR Daerah Kupang</option>
                                                <option value="Kantor SAR Daerah Banjarmasin">Kantor SAR Daerah Banjarmasin</option>
                                                <option value="Kantor SAR Daerah Balikpapan">Kantor SAR Daerah Balikpapan</option>
                                                <option value="Kantor SAR Daerah Merauke">Kantor SAR Daerah Merauke</option>
                                                <option value="Kantor SAR Daerah Pontianak">Kantor SAR Daerah Pontianak</option>
                                                <option value="Kantor SAR Daerah Palu">Kantor SAR Daerah Palu</option>
                                                <option value="Kantor SAR Daerah Makassar">Kantor SAR Daerah Makassar</option>
                                                <option value="Kantor SAR Daerah Kendari">Kantor SAR Daerah Kendari</option>
                                                <option value="Kantor SAR Daerah Ternate">Kantor SAR Daerah Ternate</option>
                                                <option value="Kantor SAR Daerah Ambon">Kantor SAR Daerah Ambon</option>
                                                <option value="Kantor SAR Daerah Jayapura">Kantor SAR Daerah Jayapura</option>
                                                <option value="Kantor SAR Daerah Sorong">Kantor SAR Daerah Sorong</option>
                                                <option value="Kantor SAR Daerah Biak">Kantor SAR Daerah Biak</option>
                                                <option value="Kantor SAR Daerah Timika">Kantor SAR Daerah Timika</option>
                                                <option value="Kantor SAR Daerah Manokwari">Kantor SAR Daerah Manokwari</option>
                                                <option value="Kantor SAR Daerah Merauke">Kantor SAR Daerah Merauke</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="container">
                                        <div class="col-md-7">    
                                            <div class="row" style="text-align:center; border-bottom:1px dashed #ccc;  padding:0 0 20px 0; margin-bottom:40px;">
                                                <h3 style="font-family:arial; font-weight:bold; font-size:30px;">
                                                    Upload Dokumen Foto Pendukung
                                                </h3>
                                            </div>
                                            <ul class="row">
                                                <li class="col-lg-3 col-md-3 ">
                                                    <img class="img-responsive" src="images/photodune-174908-rocking-the-night-away-xs.jpg">
                                                </li>
                                                <li class="col-lg-3 col-md-3 ">
                                                    <img class="img-responsive" src="images/photodune-287182-blah-blah-blah-yellow-road-sign-xs.jpg">
                                                </li>
                                                <li class="col-lg-3 col-md-3 ">
                                                    <img class="img-responsive" src="images/photodune-460760-colors-xs.jpg">
                                                </li>
                                                <li class="col-lg-3 col-md-3 ">
                                                    <img class="img-responsive" src="images/photodune-287182-blah-blah-blah-yellow-road-sign-xs.jpg">
                                                </li>
                                                <li class="col-lg-3 col-md-3 ">
                                                    <img class="img-responsive" src="images/photodune-287182-blah-blah-blah-yellow-road-sign-xs.jpg">
                                                </li>
                                            </ul>
                                                <div class="col-md-9">
                                                    <div class="progress">
                                                        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">0%</div>
                                                    </div>
                                                    <div id="result"></div>
                                                    <div align="center">
                                                    <div id="dock" class="dock">Drag & Drop Photos Here</div>
                                                    </div>
                                                </div>
                                        </div>           
                                        </div> 
                                        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                          <div class="modal-dialog">
                                            <div class="modal-content">         
                                              <div class="modal-body">                
                                              </div>
                                            </div><!-- /.modal-content -->
                                          </div><!-- /.modal-dialog -->
                                        </div><!-- /.modal -->
                                    </div>
                                </div>
                                <div class="text-right">
                                    <button class="btn btn-primary" name="submit" <?php echo $status;?>>Kirim Berita <i class="fa fa-share-square-o"></i></button>
                                </div>
                                </form>
                                <br>
                                <?php } ?>
                                <div class="well">
                                    <h4><i class="fa fa-info-circle"></i> Informasi Pengiriman Berita SAR</h4>
                                    <p align="justify">Jika tombol (<b>Kirim Berita</b>) dalam keadaan <b>"disabled"</b> maka pastikan untuk mengisi semua kolom data informasi bencana secara lengkap. Karena syarat untuk pengiriman berita SAR diharuskan untuk mengisi
                                    form secara lengkap meskipun pada catatan tambahan tidak ada yang perlu untuk diisi tetapi usahakan untuk mengisinya seperti <b>"Tidak ada"</b>. Untuk mengisi kolom data informasi bencana yang belum diisi dapat menuju link ini <?php echo "<a href='form_edit_info_bencana.php?id=".$id."'>" ?>Edit Informasi Bencana</a></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->

        </div>
        <!-- /#page-wrapper -->

    </div>
    <!-- /#wrapper -->

    <!-- jQuery -->
    <script src="../js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/photo-gallery.js"></script>
    <script type="text/javascript" src="script/tuto-dd-upload-image.js"></script>
 <script>
    function kategori(that) {
        if (that.value == "Bencana Besar") {
            document.getElementById("bencanabesar").style.display = "block";
            document.getElementById("bencanakecil").style.display = "none";
        } else if (that.value == "Bencana Kecil") {
            document.getElementById("bencanakecil").style.display = "block";
            document.getElementById("bencanabesar").style.display = "none";
        } else {
            document.getElementById("bencanakecil").style.display = "none";
            document.getElementById("bencanabesar").style.display = "none";
        }
    }
</script>
</body>

</html>
9
  • 2
    Make another class and add it to the elements you want to control the bottom margin on after the other class. Mar 29, 2017 at 10:38
  • 2
    If you only want to affect a single page, put a class somewhere on a parent element of that page only, then use a selector that includes that class, eg .foo-page ul li { margin-bottom: 0; } Mar 29, 2017 at 10:38
  • Do you have control over the html code?
    – Sahil Dhir
    Mar 29, 2017 at 10:47
  • @SahilDhir In this time, I've script style in the same page and some functions jQuery. Mar 29, 2017 at 10:49
  • can you show the code of that page?
    – Sahil Dhir
    Mar 29, 2017 at 10:50

3 Answers 3

1

HTML:

<ul id="pageID" class="row">
    <li class="col-lg-3 col-md-3 ">
        <img class="img-responsive" src="images/photodune-174908-rocking-the-night-away-xs.jpg">
    </li>
    <li class="col-lg-3 col-md-3 ">
        <img class="img-responsive" src="images/photodune-287182-blah-blah-blah-yellow-road-sign-xs.jpg">
    </li>
    <li class="col-lg-3 col-md-3 ">
        <img class="img-responsive" src="images/photodune-460760-colors-xs.jpg">
    </li>
</ul>

CSS:

  #pageID li {     
      list-style:none;
      margin-bottom:25px;           
  }

Hope I understood your question correctly. You want to change the ul > li class to margin-bottom: 25px; but only for the given page. Then this should work.

2
  • ul.row isn't needed in your solution as you're already explicitly targeting an id Mar 29, 2017 at 10:46
  • You still don't need to say ul in your CSS. The id is on the ul Mar 29, 2017 at 10:49
1

If you observe in the page the body class throws a unique class for the page. Taking the body class as your reference to the ul li that you are going to style the margin-bottom:0, as for eg;

<body class="page-class">

you can take the page class of the body and style your ul li as per your desire.

.page-class ul li{
    margin-bottom:0; 
 }
6
  • What if there are other li elements that need to retain their bottom margin? A valid answer but possibly too strict Mar 29, 2017 at 10:44
  • Exactly @AndyHolmes
    – Sahil Dhir
    Mar 29, 2017 at 10:45
  • Omg I'm so confused. What kind the answer that I need. :( Mar 29, 2017 at 10:47
  • @AndyHolmes in that case page class and the main div that the ul li lies would be best. Mar 29, 2017 at 10:48
  • @DikaAndharu I would either use this solution but apply a class to the ul element rather than the entire body element, or Eugene's answer - both the same idea essentially Mar 29, 2017 at 10:52
-7

If you want to change it only on one subpage you have to add a class or id somewhere at any parent element and write your selectors from there.

That one page will get then

<body class="foo">

and the css could be

body.foo ul.row{
    font-size: 1em;
}

body.foo ul.row li{
    list-style-type: none;
}
1
  • Edited: its a real solution now ;). Mar 29, 2017 at 10:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.