Postingan lainnya

Buku Ini Koding!

Baru!

Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!

Kelas Premium!
Belajar bikin website dari nol sekarang

Gunakan kupon "lebihcepat" untuk diskon 25%!

ini kenapa thumbnailnya nggak mau ke samping ya gan ?

ini kenapa thumbnailnya gak mau kesamping ya gan kok malah kebawah dan nggak rapih ,padahal displaynya dah inline,

ini kode css ane

@media only screen and (min-width : 480px){
	.table-row-equal {
		margin-left: 0%;
		display: inline-block;
		width: 100%;
		table-layout: fixed;
		border-spacing: 0px 0px;
		word-wrap: break-word;
		border-spacing: 0px 0px;
	}
	.table-row-equal .thumbnail {
		float: none;
		display: table-cell;
		vertical-align: top;
		width: 1%;
	}
}

#withlove{
  float: right;
  padding-right: 10px;

}
#copyright{
    margin: 0px;
    width: 100%;
    position: absolute;
    height:50px;
    line-height:50px;
    background:#3c3a3a;
    color:#fff;
    padding-left: 10px;
    margin: 0px;
    clear: both;
  }

#judul_single{
  font-size: 25px;
  margin-left: 10px;
  margin-right: 10px;
}

#tag_single{
  font-style: italic;
}

css

@Dagimal

275 Kontribusi 24 Poin

Diperbarui 8 tahun yang lalu

8 Jawaban:

coba post sama html nya, biar bisa nyoba juga..

@gunalirezqimauludi

350 Kontribusi 243 Poin

Dipost 8 tahun yang lalu

kalau untuk menyamping seharusnya agan menggunakan style float: lalu tambahin class => clear:both untuk bagian ujung parent dimana agan ingin menghentikan proses float nya...

@jhonyrain32

196 Kontribusi 192 Poin

Dipost 8 tahun yang lalu

float: [] [] [] [] [] clear:both();

@jhonyrain32

196 Kontribusi 192 Poin

Dipost 8 tahun yang lalu

ini html nya

  <head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>JarKom - Belajar Komputer</title>
    <link rel="icon" href="../img/komputer.ico">

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

    <!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <link href="view/style.css" rel="stylesheet">
  </head>

  <body>

  <nav class="navbar navbar-inverse">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#target-list">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button>
      <a href="#" class="navbar-brand" style="color:white">JarKom</a>
    </div>

    <div class="collapse navbar-collapse" id="target-list">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.php">Home</a></li>
        <li><a href="komputer.php">Komputer</a></li>
        <li><a href="#">Tech News</a></li>
        <li><a href="#">Tips & trik</a></li>
        <li><a href="add.php"><u>Tambah</u></a></li>
      </ul>

      <form action="index.php" method="get" role="search" class="navbar-form navbar-right">
        <input type="search" class="form-control" name="cari" placeholder="Silahkan Cari Disini...">
        <button type="search" class="btn btn-info" name="cari">Cari</button>
      </form>
    </div>
  </nav>

  <div class="container">
    <div class="jumbotron">
    <h1>Selamat Datang di JarKom!</h1>
    <p>Selamat Datang di situs JarKom ! Disini kalian bisa melihat
      artikel tentang perkembangan teknologi, Tips & trik seputar teknologi, dsb.</p>
    <a href="index.php" class="btn btn-success btn-lg" role="button"> Lihat Selengkapnya </a>
  </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

  </body>

</html>
<form action="" method="get">
   <input type="search" name="cari" placeholder="Silahkan Cari Disini...">
</form>

   <div class="table-row-equal" >
           <div class="col-md-6 col-md-4">
           <div class="thumbnail">

        <img class="img-responsive" src="upload/Types-of-Computer-Memory.jpg">

            <div class="caption">
           <h3>Seberapa Penting RAM pada PC kita???<br></h3>
           <p>

             <p><img alt="" src="/bootstrap%20jarkom/...           </p>
          <div id="menu_thumb">
           <p class="waktu"> 2017-02-12 11:29:29 </p>
           <p class="tag"> Tag: Komputer </p>
           <a href="edit.php?id=93" class="btn btn-primary"> Edit </a>
           <a href="delete.php?id=93" class="btn btn-danger"> Hapus </a>
           <a href="single.php?id=93" class="btn btn-info"> Baca Selengkapnya </a>
         </div>
         </div>
       </div>
     </div>
   </div><!--akhir thumbnail row-->
<br>

   <div class="table-row-equal" >
           <div class="col-md-6 col-md-4">
           <div class="thumbnail">

        <img class="img-responsive" src="upload/">

            <div class="caption">
           <h3>dagimal</h3>
           <p>

             <p>asdasd</p>
...           </p>
          <div id="menu_thumb">
           <p class="waktu"> 2017-02-16 18:50:24 </p>
           <p class="tag"> Tag: asd </p>
           <a href="edit.php?id=100" class="btn btn-primary"> Edit </a>
           <a href="delete.php?id=100" class="btn btn-danger"> Hapus </a>
           <a href="single.php?id=100" class="btn btn-info"> Baca Selengkapnya </a>
         </div>
         </div>
       </div>
     </div>
   </div><!--akhir thumbnail row-->
<br>

<br>
<br>
 <div class="alert alert-success" role="alert"> Lihat artikel pada JarKom! <p style="color:red">(website masih dalam pengembangan, mohon maaf atas kekurangannya!)</p> </div>

 <link rel="stylesheet" href="view/style.css">

<footer>
  <div id="copyright">Copyright © JarKom 2017 . All right reserved.<span id="withlove"> [ ] with
    <span style="color:pink">❤</span> in Klaten - Indonesia</span> </div>
</footer>

@Dagimal

275 Kontribusi 24 Poin

Dipost 8 tahun yang lalu

tolong bantu ane ya gan :)

@Dagimal

275 Kontribusi 24 Poin

Dipost 8 tahun yang lalu

coba

<html>

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>JarKom - Belajar Komputer</title>
    <link rel="icon" href="../img/komputer.ico">

    <!-- Bootstrap -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style media="screen">
        @media only screen and (min-width: 480px) {
            .table-row-equal {
                margin-left: 0%;
                display: inline-block;
                width: 100%;
                table-layout: fixed;
                border-spacing: 0px 0px;
                word-wrap: break-word;
                border-spacing: 0px 0px;
            }
            .table-row-equal .thumbnail {
                float: none;
                display: table-cell;
                vertical-align: top;
                width: 1%;
            }
        }

        #withlove {
            float: right;
            padding-right: 10px;
        }

        #copyright {
            margin: 0px;
            width: 100%;
            position: absolute;
            height: 50px;
            line-height: 50px;
            background: #3c3a3a;
            color: #fff;
            padding-left: 10px;
            margin: 0px;
            clear: both;
        }

        #judul_single {
            font-size: 25px;
            margin-left: 10px;
            margin-right: 10px;
        }

        #tag_single {
            font-style: italic;
        }
    </style>
</head>

<body>

    <nav class="navbar navbar-inverse">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#target-list">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button>
            <a href="#" class="navbar-brand" style="color:white">JarKom</a>
        </div>

        <div class="collapse navbar-collapse" id="target-list">
            <ul class="nav navbar-nav">
                <li class="active"><a href="index.php">Home</a></li>
                <li><a href="komputer.php">Komputer</a></li>
                <li><a href="#">Tech News</a></li>
                <li><a href="#">Tips & trik</a></li>
                <li><a href="add.php"><u>Tambah</u></a></li>
            </ul>

            <form action="index.php" method="get" role="search" class="navbar-form navbar-right">
                <input type="search" class="form-control" name="cari" placeholder="Silahkan Cari Disini...">
                <button type="search" class="btn btn-info" name="cari">Cari</button>
            </form>
        </div>
    </nav>

    <div class="container">
        <div class="jumbotron">
            <h1>Selamat Datang di JarKom!</h1>
            <p>Selamat Datang di situs JarKom ! Disini kalian bisa melihat artikel tentang perkembangan teknologi, Tips & trik seputar teknologi, dsb.</p>
            <a href="index.php" class="btn btn-success btn-lg" role="button"> Lihat Selengkapnya </a>
        </div>

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>

</body>

</html>
<form action="" method="get">
    <input type="search" name="cari" placeholder="Silahkan Cari Disini...">
</form>

<div class="table-row-equal">
    <div class="col-md-6 col-md-4">
        <div class="thumbnail">

            <img class="img-responsive" src="upload/Types-of-Computer-Memory.jpg">

            <div class="caption">
                <h3>Seberapa Penting RAM pada PC kita???<br></h3>
                <p>

                    <p>
                        <img alt="" src="/bootstrap%20jarkom/">
                    </p>
                    <div id=" menu_thumb ">
                        <p class="waktu "> 2017-02-12 11:29:29 </p>
                        <p class="tag "> Tag: Komputer </p>
                        <a href="edit.php?id=93 " class="btn btn-primary "> Edit </a>
                        <a href="delete.php?id=93 " class="btn btn-danger "> Hapus </a>
                        <a href="single.php?id=93 " class="btn btn-info "> Baca Selengkapnya </a>
                    </div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-md-4 ">
        <div class="thumbnail ">

            <img class="img-responsive " src="upload/ ">

            <div class="caption ">
                <h3>dagimal</h3>
                <p>

                    <p>asdasd</p>
                    ... </p>
                <div id="menu_thumb ">
                    <p class="waktu "> 2017-02-16 18:50:24 </p>
                    <p class="tag "> Tag: asd </p>
                    <a href="edit.php?id=100 " class="btn btn-primary "> Edit </a>
                    <a href="delete.php?id=100 " class="btn btn-danger "> Hapus </a>
                    <a href="single.php?id=100 " class="btn btn-info "> Baca Selengkapnya </a>
                </div>
            </div>
        </div>
    </div>
</div>
<!--akhir thumbnail row-->
<br>

<br>
<br>
<div class="alert alert-success " role="alert "> Lihat artikel pada JarKom!
    <p style="color:red ">(website masih dalam pengembangan, mohon maaf atas kekurangannya!)</p>
</div>

<link rel="stylesheet " href="view/style.css ">

<footer>
    <div id="copyright ">Copyright © JarKom 2017 . All right reserved.<span id="withlove "> [ ] with
    <span style="color:pink ">❤</span> in Klaten - Indonesia</span>
    </div>
</footer>

</html>

letakin nya jadi kaya gini

<div class="table-row-equal">
    <div class="col-md-6 col-md-4">
        <div class="thumbnail">
         .......
        </div>
    </div>
    <div class="col-md-6 col-md-4">
        <div class="thumbnail">
         .......
        </div>
    </div>
</div>

jangan

<div class="table-row-equal">
    <div class="col-md-6 col-md-4">
        <div class="thumbnail">
         .......
        </div>
    </div>
</div>
<div class="table-row-equal">
    <div class="col-md-6 col-md-4">
        <div class="thumbnail">
         .......
        </div>
    </div>
</div>

@gunalirezqimauludi

350 Kontribusi 243 Poin

Dipost 8 tahun yang lalu

nggak bisa gan soalnya web ane dinamis pake php

@Dagimal

275 Kontribusi 24 Poin

Dipost 8 tahun yang lalu

sundul

@Dagimal

275 Kontribusi 24 Poin

Dipost 8 tahun yang lalu

Buku Ini Koding!

Kelas Premium! Belajar bikin website dari nol sekarang

ini kenapa thumbnailnya nggak mau ke samping ya gan ?

Kelas Premium!
Belajar bikin website dari nol sekarang