Postingan lainnya
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;
}
0
8 Jawaban:
coba post sama html nya, biar bisa nyoba juga..
0
kalau untuk menyamping seharusnya agan menggunakan style float: lalu tambahin class => clear:both untuk bagian ujung parent dimana agan ingin menghentikan proses float nya...
1
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>
0
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>
0
nggak bisa gan soalnya web ane dinamis pake php
0